@import url("https://fonts.googleapis.com/css2?family=Marck+Script&display=swap");
:root {
  --bg: #090b0e;
  --bg-soft: #111419;
  --wine: #4b0715;
  --wine-bright: #720d25;
  --gold: #d8b56c;
  --gold-light: #f0d99f;
  --cream: #f4ead5;
  --white: #fffaf1;
  --muted: rgba(255, 250, 241, 0.68);
  --line: rgba(216, 181, 108, 0.28);
  --container: 1220px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.is-modal-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.grad-page {
  overflow: hidden;
}

.grad-container {
  width: min(
    calc(100% - 64px),
    var(--container)
  );
  margin: 0 auto;
}

.grad-kicker {
  margin: 0 0 20px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.grad-button {
  min-height: 56px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.grad-button:hover {
  transform: translateY(-2px);
}

.grad-button--primary {
  color: #1a1110;
  background:
    linear-gradient(
      135deg,
      #f0d99f,
      #c69343
    );
  box-shadow:
    0 12px 35px rgba(199, 148, 67, 0.24);
}

.grad-button--large {
  min-width: 230px;
}


/* HERO */

.grad-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  background: #111;
}

.grad-hero__media,
.grad-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.grad-hero__image {
  object-fit: cover;
}

.grad-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(4, 5, 7, 0.96) 0%,
      rgba(5, 6, 8, 0.78) 37%,
      rgba(7, 7, 9, 0.23) 70%,
      rgba(7, 7, 9, 0.12) 100%
    ),
    linear-gradient(
      0deg,
      rgba(6, 6, 8, 0.72),
      transparent 45%
    );
}

.grad-hero__inner {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding: 54px 0 76px;
  display: flex;
  flex-direction: column;
}

.grad-logo {
  width: 190px;
  height: auto;
}

.grad-hero__content {
  width: min(650px, 70%);
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 48px;
}

.grad-hero__title {
  margin: 0;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-weight: 400;
  font-size: clamp(64px, 7.6vw, 118px);
  line-height: 0.79;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.grad-hero__title span {
  display: block;
}

.grad-hero__title-accent {
  margin-top: 18px;
  color: var(--gold-light);
  font-size: 0.48em;
  letter-spacing: 0.03em;
}

.grad-hero__classes {
  margin: 32px 0 0;
  color: var(--gold-light);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(25px, 2.1vw, 34px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.grad-hero__lead {
  margin: 16px 0 0;
  max-width: 560px;
  color: rgba(255, 250, 241, 0.88);
  font-size: 20px;
  line-height: 1.5;
}

.grad-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 34px;
}

.grad-hero__facts span {
  padding: 9px 14px;
  border: 1px solid rgba(216, 181, 108, 0.34);
  border-radius: 999px;
  color: rgba(255,255,255,.84);
  font-size: 13px;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.18);
}

.grad-scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.grad-scroll i {
  width: 42px;
  height: 1px;
  background: rgba(216,181,108,.6);
}


/* COMMON HEADINGS */

.grad-section-heading h2 {
  max-width: 760px;
  margin: 0;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(48px, 5.2vw, 82px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.035em;
}

.grad-section-heading h2 span {
  display: block;
  color: var(--gold);
}

.grad-section-heading--center {
  text-align: center;
}

.grad-section-heading--center h2,
.grad-section-heading--center .grad-section-lead {
  margin-left: auto;
  margin-right: auto;
}

.grad-section-lead {
  max-width: 580px;
  margin-top: 20px;
  color: #685f54;
  font-size: 18px;
  line-height: 1.55;
}


/* SPACE */

.grad-space {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 0;
  background: #0d0f13;
}

.grad-space__media,
.grad-space__media img,
.grad-space__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.grad-space__media img {
  object-fit: cover;
}

.grad-space__shade {
  background:
    linear-gradient(
      90deg,
      rgba(7,8,11,.96) 0%,
      rgba(7,8,11,.82) 48%,
      rgba(7,8,11,.54) 100%
    );
}

.grad-space__inner {
  position: relative;
  z-index: 2;
}

.grad-features {
  margin-top: 68px;
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.grad-feature {
  min-height: 280px;
  padding: 28px 24px 30px;
  border-right: 1px solid var(--line);
}

.grad-feature:first-child {
  padding-left: 0;
}

.grad-feature:last-child {
  border-right: 0;
}

.grad-feature strong {
  display: block;
  margin-bottom: 46px;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 44px;
  font-weight: 400;
}

.grad-feature h3 {
  margin: 0 0 13px;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
}

.grad-feature p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}


/* MENU */

.grad-menu {
  min-height: 100svh;
  padding: 110px 0 120px;
  background:
    radial-gradient(
      circle at 50% 0%,
      #fffdf7 0,
      #f2e8d7 60%,
      #e9dcc8 100%
    );
  color: #32131a;
}

.grad-menu .grad-kicker {
  color: #7b2734;
}

.grad-menu__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  margin-top: 64px;
  border-top: 1px solid rgba(110,66,51,.25);
  border-bottom: 1px solid rgba(110,66,51,.25);
}

.grad-menu-card {
  position: relative;
  padding: 38px 30px 42px;
  border-right: 1px solid rgba(110,66,51,.22);
}

.grad-menu-card:first-child {
  padding-left: 0;
}

.grad-menu-card:last-child {
  border-right: 0;
}

.grad-menu-card__number {
  margin-bottom: 40px;
  color: #ae8b56;
  font-family: Georgia, serif;
  font-size: 17px;
}

.grad-menu-card__choice {
  margin: 0 0 7px;
  color: #906c3b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.grad-menu-card h3 {
  margin: 0 0 28px;
  font-family: Georgia, serif;
  font-size: 29px;
  line-height: 1.05;
  font-weight: 400;
}

.grad-menu-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.grad-menu-card li {
  position: relative;
  padding: 0 0 13px 18px;
  line-height: 1.4;
  color: #49383a;
}

.grad-menu-card li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 4px;
  color: #b28b4d;
  font-size: 7px;
}


/* PROGRAM */

.grad-program {
  min-height: 100svh;
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(45, 73, 94, .28),
      transparent 38%
    ),
    #08121a;
}

.grad-program__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) .7fr;
  gap: 80px;
}

.grad-timeline {
  margin-top: 60px;
}

.grad-time {
  display: grid;
  grid-template-columns: 185px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid rgba(216,181,108,.18);
}

.grad-time:last-child {
  border-bottom: 1px solid rgba(216,181,108,.18);
}

.grad-time time {
  color: var(--gold-light);
  font-family: Georgia, serif;
  font-size: 22px;
}

.grad-time h3 {
  margin: 0 0 5px;
  font-family: Georgia, serif;
  color: var(--cream);
  font-size: 23px;
  font-weight: 400;
}

.grad-time p {
  margin: 0;
  color: rgba(255,255,255,.59);
  line-height: 1.5;
}

.grad-program__extras {
  align-self: center;
  padding: 44px 36px;
  background:
    linear-gradient(
      145deg,
      #5b091b,
      #330710
    );
  border: 1px solid rgba(216,181,108,.55);
  box-shadow:
    0 35px 90px rgba(0,0,0,.28);
}

.grad-program__extras-kicker {
  margin: 0 0 28px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.grad-extra {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  padding: 25px 0;
  border-top: 1px solid rgba(216,181,108,.2);
}

.grad-extra span {
  color: var(--gold);
  font-family: Georgia, serif;
}

.grad-extra h3 {
  margin: 0 0 8px;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 400;
}

.grad-extra p {
  margin: 0;
  color: rgba(255,255,255,.64);
  line-height: 1.5;
}

.grad-program__signature {
  margin: 32px 0 0;
  color: var(--gold-light);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 24px;
}


/* PRICE */

.grad-price {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 100px 0 90px;
  text-align: center;
  background:
    radial-gradient(
      circle at 50% 25%,
      #651229 0,
      #26050c 38%,
      #09090b 78%
    );
}

.grad-price__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 60%,
      rgba(216,181,108,.08),
      transparent 42%
    );
  pointer-events: none;
}

.grad-price__inner {
  position: relative;
  z-index: 2;
}

.grad-price__logo {
  width: 170px;
  margin-bottom: 38px;
}

.grad-price h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(52px, 6vw, 88px);
  letter-spacing: -.04em;
}

.grad-price__cards {
  width: min(820px, 100%);
  margin: 58px auto 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(216,181,108,.45);
  background: rgba(27,5,11,.56);
}

.grad-price-card {
  padding: 40px 24px 46px;
}

.grad-price-card + .grad-price-card {
  border-left: 1px solid rgba(216,181,108,.3);
}

.grad-price-card p {
  margin: 0 0 12px;
  color: var(--gold-light);
  font-family: Georgia, serif;
  font-size: 22px;
}

.grad-price-card strong {
  display: block;
  color: #fff0c7;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(58px, 6vw, 86px);
  line-height: 1;
}

.grad-price-card strong span {
  font-size: .48em;
}

.grad-price__lead {
  margin: 0 0 30px;
  color: rgba(255,255,255,.69);
  font-size: 18px;
}

.grad-price__footer {
  margin: 62px 0 0;
  color: rgba(255,255,255,.37);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}


/* MODAL */

.grad-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  padding: 24px;
  align-items: center;
  justify-content: center;
}

.grad-modal.is-open {
  display: flex;
}

.grad-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,.76);
  backdrop-filter: blur(12px);
}

.grad-modal__dialog {
  position: relative;
  z-index: 2;
  width: min(540px, 100%);
  max-height: calc(100svh - 48px);
  overflow: auto;
  padding: 42px;
  border: 1px solid rgba(216,181,108,.35);
  background:
    linear-gradient(
      145deg,
      #161318,
      #0c0d10
    );
  box-shadow: 0 35px 100px rgba(0,0,0,.5);
}

.grad-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.65);
  font-size: 32px;
  cursor: pointer;
}

.grad-modal__kicker {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.grad-modal h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 44px;
  font-weight: 400;
}

.grad-modal__intro {
  margin: 14px 0 28px;
  color: var(--muted);
  line-height: 1.5;
}

.grad-form {
  display: grid;
  gap: 18px;
}

.grad-form label span {
  display: block;
  margin-bottom: 7px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

.grad-form input {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  border: 1px solid rgba(216,181,108,.22);
  border-radius: 0;
  outline: none;
  background: rgba(255,255,255,.055);
  color: white;
}

.grad-form input:focus {
  border-color: rgba(216,181,108,.7);
}

.grad-form__submit {
  width: 100%;
  margin-top: 6px;
}

.grad-form__message {
  min-height: 20px;
  margin: 0;
  color: var(--gold-light);
  font-size: 13px;
  line-height: 1.45;
}


/* STICKY */

.grad-sticky {
  position: fixed;
  z-index: 500;
  left: 50%;
  bottom: 22px;
  transform:
    translate(-50%, 140%);
  width: min(720px, calc(100% - 40px));
  padding: 10px 10px 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(216,181,108,.28);
  border-radius: 999px;
  background: rgba(12,12,14,.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition:
    transform .28s ease,
    opacity .28s ease;
}

.grad-sticky.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.grad-sticky__copy {
  display: flex;
  flex-direction: column;
}

.grad-sticky__copy strong {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 400;
}

.grad-sticky__copy span {
  margin-top: 3px;
  color: rgba(255,255,255,.5);
  font-size: 11px;
}


/* MOBILE */

@media (max-width: 900px) {

  .grad-container {
    width: min(calc(100% - 36px), var(--container));
  }

  .grad-hero__shade {
    background:
      linear-gradient(
        0deg,
        rgba(5,6,8,.97) 0%,
        rgba(5,6,8,.67) 52%,
        rgba(5,6,8,.22) 100%
      );
  }

  .grad-hero__inner {
    padding-top: 28px;
    padding-bottom: 100px;
  }

  .grad-logo {
    width: 145px;
  }

  .grad-hero__content {
    width: 100%;
    margin-top: auto;
    margin-bottom: 24px;
    padding-top: 170px;
  }

  .grad-hero__title {
    font-size: clamp(49px, 15vw, 74px);
    line-height: .84;
  }

  .grad-hero__title-accent {
    margin-top: 13px;
    font-size: .44em;
  }

  .grad-hero__classes {
    margin-top: 25px;
    font-size: 21px;
  }

  .grad-hero__lead {
    font-size: 17px;
  }

  .grad-hero__facts {
    margin: 23px 0 26px;
  }

  .grad-hero__cta {
    width: 100%;
  }

  .grad-scroll {
    display: none;
  }


  .grad-space,
  .grad-menu,
  .grad-program,
  .grad-price {
    min-height: auto;
    padding-top: 82px;
    padding-bottom: 92px;
  }

  .grad-section-heading h2 {
    font-size: clamp(43px, 12vw, 64px);
  }

  .grad-features {
    grid-template-columns: 1fr 1fr;
    margin-top: 48px;
  }

  .grad-feature,
  .grad-feature:first-child {
    min-height: 230px;
    padding: 24px 18px 25px;
    border-bottom: 1px solid var(--line);
  }

  .grad-feature:nth-child(even) {
    border-right: 0;
  }

  .grad-feature strong {
    margin-bottom: 32px;
    font-size: 37px;
  }

  .grad-feature h3 {
    font-size: 19px;
  }


  .grad-menu__grid {
    grid-template-columns: 1fr;
    margin-top: 45px;
  }

  .grad-menu-card,
  .grad-menu-card:first-child {
    padding: 30px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(110,66,51,.22);
  }

  .grad-menu-card:last-child {
    border-bottom: 0;
  }

  .grad-menu-card__number {
    margin-bottom: 18px;
  }

  .grad-menu-card h3 {
    margin-bottom: 20px;
  }


  .grad-program__layout {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .grad-timeline {
    margin-top: 44px;
  }

  .grad-time {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  .grad-time time {
    font-size: 18px;
  }

  .grad-program__extras {
    padding: 34px 25px;
  }


  .grad-price__cards {
    grid-template-columns: 1fr;
    margin-top: 44px;
  }

  .grad-price-card + .grad-price-card {
    border-left: 0;
    border-top: 1px solid rgba(216,181,108,.3);
  }

  .grad-price-card strong {
    font-size: 66px;
  }


  .grad-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .grad-modal__dialog {
    width: 100%;
    max-height: calc(100svh - 24px);
    padding: 34px 20px 24px;
  }

  .grad-modal h2 {
    font-size: 38px;
  }


  .grad-sticky {
    left: 12px;
    right: 12px;
    bottom:
      calc(10px + env(safe-area-inset-bottom));
    width: auto;
    transform: translateY(0);
    padding: 8px;
    border-radius: 18px;
    opacity: 1;
    pointer-events: auto;
  }

  .grad-sticky__copy {
    display: none;
  }

  .grad-sticky .grad-button {
    width: 100%;
    min-height: 52px;
  }

  body {
    padding-bottom:
      calc(76px + env(safe-area-inset-bottom));
  }

}


@media (max-width: 520px) {

  .grad-container {
    width: calc(100% - 30px);
  }

  .grad-features {
    grid-template-columns: 1fr;
  }

  .grad-feature,
  .grad-feature:first-child {
    min-height: auto;
    padding: 24px 0;
    border-right: 0;
  }

  .grad-feature strong {
    margin-bottom: 18px;
  }

}


/* =========================================================
   GRADUATION — refinement 01
   ========================================================= */

.grad-price__includes {
  width: min(900px, 100%);
  margin: -5px auto 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.grad-price__includes span {
  padding: 9px 14px;
  border: 1px solid rgba(216,181,108,.24);
  border-radius: 999px;
  color: rgba(255,250,241,.68);
  background: rgba(255,255,255,.025);
  font-size: 13px;
}


/*
 * Desktop CTA:
 * компактная плавающая кнопка,
 * чтобы не перекрывать содержимое.
 */
@media (min-width: 901px) {

  .grad-sticky {
    left: auto;
    right: 28px;
    bottom: 28px;

    width: auto;
    min-width: 0;

    padding: 7px;

    transform:
      translateY(140%);

    border-radius: 999px;
  }

  .grad-sticky.is-visible {
    transform: translateY(0);
  }

  .grad-sticky__copy {
    display: none;
  }

  .grad-sticky .grad-button {
    min-height: 52px;
    padding-left: 28px;
    padding-right: 28px;
  }

}


@media (max-width: 900px) {

  .grad-price__includes {
    margin-top: 0;
    margin-bottom: 28px;
    gap: 7px;
  }

  .grad-price__includes span {
    font-size: 11px;
    padding: 8px 11px;
  }

}


/* =========================================================
   HERO — composition refinement
   desktop + mobile
   ========================================================= */


/* Убираем подсказку "Листайте" полностью */
.grad-scroll {
  display: none !important;
}


/* ---------------------------------------------------------
   DESKTOP
   Поднимаем основной информационный блок
   --------------------------------------------------------- */

@media (min-width: 901px) {

  .grad-hero__content {
    margin-top: 72px;
    margin-bottom: 0;
    padding-top: 0;
  }

}


/* ---------------------------------------------------------
   MOBILE
   Текст начинается сверху.
   Логотип переносим вниз слева.
   Обычную hero-кнопку убираем.
   Sticky оставляем единственной постоянной CTA.
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .grad-hero {
    min-height: 100svh;
  }

  .grad-hero__inner {
    position: relative;
    min-height: 100svh;

    padding-top: 22px;
    padding-bottom:
      calc(170px + env(safe-area-inset-bottom));

    justify-content: flex-start;
  }


  /* Логотип больше не занимает верх страницы */
  .grad-logo {
    position: absolute;

    left: 0;
    bottom:
      calc(88px + env(safe-area-inset-bottom));

    width: 132px;
    height: auto;

    z-index: 3;
  }


  /* Контент сразу наверху */
  .grad-hero__content {
    width: 100%;

    margin: 0;
    padding: 0;

    max-width: none;
  }


  .grad-hero__content .grad-kicker {
    margin-top: 0;
    margin-bottom: 16px;
  }


  .grad-hero__title {
    margin-top: 0;

    font-size:
      clamp(48px, 14.5vw, 70px);

    line-height: .82;
  }


  .grad-hero__title-accent {
    margin-top: 12px;
  }


  .grad-hero__classes {
    margin-top: 22px;
  }


  .grad-hero__lead {
    margin-top: 14px;
  }


  .grad-hero__facts {
    margin-top: 22px;
    margin-bottom: 0;

    gap: 7px;
  }


  .grad-hero__facts span {
    padding: 8px 11px;
    font-size: 11px;
  }


  /* На мобильном обычной кнопки в hero больше нет */
  .grad-hero__cta {
    display: none !important;
  }


  /*
   * Оставляем только чистую золотую sticky CTA.
   * Без большого чёрного контейнера вокруг неё.
   */
  .grad-sticky {
    display: block;

    left: 14px;
    right: 14px;

    bottom:
      calc(10px + env(safe-area-inset-bottom));

    width: auto;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 999px;

    background: transparent;
    box-shadow: none;
    backdrop-filter: none;

    transform: none;

    opacity: 1;
    pointer-events: auto;

    overflow: visible;
  }


  .grad-sticky__copy {
    display: none;
  }


  .grad-sticky .grad-button {
    display: block;

    width: 100%;
    min-width: 0;
    min-height: 56px;

    margin: 0;
    padding: 0 24px;

    border-radius: 999px;
  }

}


/* =========================================================
   HERO — desktop vertical fit
   ========================================================= */

@media (min-width: 901px) {

  .grad-hero__content {
    margin-top: -20px;
    margin-bottom: 0;
  }

}


/* =========================================================
   HERO — mobile refinement 02
   ========================================================= */

@media (max-width: 900px) {

  /*
   * Небольшой воздух сверху
   */
  .grad-hero__content {
    padding-top: 18px;
  }


  /*
   * Усиливаем затемнение слева сверху,
   * чтобы белый заголовок не терялся
   * на светлых деталях изображения.
   */
  .grad-hero__shade {
    background:
      radial-gradient(
        ellipse at 0% 0%,
        rgba(3, 4, 6, .92) 0%,
        rgba(3, 4, 6, .72) 30%,
        rgba(3, 4, 6, .28) 56%,
        transparent 76%
      ),
      linear-gradient(
        0deg,
        rgba(5, 6, 8, .92) 0%,
        rgba(5, 6, 8, .50) 37%,
        rgba(5, 6, 8, .12) 72%,
        rgba(5, 6, 8, .10) 100%
      );
  }


  /*
   * Жёстко центрируем sticky CTA
   * относительно экрана.
   */
  .grad-sticky {
    left: 50%;
    right: auto;

    width: calc(100% - 28px);
    max-width: none;

    transform: translateX(-50%) !important;

    bottom:
      calc(10px + env(safe-area-inset-bottom));
  }


  .grad-sticky.is-visible {
    transform: translateX(-50%) !important;
  }


  .grad-sticky .grad-button {
    width: 100%;
    margin: 0;
  }

}


/* =========================================================
   SPACE SECTION — layout rebuild
   ========================================================= */

.grad-space {
  min-height: auto;
  padding: 110px 0 120px;
  background: #090c10;
}

.grad-space__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: 0;
}

.grad-space__panel {
  position: relative;
  display: flex;
  align-items: stretch;
  background:
    linear-gradient(
      90deg,
      #20070d 0%,
      #0b0d11 68%,
      rgba(11, 13, 17, 0.82) 86%,
      rgba(11, 13, 17, 0) 100%
    );
}

.grad-space__panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: -120px;
  width: 180px;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      rgba(11, 13, 17, 0.95) 0%,
      rgba(11, 13, 17, 0.55) 58%,
      rgba(11, 13, 17, 0) 100%
    );
  pointer-events: none;
  z-index: 2;
}

.grad-space__panel-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 590px;
  padding: 68px 42px 68px 0;
}

.grad-space__lead {
  margin: 24px 0 0;
  max-width: 520px;
  color: rgba(255, 250, 241, 0.72);
  font-size: 18px;
  line-height: 1.6;
}

.grad-space-points {
  margin-top: 42px;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(216,181,108,.20);
  border-bottom: 1px solid rgba(216,181,108,.20);
}

.grad-space-point {
  padding: 22px 0 20px;
  border-top: 1px solid rgba(216,181,108,.12);
}

.grad-space-point:first-child {
  border-top: 0;
}

.grad-space-point strong {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-light);
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.05;
}

.grad-space-point p {
  margin: 0;
  color: rgba(255,255,255,.62);
  line-height: 1.55;
}

.grad-space__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 640px;
  overflow: hidden;
}

.grad-space__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .grad-space {
    padding: 82px 0 92px;
  }

  .grad-space__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .grad-space__panel {
    background: none;
  }

  .grad-space__panel::after {
    display: none;
  }

  .grad-space__panel-inner {
    max-width: none;
    padding: 0;
  }

  .grad-space__lead {
    margin-top: 18px;
    font-size: 16px;
  }

  .grad-space-points {
    margin-top: 32px;
  }

  .grad-space-point {
    padding: 18px 0 17px;
  }

  .grad-space-point strong {
    font-size: 23px;
  }

  .grad-space__visual {
    min-height: auto;
    aspect-ratio: 1 / 1;
  }

}


/* =========================================================
   SPACE — refinement 02
   ========================================================= */

@media (min-width: 901px) {

  /*
   * Убираем пустой промежуток между hero и вторым экраном.
   */
  .grad-space {
    min-height: 100svh;
    padding: 0;

    display: flex;
    align-items: center;

    background:
      radial-gradient(
        circle at 12% 50%,
        rgba(82, 8, 24, .30),
        transparent 34%
      ),
      #080b0f;
  }


  /*
   * Компактная композиция:
   * текст + отдельный квадрат фотографии.
   */
  .grad-space__layout {
    width: min(calc(100% - 80px), 1380px);

    grid-template-columns:
      minmax(0, 1fr)
      570px;

    align-items: center;
  }


  .grad-space__panel {
    min-height: 690px;

    display: flex;
    align-items: center;

    background:
      linear-gradient(
        90deg,
        rgba(50, 5, 15, .66) 0%,
        rgba(14, 12, 16, .96) 42%,
        rgba(8, 11, 15, .94) 76%,
        rgba(8, 11, 15, 0) 100%
      );

    z-index: 2;
  }


  /*
   * Настоящий мягкий перетекающий переход
   * поверх левого края фотографии.
   */
  .grad-space__panel::after {
    display: block;

    right: -125px;
    width: 170px;

    background:
      linear-gradient(
        90deg,
        rgba(8,11,15,.98) 0%,
        rgba(8,11,15,.82) 28%,
        rgba(8,11,15,.44) 62%,
        rgba(8,11,15,0) 100%
      );
  }


  .grad-space__panel-inner {
    max-width: 650px;
    padding: 52px 64px 52px 0;
  }


  /*
   * Немного компактнее заголовок,
   * чтобы весь экран помещался в viewport.
   */
  .grad-space .grad-section-heading h2 {
    font-size: clamp(48px, 4.2vw, 68px);
    line-height: .94;
  }


  .grad-space__lead {
    margin-top: 17px;

    max-width: 560px;

    font-size: 16px;
    line-height: 1.5;
  }


  /*
   * Преимущества теперь выглядят как
   * самостоятельные строки с пиктограммами.
   */
  .grad-space-points {
    margin-top: 26px;

    border-top:
      1px solid rgba(216,181,108,.22);
  }


  .grad-space-point {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 15px;

    align-items: center;

    padding: 13px 0;

    border-top: 0;
    border-bottom:
      1px solid rgba(216,181,108,.12);
  }


  .grad-space-point__icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border:
      1px solid rgba(216,181,108,.42);

    border-radius: 50%;

    color: var(--gold-light);

    font-family: Georgia, serif;
    font-size: 19px;

    background:
      rgba(216,181,108,.035);
  }


  .grad-space-point strong {
    margin-bottom: 3px;

    font-size: 21px;
  }


  .grad-space-point p {
    font-size: 13px;
    line-height: 1.4;
  }


  /*
   * Фотография снова действительно квадратная
   * и существенно меньше прежней.
   */
  .grad-space__visual {
    position: relative;

    width: 570px;
    height: 570px;
    min-height: 0;

    aspect-ratio: 1 / 1;

    overflow: hidden;
  }


  .grad-space__visual::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    box-shadow:
      inset 35px 0 60px rgba(5,8,11,.18);
  }


  .grad-space__visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
  }

}


/* =========================================================
   SPACE — mobile refinement
   ========================================================= */

@media (max-width: 900px) {

  .grad-space {
    padding:
      68px 0
      calc(88px + env(safe-area-inset-bottom));

    background:
      radial-gradient(
        circle at 0 0,
        rgba(87, 8, 25, .28),
        transparent 35%
      ),
      #080b0f;
  }


  .grad-space__layout {
    gap: 32px;
  }


  .grad-space .grad-section-heading h2 {
    font-size:
      clamp(42px, 12vw, 60px);
  }


  .grad-space-points {
    margin-top: 28px;
  }


  .grad-space-point {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 13px;

    align-items: center;

    padding: 16px 0;

    border-bottom:
      1px solid rgba(216,181,108,.13);
  }


  .grad-space-point__icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border:
      1px solid rgba(216,181,108,.38);

    border-radius: 50%;

    color: var(--gold-light);

    font-family: Georgia, serif;
    font-size: 17px;
  }


  .grad-space-point strong {
    margin-bottom: 4px;
    font-size: 21px;
  }


  .grad-space-point p {
    font-size: 13px;
  }


  /*
   * На мобильном — квадрат после текста,
   * без бокового градиента.
   */
  .grad-space__visual {
    width: 100%;
    height: auto;
    min-height: 0;

    aspect-ratio: 1 / 1;
  }


  .grad-space__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

}


/* =========================================================
   SPACE — full bleed composition
   ========================================================= */

@media (min-width: 901px) {

  /*
   * Второй экран больше не сидит
   * внутри общего ограниченного контейнера.
   */
  .grad-space {
    width: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;

    display: block;

    background: #080b0f;
  }


  .grad-space__layout {
    width: 100%;
    max-width: none;
    margin: 0;

    display: grid;

    /*
     * Две полноценные половины экрана.
     * Правая часть одновременно задаёт
     * высоту секции примерно квадратом.
     */
    grid-template-columns:
      minmax(0, 1fr)
      min(50vw, 820px);

    align-items: stretch;
  }


  /*
   * Левая подложка начинается
   * прямо от края viewport.
   */
  .grad-space__panel {
    min-height: min(50vw, 820px);

    display: flex;
    align-items: center;

    background:
      radial-gradient(
        circle at 0% 45%,
        rgba(92, 7, 25, .48) 0%,
        rgba(54, 5, 17, .30) 28%,
        rgba(12, 11, 15, .08) 58%,
        transparent 76%
      ),
      linear-gradient(
        90deg,
        #26060f 0%,
        #16070d 20%,
        #0a0c10 68%,
        #080b0f 100%
      );
  }


  /*
   * Сохраняем внутреннее выравнивание
   * текста относительно остальных экранов,
   * но без внешней рамки секции.
   */
  .grad-space__panel-inner {
    width: 100%;
    max-width: 720px;

    padding-top: 44px;
    padding-bottom: 44px;

    padding-left:
      max(
        46px,
        calc((100vw - 1380px) / 2)
      );

    padding-right: 64px;
  }


  /*
   * Градиент не отдельной полосой между
   * блоками, а поверх самой фотографии.
   */
  .grad-space__panel::after {
    display: none;
  }


  .grad-space__visual {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: min(50vw, 820px);

    aspect-ratio: auto;

    margin: 0;
    overflow: hidden;
  }


  .grad-space__visual img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    margin: 0;
  }


  /*
   * Мягко растворяем левый край фото
   * в тёмной подложке.
   */
  .grad-space__visual::before {
    content: "";

    position: absolute;
    z-index: 2;

    left: 0;
    top: 0;
    bottom: 0;

    width: 135px;

    background:
      linear-gradient(
        90deg,
        #080b0f 0%,
        rgba(8,11,15,.82) 24%,
        rgba(8,11,15,.42) 58%,
        rgba(8,11,15,0) 100%
      );

    pointer-events: none;
  }


  .grad-space__visual::after {
    display: none;
  }


  .grad-space .grad-section-heading h2 {
    margin-top: 0;
    font-size: clamp(58px, 4.6vw, 78px);
  }

}


/* =========================================================
   SPACE — mobile remains stacked
   ========================================================= */

@media (max-width: 900px) {

  .grad-space__layout {
    width: 100%;
  }

  .grad-space__panel-inner {
    padding-left: 15px;
    padding-right: 15px;
  }

  .grad-space__visual {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
  }

  .grad-space__visual::before,
  .grad-space__visual::after {
    display: none;
  }

}


/* =========================================================
   MENU — reference-inspired redesign
   ========================================================= */

.grad-menu {
  position: relative;

  min-height: 100svh;

  padding: 86px 0 72px;

  color: #3c151d;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,.92),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #f8f1e5 0%,
      #f2e7d5 100%
    );
}


/* subtle decorative glow */

.grad-menu::before,
.grad-menu::after {
  content: "";

  position: absolute;

  width: 330px;
  height: 330px;

  border-radius: 50%;

  filter: blur(80px);

  pointer-events: none;

  opacity: .14;
}

.grad-menu::before {
  left: -170px;
  top: 100px;

  background: #b7934f;
}

.grad-menu::after {
  right: -170px;
  bottom: 70px;

  background: #7d152a;
}


.grad-menu__inner {
  position: relative;
  z-index: 2;
}


/* HEADER */

.grad-menu__header {
  text-align: center;
}


.grad-menu__kicker {
  margin: 0 0 18px;

  color: #7d2431;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: .28em;
  text-transform: uppercase;
}


.grad-menu__title {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(55px, 5.8vw, 88px);
  font-weight: 400;

  line-height: .88;
  letter-spacing: -.035em;
}


.grad-menu__title span {
  display: block;

  color: #caa253;
}


.grad-menu__subtitle {
  margin: 25px auto 0;

  max-width: 620px;

  color: #6d6259;

  font-size: 17px;
  line-height: 1.5;
}


.grad-menu__header-ornament {
  margin: 28px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: min(340px, 70%);
}


.grad-menu__header-ornament i {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(174,132,61,.58)
    );
}


.grad-menu__header-ornament i:last-child {
  transform: scaleX(-1);
}


.grad-menu__header-ornament span {
  color: #a97f3f;

  font-size: 11px;
}


/* GRID */

.grad-menu__grid {
  margin-top: 50px;

  display: grid;

  grid-template-columns:
    1.35fr 1fr 1fr 1fr;

  border-top:
    1px solid rgba(112,72,52,.22);

  border-bottom:
    1px solid rgba(112,72,52,.22);
}


.grad-menu-card {
  position: relative;

  padding:
    28px 30px
    36px;

  border-right:
    1px solid rgba(112,72,52,.20);

  text-align: left;
}


.grad-menu-card:first-child {
  padding-left: 0;
}


.grad-menu-card:last-child {
  border-right: 0;
}


/* ICON */

.grad-menu-card__icon {
  width: 54px;
  height: 54px;

  margin: 0 auto 18px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(126,32,46,.55);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #7b1d2b,
      #481018
    );

  box-shadow:
    0 10px 24px rgba(87,23,32,.12);
}


.grad-menu-card__icon svg {
  width: 29px;
  height: 29px;

  fill: none;

  stroke: #e5c581;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* CATEGORY LABEL */

.grad-menu-card__head {
  position: relative;

  min-height: 88px;

  margin-bottom: 26px;
  padding: 15px 12px;

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

  border:
    1px solid rgba(128,61,53,.30);

  text-align: center;
}


.grad-menu-card__head span {
  margin-bottom: 6px;

  color: #987139;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .16em;
  text-transform: uppercase;
}


.grad-menu-card__head h3 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  color: #521725;

  font-size: 25px;
  font-weight: 400;

  line-height: 1.05;
}


/* LIST */

.grad-menu-card ul {
  list-style: none;

  padding: 0;
  margin: 0;
}


.grad-menu-card li {
  position: relative;

  padding:
    0 0
    13px 18px;

  color: #4e403c;

  font-size: 15px;
  line-height: 1.42;
}


.grad-menu-card li::before {
  content: "◆";

  position: absolute;

  left: 0;
  top: 5px;

  color: #ba914b;

  font-size: 6px;
}


/* FOOTER */

.grad-menu__footer {
  margin-top: 45px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;

  align-items: center;
  gap: 30px;
}


.grad-menu__footer-line {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(170,128,61,.42)
    );
}


.grad-menu__footer-line:last-child {
  transform: scaleX(-1);
}


.grad-menu__memory {
  margin: 0;

  color: #651c29;

  font-family:
    "Segoe Script",
    "Snell Roundhand",
    "Brush Script MT",
    cursive;

  font-size: clamp(22px, 2.3vw, 34px);

  font-style: italic;
  line-height: 1.15;

  text-align: center;
}


.grad-menu__memory span {
  display: block;
}


/* MOBILE */

@media (max-width: 900px) {

  .grad-menu {
    padding:
      72px 0
      calc(95px + env(safe-area-inset-bottom));
  }


  .grad-menu__title {
    font-size:
      clamp(50px, 14vw, 68px);
  }


  .grad-menu__subtitle {
    margin-top: 20px;

    font-size: 15px;
  }


  .grad-menu__grid {
    margin-top: 40px;

    grid-template-columns: 1fr;

    border-bottom: 0;
  }


  .grad-menu-card,
  .grad-menu-card:first-child {
    padding:
      30px 0
      34px;

    border-right: 0;

    border-bottom:
      1px solid rgba(112,72,52,.22);
  }


  .grad-menu-card__icon {
    margin-bottom: 16px;
  }


  .grad-menu-card__head {
    width: min(330px, 100%);

    margin:
      0 auto
      25px;
  }


  .grad-menu-card li {
    font-size: 15px;
  }


  .grad-menu__footer {
    margin-top: 36px;

    grid-template-columns:
      35px 1fr 35px;

    gap: 12px;
  }


  .grad-menu__memory {
    font-size: 24px;
  }

}


/* =========================================================
   MENU — decorative card layout refinement
   ========================================================= */

.grad-menu {
  overflow: hidden;
}


/*
 * Лёгкая декоративность по краям экрана,
 * чтобы секция не ощущалась сухой таблицей.
 */
.grad-menu__inner::before,
.grad-menu__inner::after {
  content: "❦";

  position: absolute;
  z-index: 1;

  color: rgba(177, 136, 61, .28);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 76px;
  line-height: 1;

  pointer-events: none;
}

.grad-menu__inner::before {
  top: 8px;
  left: -8px;

  transform: rotate(-16deg);
}

.grad-menu__inner::after {
  right: -2px;
  bottom: 18px;

  transform: rotate(18deg);
}


.grad-menu__header,
.grad-menu__grid,
.grad-menu__footer {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------
   Вместо общей таблицы — отдельные карточки
   --------------------------------------------------------- */

.grad-menu__grid {
  margin-top: 54px;

  display: grid;
  grid-template-columns:
    1.22fr 1fr 1fr 1fr;

  gap: 22px;

  border: 0;
}


.grad-menu-card {
  position: relative;

  padding:
    26px 24px
    30px;

  border: 1px solid rgba(127, 73, 59, .26);
  border-radius: 22px 22px 14px 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.18) 100%
    );

  box-shadow:
    0 16px 40px rgba(87, 34, 38, .08);

  text-align: left;
  overflow: hidden;
}


.grad-menu-card::before {
  content: "";

  position: absolute;
  inset: 10px;

  border: 1px solid rgba(181, 144, 77, .34);
  border-radius: 16px 16px 10px 10px;

  pointer-events: none;
}


.grad-menu-card::after {
  content: "◆";

  position: absolute;
  top: 21px;
  right: 20px;

  color: rgba(181, 144, 77, .56);

  font-size: 10px;
  line-height: 1;

  pointer-events: none;
}


.grad-menu-card:first-child,
.grad-menu-card:last-child {
  border-right: 1px solid rgba(127, 73, 59, .26);
}

.grad-menu-card:first-child {
  padding-left: 24px;
}


/* ---------------------------------------------------------
   Медальоны вместо «цифровых» иконок
   --------------------------------------------------------- */

.grad-menu-card__icon {
  position: relative;

  width: 78px;
  height: 78px;

  margin: 0 auto 18px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid rgba(130, 35, 49, .55);

  background:
    radial-gradient(
      circle at 30% 28%,
      rgba(255,255,255,.18),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #8a1830 0%,
      #651221 100%
    );

  box-shadow:
    0 10px 24px rgba(90, 18, 29, .12);
}

.grad-menu-card__icon::before {
  content: "";

  position: absolute;
  inset: 7px;

  border: 1px solid rgba(229, 197, 129, .42);
  border-radius: 50%;
}

.grad-menu-card__icon svg {
  display: none;
}

.grad-menu-card__icon::after {
  color: #ecd09a;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 28px;
  line-height: 1;
}


/*
 * Более живые декоративные знаки,
 * не техничные и не «цифровые».
 */
.grad-menu-card:nth-child(1) .grad-menu-card__icon::after {
  content: "✦";
}

.grad-menu-card:nth-child(2) .grad-menu-card__icon::after {
  content: "❖";
}

.grad-menu-card:nth-child(3) .grad-menu-card__icon::after {
  content: "❦";
}

.grad-menu-card:nth-child(4) .grad-menu-card__icon::after {
  content: "✧";
}


/* ---------------------------------------------------------
   Красивее оформляем блок заголовка категории
   --------------------------------------------------------- */

.grad-menu-card__head {
  position: relative;

  min-height: 106px;

  margin-bottom: 24px;
  padding:
    18px 16px
    16px;

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

  border: 1px solid rgba(129, 64, 55, .28);
  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.28),
      rgba(255,255,255,.10)
    );

  text-align: center;
}


.grad-menu-card__head::before,
.grad-menu-card__head::after {
  content: "◆";

  position: absolute;
  top: 50%;

  color: rgba(181, 144, 77, .65);

  font-size: 9px;
  line-height: 1;

  transform: translateY(-50%);
}

.grad-menu-card__head::before {
  left: -5px;
}

.grad-menu-card__head::after {
  right: -5px;
}


.grad-menu-card__head span {
  margin-bottom: 7px;

  color: #9b7338;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .18em;
  text-transform: uppercase;
}


.grad-menu-card__head h3 {
  margin: 0;

  color: #561b29;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 23px;
  font-weight: 400;
  line-height: 1.04;
}


/* ---------------------------------------------------------
   Списки
   --------------------------------------------------------- */

.grad-menu-card ul {
  position: relative;
  z-index: 2;
}

.grad-menu-card li {
  padding:
    0 0
    12px 18px;

  color: #4d403b;

  font-size: 15px;
  line-height: 1.45;
}

.grad-menu-card li::before {
  content: "◆";

  left: 0;
  top: 6px;

  color: #c0974d;
  font-size: 6px;
}


/* ---------------------------------------------------------
   Низ секции — делаем декоративнее
   --------------------------------------------------------- */

.grad-menu__footer {
  margin-top: 40px;
  gap: 24px;
}

.grad-menu__footer-line {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(180, 137, 68, .52),
      transparent
    );
}


.grad-menu__memory {
  color: #7a2432;

  font-size: clamp(28px, 2.5vw, 38px);
  line-height: 1.05;
  letter-spacing: .01em;
}

.grad-menu__memory span {
  margin-top: 4px;
}


/* ---------------------------------------------------------
   Мобильная версия
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .grad-menu__inner::before,
  .grad-menu__inner::after {
    font-size: 52px;
    opacity: .55;
  }

  .grad-menu__inner::before {
    top: 22px;
    left: 4px;
  }

  .grad-menu__inner::after {
    right: 8px;
    bottom: 86px;
  }

  .grad-menu__grid {
    margin-top: 34px;

    grid-template-columns: 1fr;
    gap: 18px;
  }

  .grad-menu-card,
  .grad-menu-card:first-child,
  .grad-menu-card:last-child {
    padding:
      24px 18px
      26px;

    border-right: 1px solid rgba(127, 73, 59, .26);
    border-bottom: 1px solid rgba(127, 73, 59, .26);
  }

  .grad-menu-card__icon {
    width: 70px;
    height: 70px;

    margin-bottom: 16px;
  }

  .grad-menu-card__icon::after {
    font-size: 24px;
  }

  .grad-menu-card__head {
    width: 100%;
    min-height: 96px;

    margin: 0 0 22px;
  }

  .grad-menu-card__head h3 {
    font-size: 21px;
  }

  .grad-menu__footer {
    margin-top: 30px;

    grid-template-columns:
      24px 1fr 24px;

    gap: 10px;
  }

  .grad-menu__memory {
    font-size: 24px;
  }

}


/* =========================================================
   MENU — head order refinement
   ========================================================= */

.grad-menu-card__head {
  gap: 8px;
}

.grad-menu-card__head h3 {
  order: 1;
}

.grad-menu-card__head span {
  order: 2;

  margin-bottom: 0;
  margin-top: 2px;

  display: block;
}



/* =========================================================
   PROGRAM — atmospheric background
   ========================================================= */

.grad-program {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background: #07101a;
}


/*
 * Тёмная живая подложка:
 * берём фото зала, но сильно приглушаем,
 * чтобы текст читался.
 */
.grad-program::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5, 11, 18, .97) 0%,
      rgba(5, 11, 18, .95) 34%,
      rgba(5, 11, 18, .76) 58%,
      rgba(5, 11, 18, .88) 100%
    ),
    radial-gradient(
      circle at 84% 26%,
      rgba(131, 12, 40, .34) 0%,
      rgba(131, 12, 40, .14) 22%,
      transparent 42%
    ),
    url("/graduation/images/optimized/atmo.webp") center center / cover no-repeat;

  opacity: .48;
}


/*
 * Лёгкий верхний и нижний затемняющий слой,
 * чтобы всё собрать визуально.
 */
.grad-program::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      180deg,
      rgba(4, 9, 15, .10) 0%,
      rgba(4, 9, 15, 0) 18%,
      rgba(4, 9, 15, .08) 78%,
      rgba(4, 9, 15, .16) 100%
    );

  pointer-events: none;
}


/* Весь реальный контент поверх фона */
.grad-program > * {
  position: relative;
  z-index: 1;
}


@media (max-width: 900px) {

  .grad-program::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 11, 18, .94) 0%,
        rgba(5, 11, 18, .88) 34%,
        rgba(5, 11, 18, .80) 100%
      ),
      radial-gradient(
        circle at 80% 18%,
        rgba(131, 12, 40, .26) 0%,
        transparent 34%
      ),
      url("/graduation/images/optimized/atmo.webp") 68% center / cover no-repeat;

    opacity: .34;
  }

}


/* =========================================================
   PROGRAM — more life, markers and richer aside card
   ========================================================= */

/* ----------------------------------------
   Общая компоновка экрана программы
   ---------------------------------------- */

.grad-program {
  overflow: hidden;
}

.grad-program .grad-section-heading,
.grad-program__grid,
.grad-program__main,
.grad-program__aside,
.grad-program-aside {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------
   Строки таймлайна — оживляем
   ---------------------------------------- */

.grad-program__item,
.grad-program-item,
.grad-program__row,
.grad-program-row {
  position: relative;

  border-radius: 18px;

  transition:
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;

  overflow: hidden;
}

.grad-program__item::before,
.grad-program-item::before,
.grad-program__row::before,
.grad-program-row::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(177, 136, 61, .08) 0%,
      rgba(177, 136, 61, .03) 26%,
      rgba(255,255,255,0) 58%
    );

  opacity: .9;
  pointer-events: none;
}

.grad-program__item:hover,
.grad-program-item:hover,
.grad-program__row:hover,
.grad-program-row:hover {
  transform: translateX(4px);

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.05) 0%,
      rgba(255,255,255,.02) 42%,
      rgba(255,255,255,0) 100%
    );

  box-shadow:
    inset 0 0 0 1px rgba(177, 136, 61, .12);
}


/* ----------------------------------------
   Время — декоративные маркеры
   ---------------------------------------- */

.grad-program__time,
.grad-program-time {
  position: relative;
  padding-left: 28px;
}

.grad-program__time::before,
.grad-program-time::before {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;

  width: 12px;
  height: 12px;

  border: 1px solid rgba(214, 180, 112, .88);
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(233, 204, 148, .95) 0%,
      rgba(233, 204, 148, .95) 28%,
      transparent 32%
    );

  box-shadow:
    0 0 0 4px rgba(177, 136, 61, .10);

  transform: translateY(-50%);
}

.grad-program__time::after,
.grad-program-time::after {
  content: "";

  position: absolute;
  left: 5px;
  top: calc(50% + 12px);

  width: 1px;
  height: 34px;

  background:
    linear-gradient(
      180deg,
      rgba(214, 180, 112, .42),
      rgba(214, 180, 112, 0)
    );
}

.grad-program__item:last-child .grad-program__time::after,
.grad-program-item:last-child .grad-program__time::after,
.grad-program__row:last-child .grad-program__time::after,
.grad-program-row:last-child .grad-program__time::after,
.grad-program__item:last-child .grad-program-time::after,
.grad-program-item:last-child .grad-program-time::after,
.grad-program__row:last-child .grad-program-time::after,
.grad-program-row:last-child .grad-program-time::after {
  display: none;
}


/* ----------------------------------------
   Заголовки и подписи событий
   ---------------------------------------- */

.grad-program__title,
.grad-program-title {
  text-shadow:
    0 1px 0 rgba(255,255,255,.02),
    0 0 18px rgba(177, 136, 61, .06);
}

.grad-program__desc,
.grad-program-desc {
  color: rgba(230, 231, 236, .70);
}


/* ----------------------------------------
   Правая карточка — делаем богаче
   ---------------------------------------- */

.grad-program__aside,
.grad-program-aside,
.grad-program__card,
.grad-program-card {
  position: relative;
  overflow: hidden;

  box-shadow:
    0 24px 60px rgba(16, 4, 10, .34);

  padding-bottom: 126px;
}

.grad-program__aside::before,
.grad-program-aside::before,
.grad-program__card::before,
.grad-program-card::before {
  content: "";

  position: absolute;
  inset: 14px;

  border: 1px solid rgba(231, 191, 121, .26);
  pointer-events: none;
}

.grad-program__aside::after,
.grad-program-aside::after,
.grad-program__card::after,
.grad-program-card::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(255,255,255,.06) 0%,
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.03) 0%,
      rgba(255,255,255,0) 24%
    );

  pointer-events: none;
}


/* ----------------------------------------
   Пункты в правой карточке
   ---------------------------------------- */

.grad-program__aside-item,
.grad-program-aside__item,
.grad-program-aside-item {
  position: relative;
  padding-left: 54px;
}

.grad-program__aside-item::before,
.grad-program-aside__item::before,
.grad-program-aside-item::before {
  content: "✦";

  position: absolute;
  left: 0;
  top: 4px;

  color: #e8c98f;
  font-size: 16px;
  line-height: 1;
}


/* Если номера есть отдельным блоком, делаем их мягче */
.grad-program__aside-index,
.grad-program-aside__index,
.grad-program-aside-item__index {
  color: rgba(232, 201, 143, .85);
  letter-spacing: .12em;
}


/* ----------------------------------------
   Рукописный акцент внизу справа
   ---------------------------------------- */

.grad-program__note,
.grad-program-note,
.grad-program__aside-note {
  color: #f1d99f;

  text-shadow:
    0 6px 18px rgba(45, 3, 15, .24);
}


/* ----------------------------------------
   Мобильная версия
   ---------------------------------------- */

@media (max-width: 900px) {

  .grad-program__item,
  .grad-program-item,
  .grad-program__row,
  .grad-program-row {
    border-radius: 14px;
  }

  .grad-program__item:hover,
  .grad-program-item:hover,
  .grad-program__row:hover,
  .grad-program-row:hover {
    transform: none;
  }

  .grad-program__time,
  .grad-program-time {
    padding-left: 22px;
  }

  .grad-program__time::before,
  .grad-program-time::before {
    width: 10px;
    height: 10px;
  }

  .grad-program__time::after,
  .grad-program-time::after {
    height: 24px;
  }

  .grad-program__aside,
  .grad-program-aside,
  .grad-program__card,
  .grad-program-card {
    padding-bottom: 92px;
  }

  .grad-program__aside-item,
  .grad-program-aside__item,
  .grad-program-aside-item {
    padding-left: 34px;
  }

}


/* =========================================================
   PROGRAM — actual classes / desktop one-screen layout
   ========================================================= */

@media (min-width: 901px) {

  .grad-program {
    min-height: 100svh;

    padding: 42px 0 34px;

    display: flex;
    align-items: center;
  }


  .grad-program > .grad-container {
    width: min(calc(100% - 80px), 1380px);
  }


  .grad-program__layout {
    grid-template-columns:
      minmax(0, 1.62fr)
      minmax(330px, .68fr);

    gap: 68px;
    align-items: center;
  }


  /* Заголовок компактнее */

  .grad-program .grad-section-heading h2 {
    max-width: 720px;

    font-size: clamp(52px, 4.6vw, 72px);
    line-height: .88;
  }

  .grad-program .grad-kicker {
    margin-bottom: 12px;
  }


  /* =========================================
     TIMELINE
     ========================================= */

  .grad-timeline {
    margin-top: 27px;

    border-top:
      1px solid rgba(216,181,108,.23);
  }


  .grad-time {
    position: relative;

    grid-template-columns:
      165px
      minmax(0, 1fr);

    gap: 34px;

    padding: 11px 12px 11px 0;

    border-top: 0;

    border-bottom:
      1px solid rgba(216,181,108,.17);

    transition:
      background .2s ease,
      transform .2s ease;
  }


  /*
   * Мягкая подсветка каждой строки.
   */
  .grad-time::after {
    content: "";

    position: absolute;
    inset: 3px 0;

    z-index: -1;

    border-radius: 10px;

    background:
      linear-gradient(
        90deg,
        rgba(216,181,108,.055),
        rgba(216,181,108,.018) 50%,
        transparent 80%
      );

    opacity: 0;

    transition: opacity .2s ease;
  }


  .grad-time:hover::after {
    opacity: 1;
  }


  /*
   * Золотой маркер между временем
   * и названием события.
   */
  .grad-time::before {
    content: "";

    position: absolute;

    left: 177px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d9b86f;

    box-shadow:
      0 0 0 4px rgba(216,181,108,.08),
      0 0 18px rgba(216,181,108,.18);

    transform: translateY(-50%);
  }


  .grad-time time {
    align-self: center;

    color: var(--gold-light);

    font-size: 18px;
    line-height: 1.15;
  }


  .grad-time h3 {
    margin: 0 0 2px;

    font-size: 20px;
    line-height: 1.15;
  }


  .grad-time p {
    font-size: 13px;
    line-height: 1.35;
  }


  /* =========================================
     RIGHT CARD
     ========================================= */

  .grad-program__extras {
    position: relative;

    align-self: center;

    padding:
      30px 28px
      34px;

    overflow: hidden;

    border:
      1px solid rgba(225,190,120,.58);

    background:
      radial-gradient(
        circle at 80% 12%,
        rgba(255,255,255,.07),
        transparent 25%
      ),
      linear-gradient(
        155deg,
        #740a25 0%,
        #4c0718 54%,
        #33050f 100%
      );

    box-shadow:
      0 28px 70px rgba(0,0,0,.30);
  }


  /*
   * Внутренняя золотая рамка.
   */
  .grad-program__extras::before {
    content: "";

    position: absolute;
    inset: 11px;

    border:
      1px solid rgba(231,201,139,.20);

    pointer-events: none;
  }


  /*
   * Небольшой декоративный блеск.
   */
  .grad-program__extras::after {
    content: "✦";

    position: absolute;

    top: 17px;
    right: 19px;

    color: rgba(239,211,154,.48);

    font-size: 13px;

    pointer-events: none;
  }


  .grad-program__extras-kicker {
    margin-bottom: 18px;
  }


  .grad-extra {
    position: relative;

    grid-template-columns:
      43px
      1fr;

    gap: 13px;

    padding: 18px 0;

    border-top:
      1px solid rgba(226,190,119,.19);
  }


  /*
   * Номер превращаем почти в медальон.
   */
  .grad-extra > span {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    align-self: start;

    border:
      1px solid rgba(234,202,139,.34);

    border-radius: 50%;

    color: #efd49d;

    font-family: Georgia, serif;
    font-size: 11px;

    background:
      rgba(255,255,255,.025);
  }


  .grad-extra h3 {
    margin-bottom: 4px;

    font-size: 19px;
    line-height: 1.12;
  }


  .grad-extra p {
    font-size: 13px;
    line-height: 1.4;
  }


  .grad-program__signature {
    position: relative;

    margin: 22px 0 0;
    padding-top: 16px;

    color: #efd399;

    font-size: 22px;
    line-height: 1.05;
  }


  .grad-program__signature::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 72px;
    height: 1px;

    background:
      linear-gradient(
        90deg,
        rgba(231,199,135,.65),
        transparent
      );
  }

}


/* =========================================================
   PROGRAM — mobile keeps comfortable spacing
   ========================================================= */

@media (max-width: 900px) {

  .grad-time {
    position: relative;

    padding-left: 21px;
  }


  .grad-time::before {
    content: "";

    position: absolute;

    left: 0;
    top: 27px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #d9b86f;

    box-shadow:
      0 0 0 4px rgba(216,181,108,.08);
  }


  .grad-program__extras {
    position: relative;
    overflow: hidden;
  }


  .grad-program__extras::before {
    content: "";

    position: absolute;
    inset: 10px;

    border:
      1px solid rgba(231,201,139,.18);

    pointer-events: none;
  }


  .grad-extra > span {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border:
      1px solid rgba(234,202,139,.32);

    border-radius: 50%;
  }

}


/* =========================================================
   MENU — desktop one-screen fit
   ========================================================= */

@media (min-width: 901px) {

  /*
   * Весь экран меню стараемся держать
   * в пределах одного viewport.
   */
  .grad-menu {
    min-height: 100svh;

    padding:
      34px 0
      26px;

    display: flex;
    align-items: center;
  }


  .grad-menu__inner {
    width: min(
      calc(100% - 80px),
      1380px
    );
  }


  /* -------------------------------
     HEADER
     ------------------------------- */

  .grad-menu__header {
    margin: 0;
  }


  /*
   * На десктопе заголовок в одну строку.
   */
  .grad-menu__title {
    font-size:
      clamp(52px, 4.5vw, 72px);

    line-height: .94;
  }


  .grad-menu__title span {
    display: inline;
    margin-left: .12em;
  }


  .grad-menu__subtitle {
    margin-top: 13px;

    font-size: 15px;
  }


  .grad-menu__header-ornament {
    margin-top: 15px;

    width: 280px;
  }


  /* -------------------------------
     FOUR EQUAL CARDS
     ------------------------------- */

  .grad-menu__grid {
    margin-top: 24px;

    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;
  }


  .grad-menu-card,
  .grad-menu-card:first-child,
  .grad-menu-card:last-child {
    width: auto;

    min-width: 0;

    padding:
      18px 18px
      20px;

    border-right:
      1px solid rgba(127, 73, 59, .26);
  }


  .grad-menu-card::before {
    inset: 8px;
  }


  /* -------------------------------
     MEDALLIONS
     ------------------------------- */

  .grad-menu-card__icon {
    width: 58px;
    height: 58px;

    margin:
      0 auto
      11px;
  }


  .grad-menu-card__icon::before {
    inset: 6px;
  }


  .grad-menu-card__icon::after {
    font-size: 21px;
  }


  /* -------------------------------
     CARD HEADERS
     ------------------------------- */

  .grad-menu-card__head {
    min-height: 76px;

    margin-bottom: 17px;

    padding:
      11px 10px
      10px;

    gap: 4px;
  }


  .grad-menu-card__head h3 {
    font-size: 20px;
    line-height: 1.05;
  }


  .grad-menu-card__head span {
    margin-top: 1px;

    font-size: 9px;
  }


  /* -------------------------------
     FOOD LIST
     ------------------------------- */

  .grad-menu-card li {
    padding:
      0 0
      8px 16px;

    font-size: 13px;
    line-height: 1.32;
  }


  .grad-menu-card li::before {
    top: 5px;
  }


  /* -------------------------------
     FOOTER
     ------------------------------- */

  .grad-menu__footer {
    margin-top: 18px;

    gap: 20px;
  }


  .grad-menu__memory {
    font-size:
      clamp(22px, 2vw, 30px);

    line-height: 1;
  }


  .grad-menu__memory span {
    display: inline;
    margin-left: .15em;
  }


  /*
   * На низких ноутбуках дополнительно
   * немного сжимаем экран.
   */
  @media (max-height: 820px) {

    .grad-menu {
      padding:
        24px 0
        20px;
    }

    .grad-menu__title {
      font-size:
        clamp(46px, 4vw, 62px);
    }

    .grad-menu__subtitle {
      margin-top: 9px;
    }

    .grad-menu__header-ornament {
      margin-top: 11px;
    }

    .grad-menu__grid {
      margin-top: 18px;
    }

    .grad-menu-card {
      padding:
        14px 16px
        15px;
    }

    .grad-menu-card__icon {
      width: 50px;
      height: 50px;

      margin-bottom: 8px;
    }

    .grad-menu-card__head {
      min-height: 67px;

      margin-bottom: 12px;

      padding: 8px;
    }

    .grad-menu-card__head h3 {
      font-size: 18px;
    }

    .grad-menu-card li {
      padding-bottom: 6px;

      font-size: 12px;
    }

    .grad-menu__footer {
      margin-top: 12px;
    }

    .grad-menu__memory {
      font-size: 21px;
    }

  }

}


/* =========================================================
   MENU — restore mobile title stacking
   ========================================================= */

@media (max-width: 900px) {

  .grad-menu__title span {
    display: block;
    margin-left: 0;
  }

  .grad-menu__memory span {
    display: block;
    margin-left: 0;
  }

}


/* =========================================================
   PRICE — compact final screen
   ========================================================= */

@media (min-width: 901px) {

  .grad-price {
    min-height: 100svh;

    padding:
      34px 0
      26px;

    display: flex;
    align-items: center;
  }


  .grad-price__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  .grad-price__logo {
    width: 132px;

    margin-bottom: 22px;
  }


  .grad-price h2 {
    font-size:
      clamp(52px, 5vw, 76px);

    line-height: .94;
  }


  .grad-price__cards {
    width: min(790px, 100%);

    margin:
      34px auto
      24px;
  }


  .grad-price-card {
    padding:
      28px 22px
      32px;
  }


  .grad-price-card p {
    margin-bottom: 8px;

    font-size: 19px;
  }


  .grad-price-card strong {
    font-size:
      clamp(58px, 5.3vw, 78px);
  }


  .grad-price__includes {
    width: min(920px, 100%);

    margin:
      0 auto
      0;

    gap: 7px;
  }


  .grad-price__includes span {
    padding: 7px 12px;

    font-size: 12px;
  }


  /*
   * Нижнюю техническую подпись тоже
   * делаем почти незаметной.
   */
  .grad-price__footer {
    margin-top: 25px;

    font-size: 9px;
  }


  /*
   * Для невысоких экранов ноутбуков.
   */
  @media (max-height: 820px) {

    .grad-price {
      padding:
        22px 0
        18px;
    }

    .grad-price__logo {
      width: 112px;

      margin-bottom: 15px;
    }

    .grad-price h2 {
      font-size:
        clamp(46px, 4.5vw, 66px);
    }

    .grad-price__cards {
      margin:
        24px auto
        18px;
    }

    .grad-price-card {
      padding:
        21px 18px
        24px;
    }

    .grad-price-card strong {
      font-size: 62px;
    }

    .grad-price__includes span {
      padding: 6px 10px;

      font-size: 11px;
    }

    .grad-price__footer {
      margin-top: 16px;
    }

  }

}


/* =========================================================
   PRICE — mobile
   ========================================================= */

@media (max-width: 900px) {

  .grad-price {
    padding:
      62px 0
      calc(96px + env(safe-area-inset-bottom));
  }


  .grad-price__logo {
    width: 125px;

    margin-bottom: 25px;
  }


  .grad-price__cards {
    margin:
      34px auto
      24px;
  }


  .grad-price__footer {
    margin-top: 30px;
  }

}


/* =========================================================
   PRICE — short closing section
   ========================================================= */

@media (min-width: 901px) {

  .grad-price {
    min-height: 55svh;

    padding:
      26px 0
      28px;

    display: flex;
    align-items: center;
  }


  .grad-price__logo {
    width: 105px;
    margin-bottom: 14px;
  }


  .grad-price h2 {
    font-size:
      clamp(44px, 4.2vw, 64px);
  }


  .grad-price__cards {
    width: min(760px, 100%);

    margin:
      22px auto
      16px;
  }


  .grad-price-card {
    padding:
      20px 18px
      22px;
  }


  .grad-price-card p {
    margin-bottom: 5px;
  }


  .grad-price-card strong {
    font-size:
      clamp(52px, 4.7vw, 70px);
  }


  .grad-price__includes {
    margin: 0 auto;
  }

}


/*
 * На мобильном высоту не фиксируем:
 * две ценовые карточки складываются вертикально.
 */
@media (max-width: 900px) {

  .grad-price {
    min-height: auto;
  }

}


/* =========================================================
   MOBILE — space/photo flush transition
   ========================================================= */

@media (max-width: 900px) {

  /*
   * Убираем чёрную полосу ПОСЛЕ фотографии.
   * Фото становится нижней границей второго экрана.
   */
  .grad-space {
    padding-bottom: 0 !important;
  }

  .grad-space__visual {
    margin-bottom: 0 !important;
  }

}


/* =========================================================
   MOBILE MENU — paper flip
   ========================================================= */

@media (max-width: 900px) {

  /*
   * На телефоне четыре карточки больше
   * не идут длинной колонкой.
   */
  .grad-menu__grid {
    position: relative;

    display: grid;
    grid-template-columns: 1fr;

    width: 100%;
    margin-top: 30px;

    perspective: 1300px;
    perspective-origin: 50% 45%;

    isolation: isolate;
  }


  /*
   * Все страницы лежат в одной ячейке.
   * Высота берётся по самой высокой странице,
   * поэтому при перелистывании интерфейс не прыгает.
   */
  .grad-menu-card,
  .grad-menu-card:first-child,
  .grad-menu-card:last-child {
    grid-area: 1 / 1;

    width: 100%;
    min-width: 0;

    margin: 0;

    transform-style: preserve-3d;
    backface-visibility: hidden;

    transform-origin: left center;

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

    box-shadow:
      0 22px 45px rgba(92, 48, 28, .10),
      0 4px 10px rgba(92, 48, 28, .06);

    transition:
      transform 1.32s cubic-bezier(.16,.72,.18,1),
      opacity 1.02s ease,
      filter 1.02s ease;
  }


  .grad-menu-card.is-active {
    z-index: 5;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
      translateX(0)
      rotateY(0deg);

    filter: none;
  }


  /*
   * Новая страница перед появлением.
   */
  .grad-menu-card.is-entering-next {
    z-index: 4;

    opacity: .28;
    visibility: visible;

    transform:
      translateX(13px)
      rotateY(14deg);

    transform-origin: right center;
  }

  .grad-menu-card.is-entering-prev {
    z-index: 4;

    opacity: .28;
    visibility: visible;

    transform:
      translateX(-13px)
      rotateY(-14deg);

    transform-origin: left center;
  }


  /*
   * Старая страница «переворачивается».
   */
  .grad-menu-card.is-leaving-next {
    z-index: 7;

    opacity: 0;
    visibility: visible;

    transform:
      translateX(-22px)
      rotateY(-68deg);

    transform-origin: left center;

    filter: brightness(.92);
  }

  .grad-menu-card.is-leaving-prev {
    z-index: 7;

    opacity: 0;
    visibility: visible;

    transform:
      translateX(22px)
      rotateY(68deg);

    transform-origin: right center;

    filter: brightness(.92);
  }


  /*
   * Несколько «листов» под текущей страницей.
   */
  .grad-menu__grid::before,
  .grad-menu__grid::after {
    content: "";

    position: absolute;

    left: 8px;
    right: 8px;
    top: 7px;
    bottom: -7px;

    z-index: -1;

    border:
      1px solid rgba(144, 92, 62, .17);

    border-radius:
      22px 22px
      14px 14px;

    background: #f5ebda;

    pointer-events: none;
  }


  .grad-menu__grid::before {
    transform:
      translate(5px, 5px)
      rotate(.35deg);

    opacity: .75;
  }


  .grad-menu__grid::after {
    transform:
      translate(9px, 9px)
      rotate(.65deg);

    opacity: .42;

    z-index: -2;
  }


  /* -----------------------------------------
     Навигация листалки
     ----------------------------------------- */

  .grad-menu-flipnav {
    position: relative;
    z-index: 4;

    margin: 24px auto 0;

    display: grid;
    grid-template-columns:
      48px 1fr 48px;

    align-items: center;
    gap: 12px;

    width: min(310px, 90%);
  }


  .grad-menu-flipnav__button {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
      1px solid rgba(119, 41, 50, .30);

    border-radius: 50%;

    background:
      rgba(255,255,255,.36);

    color: #6f1d2a;

    font-family:
      Georgia,
      "Times New Roman",
      serif;

    font-size: 25px;
    line-height: 1;

    -webkit-tap-highlight-color: transparent;
  }


  .grad-menu-flipnav__button:disabled {
    opacity: .30;
  }


  .grad-menu-flipnav__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }


  .grad-menu-flipnav__counter {
    color: #7b2632;

    font-family:
      Georgia,
      "Times New Roman",
      serif;

    font-size: 14px;

    letter-spacing: .08em;
  }


  .grad-menu-flipnav__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
  }


  .grad-menu-flipnav__dot {
    width: 6px;
    height: 6px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
      rgba(119, 41, 50, .22);

    transition:
      width .2s ease,
      background .2s ease;

    -webkit-tap-highlight-color: transparent;
  }


  .grad-menu-flipnav__dot.is-active {
    width: 20px;

    border-radius: 999px;

    background: #8a2334;
  }


  /*
   * Подсказываем жест только один раз визуально,
   * без отдельной большой надписи.
   */
  .grad-menu__grid.is-ready .grad-menu-card.is-active {
    touch-action: pan-y;
  }

}


/*
 * Пользователь отключил анимации в системе:
 * листалка остаётся рабочей без 3D-эффекта.
 */
@media (
  max-width: 900px
) and (
  prefers-reduced-motion: reduce
) {

  .grad-menu-card {
    transition: none !important;
  }

}


/* =========================================================
   MOBILE MENU — softer title, higher ornament, centered quote
   ========================================================= */
@media (max-width: 767px) {

  /* Секция меню чуть компактнее сверху */
  .grad-menu {
    padding-top: 44px;
  }

  /* Главный заголовок меню — немного меньше */
  .grad-menu .grad-section-heading h2,
  .grad-menu__title,
  .grad-menu-title {
    font-size: clamp(52px, 12vw, 72px);
    line-height: .92;
    letter-spacing: -.02em;
  }

  /* Подзаголовок под "Праздничный ужин" */
  .grad-menu .grad-section-heading p,
  .grad-menu__lead,
  .grad-menu-subtitle {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
    line-height: 1.35;
  }

  /* Декоративный листик / орнамент поднять выше */
  .grad-menu__decor,
  .grad-menu__leaf,
  .grad-menu-decor,
  .grad-menu-ornament,
  .grad-menu .grad-decor {
    top: 14px !important;
    left: 14px !important;
    transform: scale(.92) !important;
    opacity: .16;
  }

  /* Листалку поднять чуть выше, чтобы она была над подписью аккуратнее */
  .grad-menu-flip__controls,
  .grad-menu-book__controls,
  .grad-menu-mobile-controls,
  .grad-menu-slider__controls {
    position: relative;
    z-index: 4;
    margin-top: -20px;
    margin-bottom: 4px;
    transform: translateY(-12px);
  }

  .grad-menu-flip__dots,
  .grad-menu-flip__pager,
  .grad-menu-book__pager,
  .grad-menu-mobile-pager {
    margin-top: -4px;
    margin-bottom: 6px;
  }

  /* Красивый центральный текст под карточками */
  .grad-menu-quote,
  .grad-menu__quote,
  .grad-menu-signature,
  .grad-menu-note {
    position: relative;
    display: block;
    width: min(320px, calc(100% - 36px));
    margin: 0 auto;
    padding: 4px 24px 0;
    text-align: center;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(24px, 7.5vw, 34px);
    line-height: 1.08;
    letter-spacing: 0;
    color: #8b3247;
    text-wrap: balance;
    transform: none !important;
    rotate: 0deg !important;
  }

  .grad-menu-quote::before,
  .grad-menu__quote::before,
  .grad-menu-signature::before,
  .grad-menu-note::before,
  .grad-menu-quote::after,
  .grad-menu__quote::after,
  .grad-menu-signature::after,
  .grad-menu-note::after {
    content: "❦";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    color: rgba(139, 50, 71, .34);
  }

  .grad-menu-quote::before,
  .grad-menu__quote::before,
  .grad-menu-signature::before,
  .grad-menu-note::before {
    left: 0;
  }

  .grad-menu-quote::after,
  .grad-menu__quote::after,
  .grad-menu-signature::after,
  .grad-menu-note::after {
    right: 0;
    transform: translateY(-50%) scaleX(-1);
  }
}


/* =========================================================
   MOBILE MENU — exact current classes
   ========================================================= */

@media (max-width: 767px) {

  /* Заголовок чуть компактнее */
  .grad-menu__title {
    font-size: clamp(44px, 11.2vw, 58px) !important;
    line-height: .88 !important;
    letter-spacing: -.025em;
  }

  .grad-menu__title span {
    margin-top: 2px;
  }


  .grad-menu__subtitle {
    max-width: 330px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;

    font-size: 15px;
    line-height: 1.35;

    text-align: center;
  }


  /*
   * Листалку поднимаем ближе к карточке.
   */
  .grad-menu-flipnav {
    margin-top: 10px !important;
    transform: translateY(-8px);
  }


  /*
   * Правый золотой декоративный завиток
   * переносим выше — над подписью.
   */
  .grad-menu__inner::after {
    right: 18px !important;
    bottom: 145px !important;

    font-size: 46px !important;

    opacity: .26 !important;

    transform: rotate(12deg) !important;
  }


  /*
   * Нижняя фраза — строго по центру.
   */
  .grad-menu__footer {
    position: relative;

    margin-top: 2px !important;

    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
  }


  .grad-menu__memory {
    position: relative;

    width: 100%;
    max-width: 310px;

    margin: 0 auto !important;
    padding: 10px 22px;

    color: #872c3e;

    font-family:
      "Segoe Script",
      "Snell Roundhand",
      "Brush Script MT",
      cursive;

    font-size: 23px !important;
    font-style: italic;
    font-weight: 400;

    line-height: 1.22 !important;
    letter-spacing: 0;

    text-align: center !important;

    transform: none !important;
  }


  .grad-menu__memory span {
    display: block;
    margin: 2px 0 0 !important;
  }


  /*
   * Небольшие каллиграфические завитки
   * непосредственно около подписи.
   */
  .grad-menu__memory::before,
  .grad-menu__memory::after {
    position: absolute;

    top: 50%;

    color: rgba(135,44,62,.32);

    font-family: Georgia, serif;
    font-size: 21px;

    transform: translateY(-50%);

    pointer-events: none;
  }


  .grad-menu__memory::before {
    content: "❦";
    left: -5px;
  }


  .grad-menu__memory::after {
    content: "❦";
    right: -5px;

    transform:
      translateY(-50%)
      scaleX(-1);
  }


  .grad-menu__footer-line {
    opacity: .65;
  }

}


/* =========================================================
   MENU — exact mobile navigation + unified script
   ========================================================= */


/*
 * Одинаковая рукописная подпись
 * на desktop и mobile.
 */
.grad-menu__memory {
  font-family:
    "Marck Script",
    cursive !important;

  font-style: normal !important;
  font-weight: 400 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  /*
   * Убираем старый декоративный элемент,
   * который оказался рядом со стрелкой.
   */
  .grad-menu__inner::after {
    display: none !important;
  }


  /* -----------------------------------------
     Навигация — строго симметричная
     ----------------------------------------- */

  .grad-menu-flipnav {
    width: 270px !important;
    max-width: calc(100% - 48px);

    margin:
      12px auto
      0 !important;

    display: grid !important;

    grid-template-columns:
      48px
      minmax(0, 1fr)
      48px !important;

    align-items: center !important;
    justify-items: center;

    column-gap: 12px;

    transform: none !important;

    position: relative;
    left: auto !important;
    right: auto !important;
  }


  .grad-menu-flipnav__button {
    position: static !important;

    width: 48px;
    height: 48px;

    margin: 0 !important;

    transform: none !important;
  }


  .grad-menu-flipnav__center {
    width: 100%;

    display: flex;
    flex-direction: column;

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

    gap: 7px;

    margin: 0;
    transform: none !important;
  }


  .grad-menu-flipnav__counter {
    margin: 0;

    text-align: center;
  }


  .grad-menu-flipnav__dots {
    margin: 0;

    justify-content: center;
  }


  /* -----------------------------------------
     Подпись под меню
     ----------------------------------------- */

  .grad-menu__footer {
    position: relative;

    margin-top: 38px !important;

    display: grid;

    grid-template-columns:
      minmax(20px, 1fr)
      minmax(230px, 310px)
      minmax(20px, 1fr);

    align-items: center;

    gap: 10px;
  }


  /*
   * Один декоративный завиток
   * строго над текстом.
   */
  .grad-menu__footer::before {
    content: "❦";

    position: absolute;

    top: -29px;
    left: 50%;

    color: rgba(177, 136, 61, .45);

    font-family: Georgia, serif;
    font-size: 25px;
    line-height: 1;

    transform:
      translateX(-50%)
      rotate(-7deg);

    pointer-events: none;
  }


  .grad-menu__memory {
    width: 100%;
    max-width: 310px;

    margin: 0 auto !important;
    padding: 0 6px;

    color: #8b2c3e;

    font-family:
      "Marck Script",
      cursive !important;

    font-size: 29px !important;
    font-style: normal !important;
    font-weight: 400 !important;

    line-height: 1.05 !important;
    letter-spacing: 0;

    text-align: center !important;

    transform: none !important;
  }


  .grad-menu__memory span {
    display: block;

    margin:
      1px 0 0 !important;
  }


  /*
   * Старые боковые завитки самого текста
   * убираем — они и давали ощущение перекоса.
   */
  .grad-menu__memory::before,
  .grad-menu__memory::after {
    display: none !important;
  }


  .grad-menu__footer-line {
    width: 100%;
    opacity: .55;
  }

}


/* =========================================================
   MOBILE MODAL — virtual keyboard / visual viewport
   ========================================================= */

@media (max-width: 767px) {

  .grad-modal.is-open {
    top: var(--grad-vv-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100% !important;
    height: var(--grad-vv-height, 100dvh) !important;

    padding: 12px !important;

    overflow: hidden !important;
  }


  .grad-modal__dialog {
    width: 100% !important;

    max-height:
      calc(var(--grad-vv-height, 100dvh) - 24px)
      !important;

    overflow-y: auto !important;
    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

    scroll-padding-top: 20px;
    scroll-padding-bottom: 28px;
  }


  /*
   * Когда клавиатура открыта:
   * форму больше не держим у нижнего края,
   * а начинаем от верха видимой области.
   */
  .grad-modal.is-keyboard-open {
    align-items: flex-start !important;

    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }


  .grad-modal.is-keyboard-open .grad-modal__dialog {
    max-height:
      calc(var(--grad-vv-height, 100dvh) - 16px)
      !important;

    margin: 0 !important;
  }

}


/* =========================================================
   MOBILE MODAL — move close button below Tilda menu
   ========================================================= */

@media (max-width: 767px) {

  .grad-modal__close {
    top: 50px !important;
    right: 14px !important;
  }

}