*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --font-body: "Open Sans", Arial, sans-serif;
  --font-heading: "Wix Madefor Display", Arial, sans-serif;
  --font-ui: "Onest", Arial, sans-serif;
  --type-body: clamp(15px, 1.05vw, 20px);
  --type-caption: clamp(16px, 1.05vw, 20px);
  --type-preview: clamp(18px, 1.57vw, 30px);
  --type-project-nav: clamp(14px, 1.05vw, 20px);
  --caption-weight: 300;
  --section-content-inset: clamp(24px, 2.8vw, 54px);
  --header-clearance: 100px;

  --bg: #242424;
  --surface: #242424;
  --surface-2: #2a2a2a;
  --panel: #242424;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.8);
  --border: rgba(255, 255, 255, 0.1);
  --radius-xl: 28px;
  --radius-lg: 24px;
  --page-padding: 10px;
  --gap: 10px;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-clearance);
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: #0b0f17;
  color: var(--text);
  font-family: var(--font-body);
  position: relative;
}
#webGLApp {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
}
.page-shell {
  display: flex;
  flex-direction: column;
  z-index: 1;
  min-height: 100vh;
  padding: var(--page-padding);
}
.main {
  flex: 1;
}
.glass-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.glass-surface {
  --glass-light: rgba(255, 255, 255, 0.85);
  --glass-line: rgba(255, 255, 255, 0.10);
  --glass-dark: rgba(0, 0, 0, 0.18);
  --glass-radius: 30px;

  position: relative;
  overflow: hidden;
  border: none;
  border-radius: var(--glass-radius);
  background-color: var(--glass-bg);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px var(--glass-line),
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.4),
    inset -2px -2px 0 -2px rgba(255, 255, 255, 0.60),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.2);
}
.header {
  position: sticky;
  top: 10px;
  z-index: 1000;

  height: 80px;
  margin-bottom: var(--gap);

  display: grid;
  grid-template-columns:
    308px
    minmax(300px, 1fr)
    303px
    80px;

  gap: 10px;
  align-items: stretch;
}
.header__brand,
.header__navigation,
.header__cta,
.header__burger {
  width: 100%;
  height: 80px;
  min-height: 80px;

  margin: 0;
  border: none;
  border-radius: 30px;

  background: rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.4),
    inset -2px -2px 0 -2px rgba(255, 255, 255, 0.60),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.2),
    inset -0.3px -1px 4px 0 rgba(0, 0, 0, 0.24),
    inset -1.5px 2.5px 0 -2px rgba(0, 0, 0, 0.26),
    inset 0 3px 4px -2px rgba(0, 0, 0, 0.24),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.20),
    0 1px 5px 0 rgba(0, 0, 0, 0.20),
    0 6px 16px 0 rgba(0, 0, 0, 0.18);
}
.header__navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 70px;
  padding: 0 51px;
}
.header__navigation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 100%;

  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;

  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;

  transform-origin: center;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}
.header__navigation a:hover {
  color: #77adff;
  transform: scale(1.04);
}
.header__brand {
  font-family: "Onest", Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 308px;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}
.header__brand:hover {
  background-color: rgb(14, 92, 226);
}
.header__cta {
  width: 100%;
  height: 80px;
  min-height: 80px;

  margin: 0;
  padding: 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(119, 173, 225, 0.7);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;

  color: #ffffff;
  white-space: nowrap;

  cursor: pointer;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.35),
    inset -2px -2px 0 -2px rgba(255, 255, 255, 0.45),
    0 6px 16px rgba(0, 0, 0, 0.18);

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;

  
}
.header__cta:hover {
  background: rgba(14, 92, 226);
}
.header__burger {
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 7px;
  cursor: pointer;

  transition: background-color 0.3s ease;
}
.header__burger span {
  display: block;

  width: 38px;
  height: 3px;

  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease;
}
.header__burger:hover {
  background-color: rgb(14, 92, 226);
}
.header__burger.is-open {
  background-color: #0E5CE2;
}
.header__burger.is-open span {
  background-color: #ffffff;
}
.header__burger.is-open span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.header__burger.is-open span:nth-child(2) {
  opacity: 0;
}
.header__burger.is-open span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}
.hero {
  margin-bottom: var(--gap);
}
.hero__content {
  height: 520px;
  padding: 50px;
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  align-items: end;
}
.hero__left {
  grid-column: 1 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__title {
  margin: 0 0 -5px -7px;
  line-height: 1;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 150px;
}
.hero__subtitle {

  color: var(--muted);
  margin-bottom: 50px;
  margin-left: 1px;
}
.hero__right {
  grid-column: 5 / 7;
  align-self: end;
  padding-left: 20px;
}
.hero__description {
  margin: 0;

  color: var(--muted);
  text-align: left;
}
.projects {
  margin-bottom: var(--gap);
}
.projects__layout {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 94px;
  gap: var(--gap);
}
.projects__banner {
  position: relative;
  overflow: hidden;
  grid-column: 1 / 5;
  grid-row: 1 / 4;
  padding: 24px 28px;
  border-radius: 30px;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.projects__banner > * {
  position: relative;
  z-index: 1;
}
.projects__title {
  margin: 0 0 10px 20px;
  text-box-trim: trim-end;
  text-box-edge: cap alphabetic;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 80px;
  line-height: 1;
  color: #77ADFF;
  transition: color 0.35s ease, font-weight 0.35s ease;
}
.projects__banner:hover .projects__title {
  color: #0E5CE2;
  font-weight: 700;
}
.projects__button {
  position: relative;
  width: 54px;
  height: 54px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 12px;
  margin-bottom: 10px;
}
.projects__button:hover {
  transform: none;
}
.projects__button-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.projects__button-icon--default {
  opacity: 1;
}
.projects__button-icon--hover {
  opacity: 0;
}
.projects__button:hover .projects__button-icon--default {
  opacity: 0;
}
.projects__button:hover .projects__button-icon--hover {
  opacity: 1;
}

/* ПК */
@media (hover: hover) and (pointer: fine) {
.projects__banner:hover .projects__button-icon--default {
    opacity: 0;
  }
.projects__banner:hover .projects__button-icon--hover {
    opacity: 1;
  }
}

/* Телефон */
@media (hover: none) and (pointer: coarse) {
.projects__banner:active .projects__button-icon--default {
    opacity: 0;
  }
.projects__banner:active .projects__button-icon--hover {
    opacity: 1;
  }
}
.card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.8);
  transition: filter 0.35s ease;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.4),
    inset -2px -2px 0 -2px rgba(255, 255, 255, 0.60),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.2);
}
.card:hover img {
  filter: brightness(1);
}
.card-label {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;

  min-height: 100px;
  height: auto;
  padding: clamp(14px, 1.45vw, 28px) clamp(18px, 2.1vw, 40px);
  border-radius: 30px 30px 0 0;

  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);

  display: flex;
  flex-direction: column;
  justify-content: center;

  font-family: var(--font-heading);
  font-size: clamp(16px, 1.65vw, 30px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: #111;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;

  pointer-events: none;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.4),
    inset -2px -2px 0 -2px rgba(255, 255, 255, 0.60),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.2);
}
.card-label span {
  font-weight: 800;
}
.card-label span,
.card-label strong {
  font-size: inherit;
  line-height: inherit;
}
.card:hover .card-label {
  opacity: 1;
  transform: translateY(0);
}
.card--p1 { grid-column: 1 / 3; grid-row: 4 / 10; }
.card--p2 { grid-column: 3 / 4; grid-row: 4 / 7; }
.card--p3 { grid-column: 4 / 5; grid-row: 4 / 7; }
.card--p4 { grid-column: 5 / 7; grid-row: 1 / 7; }
.card--p5 { grid-column: 1 / 2; grid-row: 10 / 13; }
.card--p6 { grid-column: 2 / 3; grid-row: 10 / 13; }
.card--p7 { grid-column: 3 / 5; grid-row: 7 / 13; }
.card--p8 { grid-column: 5 / 7; grid-row: 7 / 16; }
.card--p9 { grid-column: 1 / 3; grid-row: 13 / 22; }
.card--p10 { grid-column: 3 / 5; grid-row: 13 / 19; }
.card--p11 { grid-column: 5 / 6; grid-row: 16 / 19; }
.card--p12 { grid-column: 6 / 7; grid-row: 16 / 19; }
.card--p13 { grid-column: 1 / 2; grid-row: 22 / 25; }
.card--p14 { grid-column: 2 / 3; grid-row: 22 / 25; }
.card--p15 { grid-column: 3 / 4; grid-row: 19 / 22; }
.card--p16 { grid-column: 5 / 7; grid-row: 19 / 25; }
.card--p17 { grid-column: 4 / 5; grid-row: 19 / 22; }
.card--p18 { grid-column: 3 / 4; grid-row: 22 / 25; }
.card--p19 { grid-column: 4 / 5; grid-row: 22 / 25; }
.card--p20 { grid-column: 1 / 7; grid-row: 25 / 35; }
.card--p21 { grid-column: 1 / 2; grid-row: 35 / 38; }
.card--p22 { grid-column: 2 / 3; grid-row: 35 / 38; }
.card--p23 { grid-column: 3 / 5; grid-row: 35 / 41; }
.card--p24 { grid-column: 5 / 6; grid-row: 35 / 38; }
.card--p25 { grid-column: 6 / 7; grid-row: 35 / 38; }
.card--p26 { grid-column: 1 / 3; grid-row: 38 / 44; }
.card--p27 { grid-column: 3 / 4; grid-row: 41 / 44; }
.card--p28 { grid-column: 4 / 5; grid-row: 41 / 44; }
.card--p29 { grid-column: 5 / 7; grid-row: 38 / 44; }
.footer {
  min-height: 144px;
  padding: 20px 28px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--gap);
}
.footer__left {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-left: 21px;
  margin-bottom: 12px;
}
.footer__brand {
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 400;
}
.footer__year {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--muted);
}
.footer__mail {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--muted);

  margin: 0 0 0 auto;

  display: inline-block;

  transform-origin: left center;
  transition: color 0.3s ease, transform 0.3s ease;
}
.footer__mail:hover {
  color: #77ADFF;
  transform: scaleX(1.03);
}
.footer__socials {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 38px);

  margin: 0 6px 0 40px;

  flex-shrink: 0;
}
.social {
  position: relative;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.social__icon {
  position: absolute;
  inset: 0;
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.social__icon--default { opacity: 1; }
.social__icon--hover { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
.social:hover .social__icon--default { opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
.social:hover .social__icon--hover { opacity: 1; }
}

/* =====================
   ORDER MODAL
===================== */
.order-modal {
  position: fixed;
  inset: 0;
  z-index: 7000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}
.order-modal.is-open {
  transition-delay: 0s;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.order-modal__overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Основная рамка 1080 × 818 */
.order-modal__window {
  position: relative;
  z-index: 1;

  width: min(1080px, calc(100vw - 48px));
  height: min(818px, calc(100vh - 48px));

  padding: 64px 90px 54px;
  box-sizing: border-box;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;

  background: rgba(43, 43, 43, 0.82);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 30px 90px rgba(0, 0, 0, 0.4);

  overflow: hidden;

  transform: translateY(18px) scale(0.985);

  transition: transform 0.3s ease;
}
.order-modal.is-open .order-modal__window {
  transform: translateY(0) scale(1);
}

/* Крестик 24 × 24 */
.order-modal__close {
  position: absolute;
  top: 27px;
  right: 27px;

  width: 24px;
  height: 24px;

  padding: 0;
  border: none;

  display: block;

  cursor: pointer;
  background: transparent;
}
.order-modal__close-icon {
  width: 24px;
  height: 24px;

  display: block;
  object-fit: contain;
}

/* Заголовок */
.order-modal__title {
  margin: 0;

  text-align: center;

  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 700;
  line-height: 1;

  color: #77adff;
}

/* Описание */
.order-modal__description {
  width: 100%;
  max-width: 760px;

  margin: 48px auto 42px;

  text-align: center;

  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.18;

  color: rgba(255, 255, 255, 0.92);
}

/* Форма */
.order-modal__form {
  width: 700px;
  max-width: 100%;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Поля */
.order-modal__input {
  width: 100%;
  height: 53px;

  padding: 0 20px;
  box-sizing: border-box;

  border: none;
  border-radius: 999px;
  outline: none;

  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;

  color: #222222;
  background: #ffffff;
}
.order-modal__input::placeholder {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;

  color: rgba(0, 0, 0, 0.22);
}
.order-modal__input:focus {
  box-shadow: 0 0 0 2px rgba(110, 166, 255, 0.7);
}

/* Обязательное поле */
.order-modal__note {
  margin: 2px 0 30px 20px;

  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;

  color: rgba(255, 255, 255, 0.55);
}

/* Кнопка отправки 700 × 53 */
.order-modal__submit {
  position: relative;

  width: 100%;
  height: 53px;

  padding: 0;
  border: none;
  border-radius: 999px;

  display: block;
  overflow: hidden;

  cursor: pointer;
  background: transparent;
}
.order-modal__submit-icon {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
  object-fit: fill;

  transition: opacity 0.25s ease;
}
.order-modal__submit-icon--default {
  opacity: 1;
}
.order-modal__submit-icon--hover,
.order-modal__submit-icon--success {
  opacity: 0;
}
.order-modal__submit:hover
.order-modal__submit-icon--default {
  opacity: 0;
}
.order-modal__submit:hover
.order-modal__submit-icon--hover {
  opacity: 1;
}
.order-modal__submit.is-success
.order-modal__submit-icon--default,
.order-modal__submit.is-success
.order-modal__submit-icon--hover {
  opacity: 0;
}
.order-modal__submit.is-success
.order-modal__submit-icon--success {
  opacity: 1;
}
.order-modal__submit.is-success {
  cursor: default;
}

/* Нижний блок контактов */
.order-modal__contacts {
  margin-top: 58px;

  text-align: center;
}
.order-modal__contacts p {
  margin: 0 0 26px;

  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;

  color: rgba(255, 255, 255, 0.92);
}

/* Telegram и почта */
.order-modal__socials {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;
}
.order-modal__social {
  position: relative;

  width: 60px;
  height: 60px;

  display: block;

  border-radius: 50%;

  text-decoration: none;
  background: transparent;
}
.order-modal__social-icon {
  position: absolute;
  inset: 0;

  width: 60px;
  height: 60px;

  display: block;
  object-fit: contain;

  transition: opacity 0.25s ease;
}
.order-modal__social-icon--default {
  opacity: 1;
}
.order-modal__social-icon--hover {
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
.order-modal__social:hover
.order-modal__social-icon--default {
  opacity: 0;
}
}
@media (hover: hover) and (pointer: fine) {
.order-modal__social:hover
.order-modal__social-icon--hover {
  opacity: 1;
}
}

/* =====================
   NEW BURGER MENU
===================== */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.burger-menu {
  position: fixed;
  top: 100px;
  left: 10px;
  right: 10px;
  z-index: 999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-14px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
}
.burger-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0);
}
.burger-menu__inner {
  width: 100%;
  height: min(700px, calc(100vh - 120px));
  min-height: 0;
  padding: 54px 64px;

  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 100px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;

  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);

  overflow-y: auto;
}
.burger-menu__title {
  display: block;
  width: fit-content;

  margin: 0 0 42px;

  font-family: var(--font-ui);
  font-size: 50px;
  font-weight: 700;
  line-height: 1;

  color: #0E5CE2;
  text-transform: uppercase;
  text-decoration: none;

  transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
.burger-menu__cases > .burger-menu__title:hover {
    color: #77ADFF;
  }
}
.burger-menu__cases > .burger-menu__title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  color: #0E5CE2;
}
.burger-menu__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 70px;
}
.burger-menu__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.burger-menu__column a {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;

  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}
.burger-menu__column a:hover {
  color: rgb(119, 173, 255);
  transform: scale(1.04);
}
.burger-menu__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.burger-menu__contacts .burger-menu__title {
  margin-bottom: 40px;
}
.burger-menu__email {
  margin-top: -8px;
  margin-bottom: 46px;

  font-family: var(--font-ui);
  font-size: 50px;
  font-weight: 500;
  line-height: 1;

  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.3s ease;
}
.burger-menu__email:hover {
  color: #77adff;
}
.burger-menu__socials {
  display: flex;
  align-items: center;
  gap: 18px;
}
.burger-menu__socials a {
  position: relative;

  width: 60px;
  height: 60px;

  display: block;

  background: transparent;
  border-radius: 0;

  transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.burger-menu__socials a:hover {
  background: transparent;
}
}
.burger-menu__social {
  position: relative;

  width: 60px;
  height: 60px;

  display: block;
  flex: 0 0 60px;

  overflow: hidden;
  background: transparent;
}
.burger-menu__social-icon {
  position: absolute;
  inset: 0;

  width: 60px;
  height: 60px;

  display: block;
  object-fit: contain;

  transition: opacity 0.25s ease;
}
.burger-menu__social-icon--default {
  opacity: 1;
}
.burger-menu__social-icon--hover {
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
.burger-menu__social:hover .burger-menu__social-icon--default {
  opacity: 0;
}
}
@media (hover: hover) and (pointer: fine) {
.burger-menu__social:hover .burger-menu__social-icon--hover {
  opacity: 1;
}
}

/* Адаптив */

@media (max-width: 1100px) {
.order-modal__window {
    height: auto;
    max-height: calc(100vh - 48px);

    padding: 54px 50px 46px;

    overflow-y: auto;
  }
.order-modal__title {
    font-size: 42px;
  }
.order-modal__description,
.order-modal__contacts p {
    font-size: 28px;
  }
}

.order-modal__mobile-break { display: none; }

/* Mobile order card: slightly enlarged, centered within the visible viewport. */
@media (max-width: 768px) {
  .order-modal {
    padding: max(4.5px, env(safe-area-inset-top)) max(4.5px, env(safe-area-inset-right)) max(4.5px, env(safe-area-inset-bottom)) max(4.5px, env(safe-area-inset-left));
    height: var(--modal-viewport-height, 100dvh);
    top: var(--modal-viewport-top, 0px);
    bottom: auto;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
  }
  .order-modal__overlay { background: rgba(0, 0, 0, .7); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .order-modal__window {
    width: min(340px, 100%);
    height: auto;
    max-height: calc(var(--modal-viewport-height, 100dvh) - max(9px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding: 60px 22px 44px;
    border: 0;
    border-radius: 30px;
    background: #393939;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: none;
  }
  .order-modal.is-open .order-modal__window { transform: none; }
  .order-modal__close { top: 10px; right: 10px; width: 32px; height: 32px; padding: 8px; }
  .order-modal__close-icon { width: 16px; height: 16px; }
  .order-modal__title { font-size: clamp(24px, 6.67vw, 26px); line-height: 31px; }
  .order-modal__mobile-break { display: initial; }
  .order-modal__description { text-transform: none; margin: 16px auto; font-size: clamp(14px, 3.85vw, 15px); line-height: 18px; max-width: 296px; }
  .order-modal__form { gap: 7px; }
  .order-modal__input,
  .order-modal__submit {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 271 / 27;
    flex-shrink: 0;
  }
  .order-modal__input { padding: 0 17px; font-size: 16px; line-height: 30px; }
  /* Smaller placeholder shares the 16px input baseline; center its visible text. */
  .order-modal__input::placeholder { font-size: 11px; transform: translateY(-2px); }
  .order-modal__note { margin: 2px 0 11px; font-size: 11px; line-height: 13px; }
  .order-modal__submit {
    background: url("assets/icons/buttons/burger-send/sendmobile1.svg") center / contain no-repeat;
  }
  .order-modal__submit-icon { display: none; }
  /* sendmobile2 is the sent confirmation, not a hover image. */
  .order-modal__submit.is-success {
    background-image: url("assets/icons/buttons/burger-send/sendmobile2.svg");
  }
  .order-modal__submit:active:not(:disabled) { filter: brightness(1.2); }
  @media (hover: hover) {
    .order-modal__submit:hover:not(:disabled) { filter: brightness(1.2); }
  }
  .order-modal__contacts { margin-top: 20px; }
  .order-modal__contacts p { margin: 0 0 16px; font-size: clamp(14px, 3.85vw, 15px); line-height: 18px; }
  .order-modal__socials { gap: 7px; }
  .order-modal__social, .order-modal__social-icon { width: 32px; height: 32px; }
}

.scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;

  width: 72px;
  height: 40px;
  border: none;
  border-radius: 999px;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(14px);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background-color 0.3s ease;
}
.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top:hover {
  background: #0E5CE2;
}
.scroll-top span {
  position: absolute;
  left: 50%;
  top: 54%;

  width: 18px;
  height: 18px;

  border-left: 3px solid #ffffff;
  border-top: 3px solid #ffffff;

  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
}

@media (max-width: 768px) {
.header {
    grid-template-columns: 1fr;
    align-items: start;
    height: auto;
  }
.header__brand,
.header__right,
.header__burger {
    min-height: 64px;
    border-radius: 28px;
  }
.header__brand {
    justify-content: center;
    padding: 0 20px;
    width: 100%;
  }
.header__right {
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
  }
.header__cta {
    width: auto;
    min-width: 0;
    font-size: 18px;
    flex: 1 1 auto;
  }
.header__burger {
    width: 64px;
    height: 64px;
    margin-right: 0;
    flex: 0 0 auto;
  }
.burger-menu {
    top: 88px;
    left: 6px;
    right: 6px;
  }
.burger-menu__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 24px;
  }
.burger-menu__title {
    font-size: 30px;
  }
.burger-menu__left a {
    font-size: 18px;
  }
.burger-menu__big-link {
    font-size: 30px;
  }
.hero__content {
    min-height: auto;
    max-height: none;
    padding: 24px 20px;
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
.hero__left,
.hero__right {
    grid-column: 1 / 2;
  }
.hero__title {
    margin: 0;
    font-size: 84px;
  }
.hero__right {
    max-width: 100%;
  }
.projects__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 110px;
  }
.projects__banner {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
.card--p1 { grid-column: 1 / 3; grid-row: 2 / 4; }
.card--p2 { grid-column: 1 / 2; grid-row: 4 / 5; }
.card--p3 { grid-column: 2 / 3; grid-row: 4 / 5; }
.card--p4 { grid-column: 1 / 3; grid-row: 5 / 8; }
.card--p5 { grid-column: 1 / 3; grid-row: 8 / 10; }
.card--p6,
.card--p7,
.card--p8,
.card--p9,
.card--p10,
.card--p11,
.card--p12,
.card--p13,
.card--p14,
.card--p15,
.card--p16 {
    display: none;
  }
.footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
.footer__mail {
    margin-left: 0;
    margin-top: 0;
  }
}

@media (max-width: 600px) {
.page-shell {
    padding: 6px;
  }
.header__brand {
    font-size: 16px;
  }
.header__cta {
    font-size: 14px;
  }
.hero__title {
    font-size: 56px;
  }

.projects__title {
    font-size: 40px;
  }
.projects__button {
    width: 48px;
    height: 48px;
  }
.projects__button-icon {
    width: 48px;
    height: 48px;
  }
.footer__mail {
    word-break: break-word;
  }
}

/* Responsive shared components: bounded typography and content-sized overlays. */
.header > *,
.hero__left,
.hero__right,
.burger-menu__cases,
.burger-menu__contacts { min-width: 0; }
.card-label { overflow-wrap: anywhere; }
.order-modal__window {
  height: auto;
  overflow-y: auto;
}
.burger-menu__inner { max-height: calc(100dvh - 120px); }
.burger-menu__email { overflow-wrap: anywhere; }

@media (min-width: 769px) {
.order-modal__window { max-height: calc(100dvh - 48px); }
.header {
    height: 80px;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2.7fr) minmax(190px, 1fr) 80px;
  }
.header__brand { width: 100%; font-size: clamp(24px, 1.57vw, 30px); }
.header__navigation { gap: clamp(24px, 3.6vw, 70px); padding: 0 clamp(20px, 2.65vw, 51px); }
.header__navigation a { font-size: clamp(17px, 1.15vw, 22px); }
.header__cta { padding: 0 16px; font-size: clamp(17px, 1.15vw, 22px); }
.hero__content { height: auto; min-height: clamp(350px, 27vw, 520px); padding: clamp(28px, 2.6vw, 50px); }
.hero__title { font-size: clamp(60px, 7.8vw, 150px); }

.hero__right { grid-column: 4 / 7; padding-left: clamp(20px, 4vw, 70px); }
.projects__layout { grid-auto-rows: clamp(40px, 4.9vw, 94px); }
.projects__title { font-size: clamp(36px, 4.2vw, 80px); }
.burger-menu__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 100px); padding: clamp(28px, 3vw, 54px) clamp(28px, 3.3vw, 64px); }
.burger-menu__title,
.burger-menu__cases > .burger-menu__title,
.burger-menu__email { font-size: clamp(24px, 2.6vw, 50px); }
.burger-menu__links { gap: clamp(20px, 3.6vw, 70px); }
.burger-menu__column a { font-size: clamp(18px, 1.56vw, 30px); overflow-wrap: anywhere; }
.footer { flex-wrap: wrap; }
.footer__socials { margin-left: clamp(0px, 2vw, 40px); }
}
@media (min-width: 769px) and (max-width: 1100px) {
.header { grid-template-columns: minmax(0, 1fr) minmax(190px, 0.8fr) 80px; }
.header__navigation { display: none; }
.burger-menu__inner { grid-template-columns: 1fr; gap: 28px; }
}


/* =====================
   Shared mobile layout for internal pages
===================== */

@media (max-width: 768px) {
:root {
    --page-padding: 6px;
    --gap: 6px;
    --radius-xl: 20px;
    --radius-lg: 20px;
  }
html {
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }
html::-webkit-scrollbar {
    display: none;
  }
.page-shell {
    padding: var(--page-padding);
  }
.header {
    top: 6px;
    height: 50px;
    margin-bottom: 4px;
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 6px;
  }
.header__navigation,
.header__cta {
    display: none;
  }
.header__brand,
.header__burger {
    width: 100%;
    height: 50px;
    min-height: 50px;
    border-radius: 20px;
  }
.header__brand {
    justify-content: flex-start;
    padding: 0 20px;
    font-size: 16px;
  }
.header__burger {
    border-radius: 50%;
    gap: 5px;
  }
.header__burger span {
    width: 20px;
    height: 2px;
  }
.header__burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
.header__burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
.burger-menu {
    top: 62px;
    left: 6px;
    right: 6px;
  }
.burger-menu__inner {
    width: 100%;
    height: auto;
    padding: 20px;
    display: block;
    border: none;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
  }
.burger-menu__title {
    margin: 0 0 12px;
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }
.burger-menu__left > .burger-menu__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 12px;
  }
.burger-menu__title {
    transition: color 0.15s ease;
  }

  @media (hover: none) and (pointer: coarse) {
.burger-menu__cases > .burger-menu__title:active {
      color: #77ADFF;
    }
  }
.burger-menu__links {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
.burger-menu__column {
    display: contents;
  }
.burger-menu__column a {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    color: rgba(255, 255, 255, 0.8);
  }
.burger-menu__contacts {
    margin-top: 29px;
  }
.burger-menu__contacts .burger-menu__title {
    margin-bottom: 14px;
  }
.burger-menu__email {
    margin: 0 0 17px;
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.8);
  }
.burger-menu__socials,
.footer__socials {
    gap: 6px;
  }
.burger-menu__socials a,
.burger-menu__social,
.burger-menu__social-icon,
.footer .social,
.footer .social__icon {
    width: 30px;
    height: 30px;
  }
.burger-menu__social {
    flex-basis: 30px;
  }
.footer {
    position: relative;
    min-height: 158px;
    margin-top: 6px;
    padding: 20px;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    border-radius: 20px;
  }
.footer__left {
    position: absolute;
    left: 20px;
    bottom: 20px;
    margin: 0;
    gap: 6px;
  }
.footer__brand {
    font-size: 12px;
  }
.footer__year,
.footer__mail {
    font-size: 10px;
  }
.footer__mail {
    position: absolute;
    top: 20px;
    left: 20px;
    margin: 0;
    word-break: normal;
  }
.footer__socials {
    position: absolute;
    right: 20px;
    bottom: 20px;
    margin: 0;
  }
.footer .social,
.footer .social__icon {
    width: 40px;
    height: 40px;
  }
.scroll-top {
    right: 12px;
    bottom: var(--scroll-top-bottom, 12px);
    width: 42px;
    height: 42px;
  }
.footer {
    font-size: 14px;
  }
.footer a,
.footer__email,
.footer__brand,
.footer__year {
    font-size: 14px;
    line-height: 14px;
  }

  /* Home page: the mobile reference keeps the complete portfolio mosaic. */
.home-page .hero__content {
    height: 221px;
    min-height: 221px;
    padding: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    border-radius: 20px;
  }
.home-page .hero__left {
    width: 100%;
  }
.home-page .hero__title {
    margin: 0;
    font-size: 40px;
    line-height: 1.02;
  }
.home-page .hero__subtitle {
    margin: 5px 0 12px;
    
    
  }
.home-page .hero__right {
    display: none;
  }
.home-page .projects__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    grid-auto-rows: auto;
    gap: 6px;
  }
.home-page .projects__banner {
    order: 0;
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 70px;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
  }
.home-page .projects__title {
    margin: 0;
    font-size: 26px;
    text-box-trim: trim-both;
  }
.home-page .projects__button,
.home-page .projects__button-icon {
    width: 30px;
    height: 30px;
  }
.home-page .projects__button {
    margin: 0;
  }
.home-page .card,
.home-page .card--p6,
.home-page .card--p7,
.home-page .card--p8,
.home-page .card--p9,
.home-page .card--p10,
.home-page .card--p11,
.home-page .card--p12,
.home-page .card--p13,
.home-page .card--p14,
.home-page .card--p15,
.home-page .card--p16 {
    display: block;
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: 151 / 145;
    border-radius: 20px;
  }
.home-page .card--p2 { order: 1; }
.home-page .card--p3 { order: 2; }
.home-page .card--p1 { order: 3; }
.home-page .card--p4 { order: 4; }
.home-page .card--p5 { order: 5; }
.home-page .card--p6 { order: 6; }
.home-page .card--p7 { order: 7; }
.home-page .card--p9 { order: 8; }
.home-page .card--p10 { order: 9; }
.home-page .card--p8 { order: 10; }
.home-page .card--p11 { order: 11; }
.home-page .card--p12 { order: 12; }
.home-page .card--p13 { order: 13; }
.home-page .card--p14 { order: 14; }
.home-page .card--p15 { order: 15; }
.home-page .card--p17 { order: 16; }
.home-page .card--p18 { order: 17; }
.home-page .card--p19 { order: 18; }
.home-page .card--p16 { order: 19; }
.home-page .card--p20 { order: 20; }
.home-page .card--p21 { order: 21; }
.home-page .card--p22 { order: 22; }
.home-page .card--p23 { order: 23; }
.home-page .card--p24 { order: 24; }
.home-page .card--p25 { order: 25; }
.home-page .card--p26 { order: 26; }
.home-page .card--p27 { order: 27; }
.home-page .card--p28 { order: 28; }
.home-page .card--p29 { order: 29; }
.home-page :is(.card--p1,
.card--p4,
.card--p7,
.card--p8,
.card--p20,
.card--p29) {
    grid-column: 1 / -1;
    aspect-ratio: 308 / 173;
  }
.home-page :is(.card--p1,
.card--p8) {
    aspect-ratio: 1 / 1;
  }
.home-page .card-label {
    display: none;
  }
.home-page .card--p25 {
    grid-column: 1 / -1;
    aspect-ratio: 1 / 1;
  }
.home-wide-mobile {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 2 / 1;
  }
.home-wide-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.card-label--catalog {
    display: block;
    padding-top: 20px;
  }
.card-label--catalog .catalog-line {
    white-space: nowrap;
  }
.card-label--catalog strong {
    font-weight: 800;
  }
}

@media (max-width: 768px) {
.burger-menu__inner { max-height: calc(100dvh - 68px); }
.burger-menu__cases > .burger-menu__title { font-size: 18px; }
}


/* Shared text roles. Page-specific styles control layout; heading scales are grouped below. */
.hero__description, .page-info p, .page-text-card p,
.conference-intro p, .expo-intro p, .exhibition-intro p,
.conference-item p, .exhibition-item p, .digital-info__item p,
.project-showcase__text, .page-divider__text, .project-preview__subtitle,
.page-info__body--strategic, .page-info__body--polytechnic {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.3;
}
.hero__subtitle, .page-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: var(--caption-weight);
  line-height: 1.3;
}
.page-info p.page-info__accent {
  font-family: var(--font-heading);
  font-weight: 600;
}
.page-info h2, .page-text-card h2, .page-divider h2, .page-section h2,
.conference-intro h2, .expo-intro h2, .exhibition-intro h2,
.conference-item h3, .exhibition-item h3, .project-showcase__title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
}
.project-preview__title {
  font-family: var(--font-heading);
  font-size: var(--type-preview);
  font-weight: 600;
  line-height: 1.2;
}
.project-nav__button, .project-nav__title {
  font-family: var(--font-body);
  font-size: var(--type-project-nav);
  font-weight: 600;
  line-height: 1.25;
}
/* One size for blue section headings across all case pages. */
@media (min-width: 769px) {
  .page-info h2, .page-text-card h2, .page-divider h2, .page-section h2,
  .conference-intro h2, .expo-intro h2, .exhibition-intro h2,
  .project-showcase__title {
    font-size: clamp(20px, 1.57vw, 30px);
  }
  .conference-item h3, .exhibition-item h3 { font-size: var(--type-body); }
}
.burger-menu__order-button { display: none; }
@media (max-width: 768px) {
  :root {
    --section-content-inset: 20px;
    --type-body: 14px;
    --type-caption: 14px;
    --type-preview: 18px;
    --type-project-nav: 12px;
    --caption-weight: 500;
  }
  .page-info h2, .page-text-card h2, .page-divider h2, .page-section h2,
  .conference-intro h2, .expo-intro h2, .exhibition-intro h2,
  .conference-item h3, .exhibition-item h3, .project-showcase__title {
    font-size: 14px;
  }
  .burger-menu__order-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    min-height: 40px;
    margin-top: 32px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: #0e5ce2;
    font: 500 14px/1.3 var(--font-ui);
    color: #fff;
    cursor: pointer;
  }
  .burger-menu__order-button:active { transform: scale(0.97); }
}

/* Center the title group on desktop; mobile keeps bottom alignment. */
.home-page .hero__content { height: auto; }
.home-page .hero__subtitle { margin-bottom: 0; }
@media (min-width: 769px) {
  .home-page .hero__content { align-items: center; }
  .home-page .hero__left { align-self: center; }
}

/* Touch links activate directly; decorative icon layers never receive taps. */
.social, .burger-menu__social, .order-modal__social {
  touch-action: manipulation;
}
.social__icon, .burger-menu__social-icon, .order-modal__social-icon {
  pointer-events: none;
}