@charset "UTF-8";

@layer base, theme;

@layer base {

  body {
    all: unset;
  }

  html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  @view-transition {
    navigation: auto;
  }

  /* Отключаем ВСЕ транзишны во время смены темы — иначе тормоза */
  html.theme-transitioning,
  html.theme-transitioning *,
  html.theme-transitioning *::before,
  html.theme-transitioning *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }

  @keyframes fade-out-scale {
    to {
      opacity: 0;
      transform: scale(0.98);
    }
  }

  @keyframes fade-in-scale {
    from {
      opacity: 0;
      transform: scale(1.02);
    }
  }

  /* уважение предпочитающим покой */
  @media (prefers-reduced-motion: reduce) {

    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation: none;
    }
  }

  :root {
    --font-thin: 100;

    --dark: #0d0f14;
    --dark: #1a1f2b;

    --green: #caff00;
    --green-bright: #10ff00;
    --green-dark: #15d715;
    --green-black: #028b02;

    --blue-ultra-light: #eaf2ff;
    --blue: #234BFF;
    --blue-bright: #0070ff;

    --orange: #ff5f00;
    --orange-bright: #ff4d00;

    --gray: #ececec;
    --gray-dark: #b5b5b5;
    --gray-black: #393939;

    --wheat: #f6f3ed;

    --wide: min(850px, 78%);
    --max-res: 1080px;
    --min-res: 340px;

    --nav-min-width: 360px;
    --nav-max-width: 800px;

    --gap: 35px;
    --gap-auto-v: max(calc(var(--gap) * 1.2), 10.5vh);
    --gap-main: var(--gap-auto-v) var(--gap);
    --gap-app: var(--gap-auto-v) 0;

    --padding: calc(var(--gap) / 1.5);

    --transitionRubber: cubic-bezier(0.41, 0.4, 0, 1.37);

    --gpu-preheat-blur-max: 90px;

    --chat-width: var(--wide);
    --chat-height: 900px;

    --chat-message-radius: 14px;
    --chat-message-padding: 9px;

    --chat-q-bg: #f1f1f1;
    --chat-a-bg: var(--dark);

    --chat-attach-gap: 5px;
    --chat-thumb: 150px;

    --chat-header-thumb: 90px;

    --chat-progress-size: 14px;
    --chat-progress-inset: calc(6px - var(--chat-progress-size));
    --chat-upload-progress: 0;
    --chat-progress-color: var(--blue);
    --chat-progress-bg: var(--gray);
  }

  ::selection {
    background: #000;
    color: #fff;
  }

  body ::-webkit-scrollbar-thumb:hover {
    background: var(--dark);
  }

  body ::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 40px;
    border: none;
  }

  body ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: #e2e2e2;
    border-radius: 40px;
  }

  [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }

  input[hidden] {
    display: none;
  }

  :is([contenteditable], textarea, input:not([type="checkbox"], [type="radio"])):focus {
    cursor: text !important;
  }

  @supports (-moz-appearance:none) {
    * {
      scrollbar-width: thin;
      scrollbar-color: #b0b0b0 #e2e2e2;
    }
  }

  html {
    /* Всегда резервируем место под скроллбар */
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    scroll-padding-top: 10rem;
    height: 100%;
    min-width: var(--min-res);
  }

  main {
    display: flex;
    flex-direction: column;
    grid-gap: var(--gap-main);
    max-width: var(--max-res);
    min-width: 0;
    grid-area: main;

    &>* {
      contain: content;
    }

    @container (max-width: 15rem) {}
  }

  figure {
    margin: 0;
  }

  p {
    margin-block: .75em;
    line-height: 1.45;
  }

  svg {
    overflow: visible;
    height: auto;
    flex-shrink: 0;
    fill: currentColor;
    pointer-events: none;
  }

  a {
    text-decoration: none;
    color: var(--dark);
  }

  a:visited {
    color: rgb(0, 0, 238);
    color: var(--dark);
  }

  a:hover {
    text-decoration: underline;
  }

  :is(a, button).dashed-blue {
    font-weight: 600;
    font-size: .88em;
    color: var(--blue);
    border-bottom: 2px dashed var(--blue);
    text-decoration: none;
    cursor: pointer;

    &:hover {
      border-bottom-style: solid;
    }

    &:active {
      --blue: red;
    }

    & svg {
      fill: currentColor;
    }
  }

  :is(a, button).button {
    position: relative;
    min-height: 45.67px;
    padding: 12px 16px 15px;
    margin: auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    line-height: 1;
    letter-spacing: -0.5px;
    font-weight: var(--font-thin);
    text-align: left;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 16px;
    user-select: none;
    -webkit-user-select: none;
    transition: color .3s, border .3s, transform .2s;

    &:is(a) {
      text-decoration: none;
      font-weight: 200;

      &:not(.filled-light) {
        padding: 8px 12px 11px;
      }
    }

    &:active {
      transform: translateY(3px) scale(0.98);
      transition: transform 0.05s;
    }

    &.filled {
      color: white;
      --bg-color: var(--blue);
      --bg-color-hover: var(--blue-bright);

      &:hover {
        --bg-color: var(--bg-color-hover);
      }
    }

    &.filled-light {
      color: var(--blue);
      --bg-color: var(--blue-ultra-light);
      --rotate: 10deg;
      --opacity: 85%;
      --shadow-offset-y-top: 0.5px;
      --saturate-dark: 2;

      &:hover {
        filter: saturate(3);
      }
    }

    &.dashed {
      background-color: white;
      color: var(--blue);
      border: 2px dashed var(--blue);

      &:hover {
        border-style: solid;
      }
    }

    &.reset {
      min-height: initial;
      gap: initial;
      line-height: normal;
      font-weight: unset;
      letter-spacing: normal;
      align-items: stretch;
      justify-content: center;
    }
  }

  .--shine {
    --white: white;
    --black: black;
    --opacity: 80%;
    --rotate: 139deg;
    --saturate-light: 1;
    --saturate-dark: 1;
    --shadow-offset-y: -1px;
    --shadow-offset-x: -1px;
    --shadow-offset-y-top: -1px;
    --shadow-offset-x-top: -1px;
    --shadow-blur: 25px;

    --shadow-offset: var(--shadow-offset-y) var(--shadow-offset-x);
    --shadow-offset-top: var(--shadow-offset-y-top) var(--shadow-offset-x-top);
    --bg-color: var(--blue);

    ---light: color-mix(in srgb, var(--bg-color) var(--opacity), var(--white));
    ---dark: color-mix(in srgb, var(--bg-color) var(--opacity), var(--black));

    background: var(--bg-color);
    background: linear-gradient(var(--rotate),
        var(---light) 0%,
        var(--bg-color) 60%,
        var(--bg-color) 80%,
        var(---dark));
    box-shadow:
      inset 2.5px 6px var(--shadow-blur) var(---light),
      inset var(--shadow-offset) 1px 0 var(---dark),
      inset var(--shadow-offset-top) 1px 0 var(---dark);
  }

  /* Safari 18+ */
  @supports (content-visibility: hidden) {
    .--shine {
      --bg-color-hsl: hsl(from var(--bg-color) h s l);
      --light-hsl: hsl(from var(---light) h calc(s * var(--saturate-light)) l);
      --dark-hsl: hsl(from var(---dark) h calc(s * var(--saturate-dark)) l);

      --bg-color-adjusted: var(--bg-color-hsl);
      --light-adjusted: var(--light-hsl);
      --dark-adjusted: var(--dark-hsl);

      background: linear-gradient(var(--rotate),
          var(--light-adjusted) 0%,
          var(--bg-color-adjusted) 60%,
          var(--bg-color-adjusted) 80%,
          var(--dark-adjusted));
      box-shadow:
        inset var(--shadow-offset) 1px 0 var(--dark-adjusted),
        inset 2.5px 6px var(--shadow-blur) var(--light-adjusted),
        inset var(--shadow-offset-top) .3px 0 var(--dark-adjusted);
    }
  }

  h1 {
    /* font-size: 3em; */
    font-size: 2.75em;
    font-weight: 900;
    line-height: 1;
    margin: 0 0 0 -3px;
    text-wrap-style: balance;
    color: var(--dark);
  }

  h2 {
    font-size: 2.2em;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    color: var(--dark);
  }

  h3 {
    font-weight: 900;
  }

  body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    height: 100%;
    margin: 0;
  }

  body,
  input,
  textarea,
  button {
    font: inherit;
    /* font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; */
    font-family: system-ui;
  }

  /* body,
input,
textarea {
    font-family: 'Yandex Sans Text';
}

h1, h2, h3, h4,
button {
    font-family: 'Yandex Sans Display';
} */

  input:not([type='checkbox']),
  textarea,
  button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
  }

  input[type=file],
  input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
  }

  button {
    padding: 0;
    background-color: transparent;
  }

  ul,
  ol {
    padding: 0;
    margin: auto;
    list-style: none;
  }

  br {
    display: none;
  }

  #app {
    display: grid;
    grid-auto-flow: row;
    grid-template-areas: "main" "footer";
    padding: 10px var(--padding);
    grid-gap: var(--gap-app);
    justify-content: center;
    box-sizing: border-box;
    min-height: 100%;
    width: 100%;
    width: stretch;

    &:not(:has(#menu)) {
      grid-template-columns: auto;
      justify-items: center;

      & footer {
        grid-column: auto;
      }
    }
  }

  .orange {
    h2 {
      font-size: 2.6em;
    }

    :is(h1, h2, h3) {
      & span.main {
        color: var(--orange);
        text-decoration: underline dotted;
      }

      & span.sub {
        display: block;
        font-size: 85%;
        font-variant-emoji: text;

        &:nth-of-type(3) {
          font-size: 45%;
          font-weight: lighter;
        }
      }
    }

    a.dashed-blue {
      margin-top: 10px;
      display: inline-block;
    }
  }

  /* screen-reader only → невидимый, но доступный для скрин-ридеров и поисковиков */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }



  /* HEADER */

  main>header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    width: -webkit-fill-available;
    width: stretch;
    padding: 10px 14px;
    margin: -10px -14px auto;
    border-radius: 0 0 18px 18px;
    max-width: var(--max-res);
    background: linear-gradient(to right, #ffffffeb 10%, #ffffffc9 15%);
    backdrop-filter: blur(15px) saturate(1.8) brightness(3);
    -webkit-backdrop-filter: blur(15px) saturate(1.8) brightness(3);
    box-shadow: 0 0 0 1px #e4e4e4, inset 0 0 18px #00000012;
    contain: layout style;
    isolation: isolate;
    z-index: 10;

    /* position: sticky; */
    /* top: -45px; */
    /* transition: top .3s;
    will-change: top; */

    /* &:hover {
        top: 0;
    } */

    & .logo {
      display: flex;
      align-items: center;
      margin: -10px 0 -32px;
      text-decoration: none;

      & span {
        width: min-content;
        margin-left: -17px;
        margin-top: -32px;
        line-height: .8;
        font-size: 1.7em;
        font-weight: 900;
        color: var(--orange);
        -webkit-text-stroke: 1px #1d1d1d;
        z-index: -1;
        transition: transform .15s;
      }

      & img {
        width: 90px;
        transition: transform .15s;
      }

      &:hover {
        & span {
          transform: translateX(6px);
        }

        & img {
          transform: translateX(-8px) rotate(-6deg);
        }
      }
    }

    & .buttons {
      display: flex;
      gap: max(10px, .5vw);

      & .links {
        display: flex;
        margin: auto;
        flex-direction: column;
        line-height: 1;
        gap: 2px;

        a {
          font-size: .8em;
          padding-block-end: 2px;
        }
      }

      @supports (corner-shape: squircle) {
        & .button {
          border-radius: 50px;
          corner-shape: squircle;
        }
      }
    }

    & .contacts {
      display: flex;
      /* gap: max(10px, 0vw); */
      gap: max(10px, .5vw);
      line-height: 1;
      text-decoration: none;
      z-index: 1;

      --height: 35px;

      & .telephone {
        display: flex;
        align-items: center;
        gap: .1vw;
        max-height: 33px;
        font-size: 3em;
        font-weight: var(--font-thin);
        white-space: nowrap;
        color: var(--dark);
        text-decoration: none;

        @media (min-width: 900px) {
          background: none;
          box-shadow: none;
        }

        & svg.icon {
          display: none;
        }

        & b {
          font-weight: 500;
          font-size: 80%;
          padding-inline-end: 3px;
        }

        & small {
          font-size: 50%;
        }
      }

      & .contact {
        display: none;
        height: var(--height);
        padding-inline: 7px;
        box-sizing: border-box;
        font-size: .9em;
        font-weight: 600;
        letter-spacing: -1px;
        border-radius: 11px;
        width: 100%;
        width: -webkit-fill-available;
        width: stretch;
        text-align: center;
        align-items: center;
        justify-content: center;
        gap: 2px;

        color: var(--blue);
        --bg-color: var(--blue-ultra-light);
        --opacity: 85%;
        --shadow-offset-y-top: 0.5px;
        --saturate-dark: 2;
      }
    }
  }

  /* HEADER */



  /* SOCIAL */

  .__social {
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr 1fr;

    --ico-size: 19px;

    &>a {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: var(--ico-size);
      width: var(--ico-size);
      height: var(--ico-size);
      aspect-ratio: 1 / 1;
      border-radius: 7px;
      color: white;
      text-decoration: none;
      background-color: var(--accentColor);

      &[title] {
        width: auto;
        padding-inline: 4px;

        &:after {
          content: attr(title);
          text-wrap: nowrap;
          padding-inline-start: 2px;
          font-size: .66em;
          color: currentColor;
        }
      }

      & .icon {
        width: calc(var(--ico-size) - 5px);
        height: calc(var(--ico-size) - 5px);
        color: var(--accentColor);
      }

      &.ws {
        --accentColor: #25d366;

        & .icon {
          width: calc(var(--ico-size) / 2);
          height: calc(var(--ico-size) / 2);
          color: white;
        }
      }

      &.tg {
        --accentColor: #23a0dc;
      }

      &.vk {
        --accentColor: #0077ff;
      }

      &.yandex {
        --accentColor: #f8604a;
      }

      &.blog {
        --accentColor: var(--orange);

        & .icon {
          fill: white;
        }
      }
    }
  }

  /* SOCIAL */



  /* NAV */

  #menu {
    display: contents;
    contain: layout style paint;
    isolation: isolate;

    --margin: clamp(10px, 3vh, 25px);

    & nav::before {
      content: "";
      position: fixed;
      inset: 0;
      opacity: 0;
      transition: opacity .35s;
      background-color: #ffffff30;
      backdrop-filter: invert(.1) brightness(1.55) blur(80px) saturate(2);
      -webkit-backdrop-filter: invert(.1) brightness(1.55) blur(80px) saturate(2);
      will-change: opacity, backdrop-filter;
      contain: paint;
      isolation: isolate;
      pointer-events: none;
      z-index: 11;
    }

    & .wrapp {
      position: fixed;
      inset: 8px 2px;
      display: flex;
      flex-direction: column;
      flex-direction: column-reverse;

      width: fit-content;
      max-width: var(--nav-min-width);
      margin: auto;
      padding: 9px 8px 12px 8.5px;
      box-sizing: border-box;
      border-radius: 15px;
      user-select: none;
      -webkit-user-select: none;
      z-index: 99;

      transform: translateY(calc(100% - 35.5px));
      transition: transform .35s, background-color .35s, max-width cubic-bezier(0.41, 0.4, 0.08, 1.18) .5s .15s;

      /* border: 2px solid #ffffff0f;
        box-shadow: inset 0px 1px 12px #ffffff45;
        background-color: var(--dark); */
      background-color: rgba(37, 37, 37, 0.6);
      backdrop-filter: blur(22px) saturate(8);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 6px 12px rgba(0, 0, 0, 0.2);

      @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 30px;
      }

      & ul,
      & ol {
        &:first-child {
          margin-block-start: -5px;
        }

        &:not(:last-child):has(li:nth-child(2)) {
          margin-block-end: var(--margin);
        }
      }

      & .navigation {
        height: 100%;
        padding-inline: 3.5px 15px;
        overflow-y: scroll;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        font-variant: petite-caps;
        z-index: 2;

        &::-webkit-scrollbar {
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background-color: #ffffff48;
        }

        &::-webkit-scrollbar-thumb:hover {
          background-color: white;
        }

        & li {
          position: relative;
          min-height: 25.33px;
          margin: 4px auto;
          white-space: nowrap;

          &:not(.header) {
            padding-inline-start: 15px;

            & .icon {
              inline-size: 16px;
              block-size: 16px;
              margin-inline-end: 4px;
              margin-block-end: -1px;
            }
          }

          &.header {
            min-height: 21.33px;
            text-transform: uppercase;
            font-size: .7em;

            &>a {
              font-weight: 900;
              font-size: 1.3em;

              & svg.icon {
                fill: currentColor;
                margin-inline-end: 4px;
                margin-block-end: -3px;
              }

              &.active {
                font-weight: 900;
              }

              & .icon {
                inline-size: 21px;
                block-size: 21px;
              }
            }
          }

          & a {
            display: inline-block;
            width: 100%;
            max-width: fit-content;
            text-decoration: none;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow-x: hidden;
            color: white;

            &:first-child {
              overflow: hidden;
              padding-inline-end: 5px;
              z-index: 1;

              &:hover {
                text-decoration: underline;
              }
            }

            &:not(:first-child) {
              font-size: .7em;
              padding: 1px 6px 4px;
              /* background-color: #ffffff0f; */
              /* background: linear-gradient(to bottom, transparent 66%, #ffffff0f); */
              background: linear-gradient(166deg, transparent 66%, #ffffff0f), linear-gradient(344deg, transparent 66%, #ffffff0f);
              border-radius: 8px;
              margin: auto 0 0;
              /* font-variant: all-small-caps; */

              &.active {
                font-weight: 500;
                outline: .5px solid;
              }

              & .icon {
                inline-size: 15px;
                block-size: 15px;
                margin-block-end: -3px;
              }

              &:hover {
                /* text-decoration: underline; */
                outline: 1px solid;
                background-color: #ffffff80;
              }
            }

            &.active {
              font-weight: 700;
              font-variant-emoji: text;
              color: var(--green);
            }

            & i {
              font-size: 0.85em;
            }
          }
        }
      }

      & .additionally {
        display: flex;
        width: 100%;
        width: -webkit-fill-available;
        width: stretch;
        margin-block-end: var(--margin);
        cursor: pointer;
        z-index: 2;

        & .toggle {
          position: relative;
          display: grid;
          grid-template-rows: 21px;
          grid-template-columns: 52px;
          align-content: center;
          height: min-content;
          border-radius: 8px;
          background-color: #ececec21;
          margin-inline-start: 7px;
          padding: 3px 5px;
          cursor: pointer;
          user-select: none;
          pointer-events: auto;
          text-align: center;
          text-wrap-mode: nowrap;
          white-space: nowrap;

          --rotate: 30deg;

          @supports (corner-shape: squircle) {
            corner-shape: squircle;
            border-radius: 20px;
          }

          & img {
            height: 100%;
            pointer-events: none;
          }

          & .icon {
            margin: 0 auto;

            &.close {
              display: none;
            }
          }
        }
      }
    }
  }

  /* status */

  .status {
    display: flex;
    gap: 8px;
    width: 100%;
    width: -webkit-fill-available;
    width: stretch;
    align-items: center;
    text-wrap-mode: nowrap;
    background-color: #1a1f2b80;
    /* background-color: #ffffff1f; */
    border-radius: 8px;
    padding: 7px 10px;
    contain: layout style paint;
    isolation: isolate;
    pointer-events: none;
    transition: background-color .35s .35s;

    & .ico {
      position: relative;
      width: 10px;
      min-width: 10px;
      height: 10px;
      border-radius: 50px;
      background: #fff;
      transition: transform 1s cubic-bezier(0.25, 0.1, 0.29, 1.41);
      transform: scale(.2) translateX(10px);
      will-change: transform;

      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        background-color: inherit;
        animation: status-pulse 2s ease-in-out infinite;
        will-change: transform, opacity;
      }
    }

    & .text {
      display: flex;
      gap: 5px;
      padding-bottom: 2px;
      width: 100%;

      & span {
        display: block;
        color: white;
        font-size: 1.07em;
      }

      &:before {
        content: attr(data-name);
        content: attr(data-name, "статус обновляется...");
        color: white;
        font-weight: 500;
        font-size: .7em;
        transition: .5s .5s cubic-bezier(0.25, 0.1, 0.29, 1.41);
        transform: translateX(10px);
        opacity: 0;
        line-height: 1;
      }

      &:after {
        content: "режим работы";
        color: #ffffff73;
        font-weight: 500;
        font-size: .7em;
        font-variant-caps: all-small-caps;
        line-height: 1;
        margin-left: auto;
      }
    }
  }

  @keyframes status-pulse {
    0% {
      transform: scale(1);
      opacity: .7
    }

    50% {
      transform: scale(2.5);
      opacity: 0
    }

    to {
      transform: scale(1);
      opacity: 0
    }
  }

  html[data-status] .status .ico,
  html[data-status] .status .text:before {
    transform: none;
    opacity: 1;
  }

  html[data-status="open"] .status .ico {
    background: var(--green);
  }

  html[data-status="only_out"] .status .ico {
    background: gold;
  }

  html[data-status="closed"] .status .ico {
    background: red;
  }

  /* status */

  html.menu-open {
    #menu {
      & nav::before {
        pointer-events: auto;
        opacity: 1;
        transition-delay: .25s;
      }

      & .wrapp {
        max-width: var(--nav-max-width);
        background-color: transparent;
        backdrop-filter: invert(.1) brightness(1.15);
        border-color: transparent;
        box-shadow: none;
        transition: transform .35s .15s cubic-bezier(0.79, 0.16, 0.27, 1.05), background-color .15s .25s, max-width cubic-bezier(0.72, -0.01, 0.29, 1.08) .25s;
        transform: none;

        & .navigation {
          &::-webkit-scrollbar-thumb {
            background-color: #00000048;
          }

          &::-webkit-scrollbar-thumb:hover {
            background-color: var(--dark);
          }

          & li {
            & a {
              color: var(--dark);
              background: none;

              &.active {
                color: var(--blue);
              }
            }
          }
        }

        & .status {
          background-color: var(--dark);
        }

        & .additionally .toggle .icon {
          &.close {
            display: block;
          }

          &.open {
            display: none;
          }
        }
      }
    }
  }

  /* NAV */




  /* HEADERS */

  .headers {
    position: relative;
    display: grid;
    grid-template-columns: 1fr .1fr;
    grid-template-areas:
      "head warranty"
      "bread bread";
    grid-gap: 20px;
    align-items: center;
    margin-block: -5vh .5svh;
    contain: style;

    &:has(.before) {
      grid-template-areas:
        "head warranty"
        "bread bread"
        "before before";
    }

    & .before {
      grid-area: before;
      gap: calc(var(--gap) / 2);
      display: flex;
      flex-direction: column;
    }

    &:has(.bread a:last-child[href="/"]) {
      grid-template-areas:
        "head warranty";

      .bread {
        display: none;
      }
    }
  }

  .headers .warranty {
    display: flex;
    align-items: center;
    line-height: 1;
    font-weight: 900;
    flex-direction: column;
    grid-area: warranty;
    margin-left: auto;
    border-radius: 120px 150px;
    height: 85px;
    padding: 4px;
    rotate: 10deg;
    text-decoration: none;
    color: var(--orange);
    --bg-color: var(--dark);

    @media (any-hover: hover) {
      &:hover {
        & .num {
          transform: translateY(6px);
        }

        & .days {
          transform: translateY(12px);
        }
      }
    }
  }

  .headers .warranty .num {
    font-size: 278%;
    line-height: .7;
    transition: transform .15s;
  }

  .headers .warranty .days {
    font-size: 188%;
    line-height: .5;
    color: white;
    text-shadow: -1px 1px 0 black;
    transition: transform cubic-bezier(0.32, 0.38, 0.03, 1.44) .2s;
  }

  .headers .bread {
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
    grid-area: bread;
    text-transform: lowercase;
  }

  .headers .bread a {
    text-decoration: none;
    font-size: .8em;
    color: gray;
  }

  .headers .bread a:not(:last-child):after {
    content: "→";
    padding-left: 5px;
  }

  /* HEADERS */




  /* INTRO */

  .intro {
    display: grid;
    grid-template-areas: "left right";
    grid-template-columns: 1fr 1.618fr;
    gap: var(--gap);
    margin-block: -7vh auto;
    contain: layout style;

    &:has(.right):has(.bottom) {
      grid-template-areas: "left right" "bottom bottom";
    }
  }

  .intro .left {
    display: grid;
    grid-template-rows: auto min-content min-content;
    grid-area: left;
  }

  .intro .right {
    grid-area: right;
  }

  .intro .bottom {
    grid-area: bottom;
  }

  .intro .buttons {
    display: grid;
    gap: max(10px, .5vw);
    /* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */

    /* gap: max(5px, 0.25vw); */
    align-content: space-evenly;
    grid-auto-flow: column;

    @supports (corner-shape: squircle) {
      & .button {
        border-radius: 50px;
        corner-shape: squircle;
      }
    }

    @media (any-hover: hover) {
      .button {
        &:active {
          transform: translateY(-3px) scale(0.98);
        }
      }
    }
  }

  .intro .text {
    margin: .5em .5em auto;

    h2 {
      font-size: 1.5rem;
      font-weight: bolder;
    }

    /* p:last-child {
        margin-bottom: 0;
    } */

    :is(ol, ul) {
      margin: .5em .1em 1em;

      & li {
        /* padding: 5px 0; */
        padding-block: 1.5px;

        &::marker {
          font-size: 80%;
          font-weight: 700;
          color: var(--orange);
        }
      }
    }

    /* ul:last-child {
            margin-bottom: auto;
        } */

    ul {
      list-style: cambodian;
    }

    ol {
      list-style: inside decimal-leading-zero;
    }

    m {
      font-size: .85em;
      font-weight: 500;
      padding: 0 4px 2px;
      width: max-content;
      border-radius: 5px;
      background-color: var(--green);
      transition: background-color .05s, color .05s, transform .2s;
      pointer-events: auto;
      font-variant: petite-caps;
    }
  }

  .intro .images {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: .25em -1em auto;
    height: 100%;
    min-height: 140px;
    justify-content: space-between;
    padding: 0;
    perspective: 2500px;
    container-type: size;

    --rotate: -1deg;
    --compression: 125px;
    --a: 29deg;
    --b: var(--rotate);
    --g: -18deg;
    --tf: rotateY(var(--a)) rotateZ(var(--b)) rotateX(var(--g));
    --k: max(1, 0.860 + 0.135 * (1cqh / 1cqw));
    --ease: cubic-bezier(0.41, 0.4, 0.3, 1.19);

    &[aria-label]:before {
      content: attr(aria-label);
      position: absolute;
      font-size: .5em;
      letter-spacing: 1px;
      inset: min(calc(-5px - 1.6cqb), -10px) auto auto 62.5px;
      transform: var(--tf);
      transition: opacity .2s;
    }

    &:has(figure:nth-child(2)) {
      min-height: 200px;
    }

    & .card {
      flex: 1 1 0px;
      min-height: 0;
      overflow: hidden;
      border-radius: 28px;
      cursor: zoom-in;
      margin: 0;
      padding: 0;
      width: 100%;
      backface-visibility: hidden;

      @media (min-width: 950px) and (max-width: 500px) {
        transform: translateY(-10%);

        &:nth-child(2) {
          transform: translateX(10px) translateY(-20%);
        }

        &:nth-child(3) {
          transform: translateX(20px) translateY(-30%);
        }
      }

      &:not(:first-child, :last-child) {
        margin: calc(var(--compression) * -1) auto;
      }

      &:not(:first-child):nth-child(2):last-child {
        margin-top: calc(var(--compression) * -.5);
      }

      & picture {
        display: block;
        width: 100%;
        height: 100%;
      }

      & img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

        --det: calc(cos(var(--a)) * cos(var(--g)) - sin(var(--a)) * sin(var(--b)) * sin(var(--g)));
        --ma: calc(var(--k) * cos(var(--b)) * cos(var(--g)) / var(--det));
        --mb: calc(var(--k) * sin(var(--b)) * -1 / var(--det));
        --mc: calc(var(--k) * (cos(var(--a)) * sin(var(--b)) * cos(var(--g)) - sin(var(--a)) * sin(var(--g))) / var(--det));
        --md: calc(var(--k) * cos(var(--a)) * cos(var(--b)) / var(--det));
      }

      &.shadow {
        box-shadow: 0 0 .5px black;
      }
    }

    &.invert .card img {
      filter: invert(1) drop-shadow(0px 0px 1px white);
    }
  }

  html[data-system="loaded"] {
    .intro .images .card {
      transform-origin: center center;
      will-change: transform;
      transition: transform .5s var(--ease);
      transition-delay: .25s;
      transform: translateZ(0) scale(.9);

      img {
        transform-origin: center center;
        transform: translateZ(0);
        transition: transform .65s var(--ease);
      }
    }
  }

  html[data-system="loaded"].delay-500 {
    .intro .images .card {
      transform: var(--tf) translateZ(-4px) scale(1);
      transition-delay: 0s;

      img {
        transform: matrix(var(--ma), var(--mb), var(--mc), var(--md), 0, 0);
      }
    }
  }

  html[data-system="loaded"].delay-1000 {
    @media (any-hover: hover) {
      @container (max-width: 500px) {
        .intro .images:hover:before {
          opacity: 0;
        }

        .intro .images:not(:has(figure:nth-child(2))) {
          & .card img {
            transition: transform .65s var(--ease);
          }

          &:hover :is(.card, .card img) {
            transform: none;
          }
        }

        .intro .images:has(figure:nth-child(2)):not(:has(figure:nth-child(3))):hover {
          & .card:first-child {
            transform: var(--tf) translateZ(14px) translateY(-11.5%) scale(0.84);
          }

          & .card:last-child {
            transform: var(--tf) translateZ(14px) translateY(10%) scale(0.84);
          }
        }

        .intro .images:has(figure:nth-child(3)):hover {
          & .card {
            --sc: clamp(0.8, calc(100cqb / 480px), 0.85);
            --ty: clamp(8%, calc((520px / 100cqb) * 14%), 18%);
            transform: var(--tf) translateZ(15px) translateY(-8px) scale(var(--sc));
          }

          & .card:first-child {
            transform: var(--tf) translateZ(15px) translateY(calc(var(--ty) * -1.5)) scale(var(--sc));
          }

          & .card:nth-child(2) {
            transform: var(--tf) translateZ(23px) translateY(-10.5%) scale(var(--sc));
          }

          & .card:last-child {
            transform: var(--tf) translateZ(31px) translateY(calc(var(--ty) - 10.5%)) scale(var(--sc));
          }
        }
      }
    }
  }

  @-moz-document url-prefix() {
    .intro .images {
      --k: 1.05;

      & .card {
        backface-visibility: visible;
        clip-path: inset(0 round 28px);
      }
    }

    @media (any-hover: hover) {
      @container (max-width: 500px) {
        html[data-system="loaded"].delay-1000 .intro .images:has(figure:nth-child(2)):hover {
          & .card {
            transform: var(--tf) translateZ(15px) translateY(-8px) scale(0.83);
          }

          & .card:first-child {
            transform: var(--tf) translateZ(15px) translateY(-19.5%) scale(0.83);
          }

          & .card:nth-child(2) {
            transform: var(--tf) translateZ(23px) translateY(-10.5%) scale(0.83);
          }

          & .card:last-child {
            transform: var(--tf) translateZ(31px) translateY(2.5%) scale(0.83);
          }
        }
      }
    }
  }

  .intro .right .rels {
    & .items .item:not(:last-child):not(:has(.vals, .desc)) {
      margin-block-end: -5px;
    }
  }

  .intro .rels {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    --item-margin: 26px;

    &:nth-child(2) {
      flex: 1 50%;
    }

    & h2 {
      width: min-content;
      margin: -5px 0 auto;
      text-align: right;
      font-weight: var(--font-thin);
      font-variant-caps: petite-caps;
      line-height: .8;
      color: gray;

      &::after {
        content: " →";
        text-wrap-mode: nowrap;
        white-space: nowrap;
      }

      &:empty {
        display: none;
      }
    }

    &.horizontal {
      .items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 1.5px 17.5px;
      }
    }

    &.horizontal,
    &:has(.items > .item:nth-child(10)) {
      flex-direction: column;
      align-items: flex-start;

      & h2 {
        width: auto;
        margin: 0;
        text-align: left;

        &:after {
          content: " ↓";
        }
      }
    }

    @media (min-width: 950px) {
      &:not(.horizontal, :has(picture)) .items .item.interactive {
        &:has(~ &:hover) {
          transform: translateY(-5px);
        }

        &:hover~.item.interactive {
          transform: translateY(5px);
        }

        &:has(~ :not(.interactive) ~ &:hover),
        &:hover~ :not(.interactive)~.item.interactive {
          transform: none;
        }
      }
    }

    & .items {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      contain: layout style;
      gap: 17.5px;
      padding-block-end: 5.5px;

      & h2 {
        width: auto;

        &::after {
          content: " ↓";
        }
      }

      .group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 17.5px;

        &:not(:first-child) {
          margin-block-start: 10px;
        }
      }

      & .item {
        position: relative;
        display: grid;
        grid-auto-flow: row;
        grid-auto-rows: min-content;
        justify-items: start;
        gap: 7.5px;
        max-width: 475px;
        width: fit-content;
        height: fit-content;
        margin: auto 0;
        text-decoration: none;
        transition: transform .25s;

        & a.overlay {
          position: absolute;
          inset: -10px;
          z-index: 2;
        }

        &>*:not(.vals, a.overlay) {
          pointer-events: none;
        }

        &:not(:has(picture)) {

          &:has(.name):has(.desc):not(:has(.vals)) {
            gap: 1.5px;
          }

          &:has(.icon) .header {
            display: grid;
            grid-auto-flow: column;
            grid-template-columns: calc(var(--item-margin) + 10px) 1fr;
            align-items: center;
            height: fit-content;
            max-height: 1.9em;
            font-size: 1.25em;
          }
        }

        &:has(picture) {
          padding: 10px;
          gap: 10px;

          & .header {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
          }

          & img {
            height: 22px;
          }

          & .name {
            font-size: .85em;
          }

          & source,
          & picture {
            display: contents;
            pointer-events: none;
          }

          &::before {
            inset: -5px;
          }
        }

        &:hover {

          & .vals {
            filter: none;
          }
        }

        &.interactive {
          cursor: pointer;
          user-select: none;
          -webkit-user-select: none;
        }

        &.interactive:hover {

          &::before,
          & .icon-action {
            opacity: 1;
          }

          &::before {
            transform: none;
          }

          &:has(a.overlay) :is(.name, .icon-symbol),
          & .vals a {
            color: var(--blue);
          }

          &:is(button) :is(.name, .icon-symbol) {
            color: var(--orange);
          }

          &:not(:has(.val:active)):active {
            transform: scale(.98);
            transition: transform .1s;
          }
        }

        &::before {
          content: "";
          position: absolute;
          inset: -5.5px -10px -10px -3px;
          border-radius: 10px;
          box-shadow: inset 0 0 0 .5px #f2f2f2, 0 0 30px #e9e9e9;
          pointer-events: none;
          transition: opacity .15s;
          transform: rotate(0.01deg);
          opacity: 0;
        }

        & .name:after {
          position: absolute;
          font-size: .4em;
          inset: -4px auto auto -2px;
          font-variant-emoji: text;
          font-variant-caps: normal;
          color: var(--orange);
        }

        &.hot .name:after {
          content: "🔥хит";
        }

        &.discount .name:after {
          content: "% вместе дешевле";
        }

        & .name {
          position: relative;
          font-weight: 700;
          font-variant-caps: petite-caps;
          white-space: nowrap;

          &[data-sup]::after {
            content: attr(data-sup);
            position: inherit;
            inset: -6px -1px auto auto;
            font-size: .5em;
            font-weight: lighter;
            letter-spacing: -.25px;
            padding-inline: 2.5px;
            border-radius: .15rem .15rem .15rem 0;
            background-color: var(--dark);
            color: white;
          }
        }

        & .icon {
          font-variant-emoji: emoji;
          text-align: center;
        }

        & .icon:has(.icon-symbol) {
          display: flex;
          margin: auto auto 1px;
        }

        & .vals {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 2.5px 10px;
          height: 100%;
          max-width: 500px;
          margin-inline-start: var(--item-margin);
          font-size: .68em;
          white-space: nowrap;
          transition: margin .35s;
          filter: contrast(2) grayscale(1);
          pointer-events: none;

          & a.val {
            position: relative;
            pointer-events: auto;
            z-index: 3;
          }

          & span {
            font-size: .85em;
            font-weight: 500;
            padding: 0 4px 2px;
            width: max-content;
            border-radius: 5px;
            background-color: var(--green);
            transition: background-color .05s, color .05s, transform .2s;
            pointer-events: auto;

            &:hover {
              background-color: var(--blue);
              color: white;
            }

            &:active {
              transform: scale(.94);
              transition: transform .1s;
            }
          }
        }

        & .desc {
          /* margin-inline-start: calc(var(--item-margin) * 1.618); */
          margin-inline-start: var(--item-margin);
          font-size: .85em;
          font-weight: var(--font-thin);
          text-align: left;
          line-height: 1;

          &::before {
            content: "→ ";
            color: #3e475c;
          }
        }

        &:not(:has(.vals)) .desc {
          /* margin-inline-start: var(--item-margin); */
          max-width: 400px;
        }

        &:has(.vals) .desc {
          margin-block-start: -6px;
        }

        &:has(.desc) .vals {
          margin-inline-start: calc(var(--item-margin) * 1.618);
        }

        &:has(.vals):has(.desc)::before {
          top: -10px;
        }

        & .icon-action {
          position: absolute;
          inset: 0 0 auto auto;
          color: var(--blue);
          transition: opacity .25s, transform .35s cubic-bezier(0.25, 0.1, 0, 1.4) .15s;
          opacity: 0;

          /* .interactive:not(:hover) & {
                        inset: 0 auto auto 3px;
                        opacity: 1;
                        width: 6.5px;
                        height: 6.5px;
                    } */
        }

        &:is(button) .icon-action {
          color: var(--orange);
        }

        &.internal {
          & .icon-action {
            transform: rotate(90deg);
          }
        }
      }
    }

    &[theme="micro-cards"] {
      flex-direction: column;

      .items {
        display: grid;
        gap: 3.5px;
        grid-template-columns: repeat(3, minmax(150px, 1fr));
        justify-items: stretch;
        align-items: stretch;

        .item {
          width: auto;
          height: auto;
          margin: initial;
          padding: 10px 8px 12.5px;
          border-radius: 12px;
          transition: background-color .15s;

          &,
          &:first-child {
            background-color: var(--wheat);
          }

          @supports (order: sibling-index()) {
            background-color: oklch(from var(--wheat) l c calc(h + (sibling-index() - 1) * 52));
          }

          & .icon-action {
            inset: 6px 6px auto auto;
          }

          &:not(:has(.icon)) {
            padding-inline: 12.5px;
            --item-margin: 5px;
          }

          &::before {
            box-shadow: inset 0 0 0 .5px #f2f2f2, 0 0 30px #e9e9e9;
            background-color: white;
            z-index: -1;
          }

          &.interactive:hover {
            background-color: transparent;
            z-index: 1;
          }
        }

        @media (max-width: 1000px) {
          grid-template-columns: repeat(2, minmax(150px, 1fr));
        }

        @media (max-width: 670px) {
          grid-template-columns: 1fr;
        }
      }
    }

    /* &[theme="micro-cards"] {
            flex-direction: column;

            .items {
                gap: 3.5px;
                --item-margin: 5px;

                .item {
                    max-width: 33%;
                    padding: 10px 15px 12.5px;
                    border-radius: 12px;
                    background-color: var(--wheat);
                    transition: background-color .15s;

                    &::before {
                        box-shadow: inset 0 0 0 .5px #f2f2f2, 0 0 30px #e9e9e9;
                        background-color: white;
                        z-index: -1;
                    }

                    &.interactive:hover {
                        background-color: transparent;
                        z-index: 1;
                    }
                }
            }
        } */

    /* @media (min-width: 1500px) {
            align-items: center;
        } */
  }

  #services ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 15px;
    margin: 0;
    height: fit-content;
    border-radius: 10px;
    background-color: aliceblue;

    & li.hot .icon,
    & li.hot .symbol {
      color: var(--orange);
    }

    & .item {
      position: relative;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 23px auto;
      padding-bottom: 4px;
      justify-items: center;
      justify-content: start;
      align-items: center;
      text-decoration: none;
      user-select: none;
      -webkit-user-select: none;
      cursor: pointer;
      z-index: 1;

      &:active {
        transform: translateY(3px) scale(.98) !important;
        transition: .05s;
      }

      & * {
        pointer-events: none;
      }

      & .icon {
        position: relative;
        font-variant-emoji: text;
        font-size: 1.45em;
        color: var(--blue);
      }

      & .symbol {
        position: absolute;
        right: -4px;
        top: 0px;
        color: var(--blue);
        transition: transform .25s, opacity .15s;
        transform: translateX(-5px);
        opacity: 0;
      }

      &:is(div) {
        /* font-size: .75em; */

        & .symbol {
          transform: translateY(5px);
        }
      }

      &:hover {
        &:before {
          content: "";
          position: absolute;
          inset: -3px -8px;
          border-radius: 10px;
          background-color: #d6ecff;
          z-index: -1;
        }

        & .symbol {
          transform: none;
          opacity: 1;
        }
      }
    }
  }

  /* INTRO */




  /* BOXES */

  .package {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 0 9px 9px;
    margin: 0 -9px -9px;
    contain: content;
    content-visibility: auto;
    overflow-anchor: none;

    &:has(.wrapp > .box:nth-child(1)) {
      contain-intrinsic-size: auto 295px;
    }

    &:has(.wrapp > .box:nth-child(2)) {
      contain-intrinsic-size: auto 532px;
    }

    &:has(.wrapp > .box:nth-child(3)) {
      contain-intrinsic-size: auto 678px;
    }
  }

  .package>.wrapp {
    display: grid;
    grid-gap: 15px;
    width: fit-content;
  }

  .package .box {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--padding);
    min-width: 250px;
    max-width: 750px;
    height: fit-content;
    border-radius: 30px;
    text-decoration: none;
    box-sizing: border-box;
    transition: .1s;
    overflow: hidden;
    /* box-shadow: 0 0 0 1px #e4e4e4, inset 0 0 18px #00000012; */
    /* box-shadow: inset 0 0 18px #00000012; */
    /* box-shadow: inset 0 0 18px #00000021; */
    background-color: #fff1bc;
    background-color: var(--wheat);
    will-change: transform, box-shadow, background-color;
    --rotate: 5deg;
    --padding: 25px;
    --benefits-color: var(--dark);
    --color-title: var(--dark);
    --color-solution: white;
    --background: white;
    --transition: var(--transitionRubber) .45s;

    & .wrapp {
      display: grid;
      grid-template-columns: auto 1fr;
      justify-content: start;
      align-items: center;
      width: -webkit-fill-available;
      width: stretch;
    }

    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: 36px;
    }

    @media (any-hover: hover) {
      &:hover {
        transform: scale(1.015);
        /* box-shadow: inset 0 0 30px #ffdba8; */
        background-color: transparent;
        box-shadow: 0 0 0 .5px #c9c9c9, inset 0 0 0 transparent;
      }
    }
  }

  .package .box .solution {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    gap: 20px;
    text-wrap-style: balance;
    color: var(--color-solution);

    & .title {
      margin: 0;
      font-size: 1.8em;
      font-weight: lighter;
      line-height: 1;
      text-wrap-style: balance;
      font-variant-caps: petite-caps;
      color: var(--color-title);
    }

    & .benefits-button {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 20px;

      & .benefits {
        position: relative;
        max-width: 80%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        margin: 0;
        color: var(--benefits-color);
        list-style-type: none;
        font-size: .68em;
        line-height: 1.1;
        z-index: 1;

        & li {
          display: flex;
          align-items: center;
          gap: 5px;

          & .icon {
            width: 22px;
            height: 22px;
            color: var(--blue);
            color: var(--dark);
          }

          &.hot .icon {
            color: var(--orange);
          }
        }
      }

      & button {
        text-wrap-mode: nowrap;
        white-space: nowrap;
        margin: 0;
        align-self: end;
        z-index: 2;

        section.box[data-discount="0"] &:after {
          display: none;
        }

        &:after {
          content: "с выгодой " attr(data-discount);
          color: var(--green);
          font-weight: 700;
        }

        &[data-time]:before {
          content: "сделаем за " attr(data-time) " минут";
          position: absolute;
          top: calc(100% + 2px);
          left: 16px;
          font-size: .55em;
          font-weight: initial;
          letter-spacing: initial;
          color: var(--gray-black);
        }

        &[data-time-approximate]:before {
          content: "сделаем за ~" attr(data-time) " минут";
        }

        &[data-time="0"]:before {
          display: none;
        }

        @supports (corner-shape: squircle) {
          border-radius: 50px;
          corner-shape: squircle;
        }
      }
    }
  }

  .package .offer {
    position: relative;
    height: 165px;
    margin-inline-start: auto;
    color: #c99443;
    user-select: none;
    -webkit-user-select: none;

    & img {
      height: 100%;
      pointer-events: none;
    }

    & .price {
      position: absolute;
      top: 61px;
      left: 40px;
      right: 51px;
      font-size: 2.5em;
      font-weight: 500;
      text-align: center;
      -webkit-text-stroke: .3px #7a6931;
      text-shadow: 0 0 1.5px #c89343;

      &:after {
        content: "₽";
        color: #90aa05;
        font-size: .66em;
        padding-left: 2px;
        -webkit-text-stroke: .4px #848a02;
        text-shadow: 0 0 1.5px #979507;
      }
    }

    & .separately {
      position: absolute;
      top: 45px;
      left: 22px;
      right: 48px;
      font-weight: var(--font-thin);
      text-align: center;
      z-index: 1;
      -webkit-text-stroke: .3px #7a6931;
      text-shadow: 0 0 1.5px #c89343;

      section.box[data-discount="0"] & {
        display: none;
      }

      & span {
        font-size: .77em;
        padding-inline-end: 4px;
      }

      &:after {
        content: attr(data-price);
        text-decoration: line-through;
        font-weight: 400;
      }
    }
  }

  /* BOXES */



  /* CAT CARDS */

  .cat {
    display: flex;
    gap: var(--card-gap);
    /* margin: min(calc(var(--gap) * -.8), -5.5vh) -15px -15px; */
    margin: min(calc(var(--gap) * -1), -7.5vh) -15px -15px;
    padding: 15px;

    --card-gap: calc(var(--gap) / 2);
  }

  .cat .column {
    width: 100%;
    display: flex;
    gap: var(--card-gap);
    flex-direction: column;
  }

  .cat .card {
    --bg: var(--dark);
    --padding: 20px;
    --text-color: white;
    --title-color: var(--green);
    --image-size: 35%;
    --image-top: 10px;

    --translateX: calc(var(--x) / 3);
    --translateY: calc(var(--y) / 3);
    --translateX-min: calc(var(--translateX) / 2);
    --translateY-min: calc(var(--translateY) / 5);
    --translate-duration-hover: .8s;

    transition: transform cubic-bezier(0.32, 0.38, 0.03, 1.44) .7s;
    will-change: transform;
    contain: layout style;
    isolation: isolate;

    order: var(--order);

    & .image {
      position: absolute;
      inset: 0 0 0 auto;
      padding: 0;
      margin: 0;
      width: 50%;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      transform-origin: bottom right;
      /* transition-timing-function: cubic-bezier(0.32, 0.38, 0.03, 1.44);
        transition-duration: .8s; */
      will-change: transform;
      opacity: var(--opacity);

      transition-timing-function: ease;
      transition-duration: .35s;

      & img {
        height: 100%;
        max-height: 400px;
        margin: 5% 0 auto;
      }

      [data-image-rounded] & img {
        border-radius: 3em 0 0 3em;
        margin: auto 0;
      }
    }

    /* &:hover {
        & .image {
            transform: translateY(var(--translateY-min)) translateX(var(--translateX-min)) rotateZ(3deg) scale(.975);
        }
    } */

    @media (any-hover: hover) {
      &:hover {
        transform: translateY(var(--translateY-min)) translateX(var(--translateX-min));

        & .image {
          /* transform: translateY(var(--translateY)) translateX(var(--translateX)) rotateZ(3deg); */
          transform: translateY(var(--translateY)) rotateZ(3deg);
          transition-duration: var(--translate-duration-hover);

          transition-timing-function: cubic-bezier(0.32, 0.38, 0.03, 1.44);
        }
      }
    }

    @media (any-hover: none) {
      --x: -5px;
      --y: 25px;
    }
  }

  .cat .card .wrapp {
    position: relative;
    display: grid;
    grid-gap: 20px;
    align-items: center;
    height: fit-content;
    padding: var(--padding);
    box-sizing: border-box;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    border-radius: 30px;
    background-color: var(--bg);
    box-shadow: 0 0 0 1px #ececec, inset 0 0 100px #00000021;
    transition: .25s box-shadow;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: 66px;
    }
  }

  .cat .card:nth-child(1),
  .cat .card:nth-child(4n + 4) {
    height: auto;
    grid-row: span 2;
  }

  .cat .card h2 {
    position: relative;
    z-index: 3;
    pointer-events: none;
    width: fit-content;
    padding-block: 8px 7px;
    line-height: .6;

    &>a {
      color: var(--title-color);
      pointer-events: auto;
    }
  }

  .cat .card {
    --stroke-color: #1a1f2b3b;
    --stroke-width: .33px;

    & .vars {
      --stroke-color: #1a1f2b3b;
      --stroke-width: 1px;
    }

    & :is(.vars, h2)>a {
      text-shadow: calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0 var(--stroke-color), calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0 var(--stroke-color), calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color), calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0 var(--stroke-color), calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0 var(--stroke-color), calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0 var(--stroke-color), calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color), calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0 var(--stroke-color), calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0 var(--stroke-color), calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0 var(--stroke-color), calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color), calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0 var(--stroke-color), calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0 var(--stroke-color), calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0 var(--stroke-color), calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color), calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0 var(--stroke-color);
    }
  }

  .cat .card.light {
    --stroke-color: #f1f1f1;
    --stroke-width: .33px;

    & .vars {
      --stroke-color: #f0f0f0;
      --stroke-width: 1px;
    }
  }

  .cat .card .vars {
    display: flex;
    gap: 10px;
    margin-block-start: -10px;
    padding-inline-start: 1px;

    &>a {
      font-weight: 500;
    }
  }



  .cat .card .services {
    display: flex;
    gap: 15px;
    flex-direction: column;
    max-width: 75%;
    list-style: none;
    padding-inline: 0;
    margin-left: -4px;
    margin-right: auto;
    margin-block: inherit;
    line-height: 1;

    & li>span {
      position: relative;
      display: inline-block;
      padding: 0 0 2.5px 5px;
      font-variant: all-small-caps;
      font-weight: lighter;
      color: var(--text-color);
      pointer-events: none;
      z-index: 2;
    }

    & li.hot>a .icon {
      color: var(--orange);
    }

    & li>.services {
      margin: auto 0 auto 11.5px;
      padding: 10px 10px 5px;
      gap: 10px;
      font-size: .9em;
      text-transform: lowercase;
      position: relative;
      max-width: 125%;

      &:before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: .5px;
        /* background: linear-gradient(to top, var(--title-color) 80%, transparent 90%, var(--title-color) 100%); */
        background: linear-gradient(to top, transparent 1px, var(--title-color) 2px, var(--title-color) 80%, transparent 90%, var(--title-color) 100%);
        border-bottom: 1px solid var(--title-color);
      }

      & a {
        gap: 3px;
      }
    }
  }

  .cat .card .services a {
    display: grid;
    grid-gap: 7px;
    align-items: center;
    justify-items: center;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    max-width: fit-content;
    position: relative;
    text-decoration: none;

    &:has(.icon):has(.name) {
      grid-auto-columns: 25px 1fr;
    }
  }

  .cat .card .services .icon {
    text-align: center;
    font-variant-emoji: text;
    color: var(--title-color);

    svg& {
      margin-bottom: -2px;
    }
  }

  .cat .card a.overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 3;
  }

  .cat .card :is(.vars, .services) a:not(.overlay) {
    z-index: 4;
    color: var(--text-color);
    width: fit-content;
  }

  .cat .card a.title:hover {
    color: var(--title-color);
  }

  .cat .card.light {
    --bg: #ffffff;
    --text-color: var(--dark);
    --title-color: var(--blue);
  }

  .cat .card.light:hover .wrapp {
    box-shadow: 0 0 0 .5px #c9c9c9, inset 0 0 100px #75757521;
  }

  .cat .card .services {
    --stroke-color: #1a1f2b3b;
    --stroke-width: 1px;

    & span.name {
      text-shadow: calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0 var(--stroke-color), calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0 var(--stroke-color), calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color), calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0 var(--stroke-color), calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0 var(--stroke-color), calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0 var(--stroke-color), calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color), calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0 var(--stroke-color), calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0 var(--stroke-color), calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0 var(--stroke-color), calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color), calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0 var(--stroke-color), calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0 var(--stroke-color), calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0 var(--stroke-color), calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color), calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0 var(--stroke-color);
    }

    & a:hover>span.name {
      text-shadow: none;
    }
  }

  .cat .card.light .services span.name {
    line-height: .75;
    --stroke-color: #f0f0f0;
  }

  .cat .card .services a:hover:before {
    content: "";
    position: absolute;
    left: -4px;
    right: -8px;
    top: -4px;
    bottom: -7px;
    border-radius: 10px;
    background-color: #a7a7a73d;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: -1;

    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: 50px;
    }
  }

  .cat .card.light .services a:hover:before {
    background: linear-gradient(to right, #a7a7a73d, #d5d5d5b3);
    background: linear-gradient(to right, #bce0ff7a, #d2dde69c);
  }

  .cat .card[data-image-position="center"] .image {
    justify-content: center;
  }

  /* CATEGORY CARDS */




  /* FEATURES */

  .features {
    display: grid;
    grid-gap: var(--padding);
    max-width: 1000px;

    overflow-anchor: none;
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;

    & .feature {
      display: grid;
      grid-template-columns: 1fr 1.618fr;
      align-items: center;
      gap: 20px;

      & .h2 a.contact {
        text-decoration: none;
        font-weight: 700;
        color: var(--blue);
      }

      & .benefits {
        display: grid;
        grid-template-columns: minmax(210px, 400px) minmax(250px, 400px);
        gap: var(--gap);
        margin-left: 0;

        & .benefit {
          display: flex;
          gap: 10px;
          align-items: flex-start;

          & .text {
            padding-block-start: 5px;

            & div:first-child {
              padding-block-start: 12px;
              line-height: .8;
              font-weight: 700;
              font-variant-caps: petite-caps;
            }

            & div:last-child {
              padding-block-start: 5px;
              line-height: 1;
            }
          }

          & .image img {
            height: 100%;
            border-radius: 22px;

            @supports (corner-shape: squircle) {
              corner-shape: squircle;
              border-radius: 50px;
            }
          }
        }
      }
    }
  }

  /* FEATURES */




  /* FOOTER */

  footer {
    grid-area: footer;
    position: relative;
    max-width: var(--max-res);
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-sizing: border-box;
    padding-top: 25px;
    padding-bottom: 85px;
    margin-top: auto;
    border-top: 10px dotted black;
  }

  footer .copyright {
    font-size: 0.75em;
  }

  footer .block {
    display: flex;
    gap: 8px;
    flex-direction: column;
  }

  footer .block h3 {
    margin: 0 0 .5em;
  }

  footer .wrapp {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
  }

  footer .block.contacts .contact {
    display: flex;
    gap: 5px;
  }

  footer .block.contacts .__social {
    justify-content: flex-start;
  }

  /* FOOTER */



  /* DIALOG */

  dialog {
    /* Сброс самого <dialog> */
    all: unset;
    display: block;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    /* Сброс для вложенных форменных элементов */
    & input,
    & textarea,
    & select,
    & button,
    & fieldset,
    & legend {
      margin: 0;
      padding: 0;
      border: none;
      box-sizing: border-box;
      font: inherit;
      color: inherit;
      line-height: normal;
    }

    /* Вернём минимальный базовый display */
    & input,
    & select,
    & textarea {
      display: inline-block;
      vertical-align: middle;
    }

    & button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    /* Удобный reset для <fieldset> и <legend> */
    & fieldset {
      border: none;
    }

    & legend {
      display: block;
      margin-bottom: 0.5em;
      font-weight: bold;
    }

    /* Сброс списка (например для <datalist> или <ul> внутри диалога) */
    & ul,
    & ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    /* Диалог на полный экран без учёта адресной панели браузера */
    @media (max-width: 1068px) {
      block-size: 100svh;
    }
  }

  /* Блокируем прокрутку, но без сдвига контента */
  html:has(> body > #ui > dialog[open]),
  html.menu-open {
    overflow: clip;

    /* Отключаем якорную привязку скролла */
    & body,
    main {
      overflow-anchor: none;
    }

    /* & .chat {
            content-visibility: hidden;
        } */
  }

  /* DIALOG */



  /* FORM */

  dialog[data-type="form"] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-items: center;
    align-items: center;
    height: 100%;
    min-height: 0;
    transition-behavior: allow-discrete;
    transition:
      transform .45s cubic-bezier(0.16, 0.53, 0.06, 1.22),
      opacity .25s,
      overlay .45s;
    opacity: 0;
    transform: translate3d(0, -50px, 0) scale3d(.85, .85, 1);
    will-change: transform;
    contain: layout style paint;
    isolation: isolate;
    z-index: 1;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    --parts-padding: 20px;

    &:not([open]) {
      pointer-events: none !important;

      & * {
        pointer-events: none !important;
      }

      & .wrapp {
        & .info {
          transform: translateY(-100px);
        }

        & form {
          transform: translateY(100px);
        }
      }
    }

    &::backdrop {
      opacity: 0;
      transition: opacity .35s;
      /* background: linear-gradient(252deg, #a7a7a73d, rgb(0 4 16 / 85%)); */
      background-color: rgb(0 4 16 / 40%);
      box-shadow: inset 0 0 250px #000410d9;
      backdrop-filter: blur(60px) saturate(1.8);
      -webkit-backdrop-filter: blur(60px) saturate(1.8);
      will-change: opacity, backdrop-filter;
      /* contain: layout style paint; */
      contain: paint;
      isolation: isolate;
    }

    &[open] {
      opacity: 1;
      transform: none;

      &::backdrop {
        opacity: 1;
      }

      & .parts {
        transform: none;
        opacity: 1;
      }
    }

    @starting-style {
      &[open] {
        opacity: 0;
        transform: translate3d(0, 50px, 0) scale3d(.85, .85, 1);

        &::backdrop {
          opacity: 0;
        }

        & .parts {
          transform: perspective(50px) translate3d(35px, 35px, 0) rotate3d(0, 0, 1, 7.5deg);
        }
      }
    }

    & .wrapp .close {
      position: absolute;
      top: .5rem;
      right: .5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 27px;
      aspect-ratio: 1 / 1;
      cursor: pointer;
      border-radius: 20px;
      background-color: #ececec21;
      z-index: 5;

      & svg {
        pointer-events: none;
        fill: white;
      }

      &:hover {
        transform: scale(1.05);
      }
    }

    & .wrapp-dialog {
      position: relative;
      display: flex;
      width: clamp(370px, 420px, 40vw);
      max-width: fit-content;
      margin: auto;
      pointer-events: none;
      min-height: 0;
      max-height: -webkit-fill-available;
      max-height: stretch;
      margin-block: 2vh;

      @media (min-width: 900px) {
        &:has(.parts:not(:empty)) {
          right: 90px;
        }
      }
    }

    & .parts {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      gap: 2px;
      padding: var(--parts-padding);
      inset: 2vh auto 2vh 100%;
      min-width: 180px;
      max-height: fit-content;
      min-height: 0;
      height: -webkit-fill-available;
      height: stretch;
      margin: 0 auto auto 3px;
      border-radius: 1rem;
      pointer-events: auto;
      transition: transform .45s .35s cubic-bezier(0.41, 0.4, 0.18, 1.25), opacity .45s .35s;
      transform: perspective(50px) translate3d(-50px, 0, 0) scale(.9);
      opacity: 0;
      contain: layout style paint;
      isolation: isolate;
      will-change: transform, opacity;
      z-index: -1;
      background: #ffffff1a;
      backdrop-filter: brightness(2) contrast(1);
      overflow-y: scroll;
      overflow-x: hidden;

      &::-webkit-scrollbar {
        width: 0;
      }

      &:before {
        content: "Эти детали подходят";
        font-size: 1.4em;
        line-height: 1;
        font-weight: 700;
        padding-block-end: 10px;
      }

      &[data-header]:before {
        content: attr(data-header);
      }

      &:empty {
        display: none;
      }

      & .head {
        width: 100%;
        padding-block: 10px 5px;
        font-size: .88em;
        line-height: 1;



        &:has(.icon) {
          display: flex;
          align-items: center;
          gap: 4px;
          height: fit-content;
        }
      }

      & .part {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 5px 10px 7px;
        border-radius: 10px;
        gap: 5px;
        font-size: .8em;
        font-weight: 500;
        line-height: 1.2;
        background-color: #83838314;
        height: fit-content;

        @media (scrollbar-width: thin) {
          overflow-y: auto;
          overflow-x: hidden;
          scrollbar-width: thin;
          scrollbar-color: rgb(0 0 0 / 20%) transparent;
        }

        & .name {
          text-wrap-style: balance;
          line-height: 1.1;
          font-weight: 200;

          &[data-count]:after {
            content: "x" attr(data-count);
            font-size: .85em;
            font-weight: 700;
            padding-inline-start: 3px;
          }
        }

        & .price {
          position: relative;
          text-wrap: nowrap;
          white-space: nowrap;
          margin: auto 0;

          &[data-old-price]:before {
            content: attr(data-old-price);
            position: absolute;
            inset: -16px 0 auto auto;
            padding: .1em .35em .2em;
            font-size: .8em;
            letter-spacing: 1px;
            text-decoration: line-through;
            border-radius: 3px;
            color: white;
            background-color: red;
            rotate: -4deg;
          }

          &:after {
            content: " ₽";
          }
        }
      }
    }

    & .wrapp-scroll {
      overflow: hidden;
      overflow-y: auto;
      min-height: 0;
      max-height: fit-content;
      border-radius: 2rem 1.2rem 2rem 2rem;
      pointer-events: auto;
      will-change: backdrop-filter;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      background-color: var(--dark);

      &::-webkit-scrollbar {
        width: 0;
      }
    }

    & .wrapp {
      position: relative;
      display: grid;
      grid-auto-rows: .1fr auto;
      grid-gap: 15px;
      width: 100%;
      padding: 25px;
      box-sizing: border-box;

      & .info {
        background: #ffffff0a;
        color: #fff;
        padding: 20px 25px 25px;
        margin: -25px -25px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-width: 0;
        z-index: 4;
        transition: transform cubic-bezier(0.41, 0.4, 0.08, 1.18) .5s;
        transform: perspective(70px);

        & .title {
          color: #fff;
          text-wrap-style: pretty;
          font-size: xx-large;

          &:empty {
            display: none;
          }

          &[data-cat] {
            padding-inline-end: 25px;

            &:before {
              content: attr(data-cat);
              font-size: initial;
              font-weight: 300;
              display: block;
              padding-inline-start: 1px;
              padding-block-end: 2.5px;
            }
          }
        }

        & .conditions {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
          box-sizing: border-box;
          font-weight: var(--font-thin);
          transition: opacity .15s;

          &:empty {
            display: none;
          }

          >li {
            padding: 2px 8px 5px;
            border-radius: 8px;
            background-color: #ffffff0f;
            white-space: nowrap;
            transition: background-color .15s;
            text-align: center;

            &[title] {
              cursor: help;
            }

            & * {
              display: inline;
            }

            &.price:before {
              content: "услуги → ";
              font-size: .8em;
            }

            &.price.with:before {
              content: "комплект → ";
            }

            &.price:after,
            &.out:after {
              content: " ₽";
              font-size: .8em;
            }

            &:hover {
              background-color: #b6b6b64a;
            }
          }
        }
      }

      & form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-width: 230px;
        margin: 0;
        /* transition: .3s; */
        transition: transform cubic-bezier(0.41, 0.4, 0.08, 1.18) .5s;
        transform: perspective(70px);
        --border-radius: 14px;

        & input:not([type="checkbox"]),
        & textarea {
          width: 100%;
          min-height: 50px;
          padding: .65em;
          font-weight: var(--font-thin);
          font-size: min(1.35em, 0.5em + 0.5vh + 0.5vw);
          line-height: 1;
          outline: none;
          border: none;
          background: none;
          color: white;
          box-shadow: inset 0 -1px #ffffff26;
          transition: .2s box-shadow, .25s min-height;
          will-change: box-shadow, min-height;

          &:-webkit-autofill,
          &:-webkit-autofill:hover,
          &:-webkit-autofill:focus {
            box-shadow: inset 0 0 0 1000px var(--dark), inset 0 -1px #ffffff26;
            -webkit-text-fill-color: var(--green) !important;
            caret-color: white;
            transition: background-color 5000s ease-in-out 0s;
            border-bottom: 1px solid var(--green);
          }

          &:-webkit-autofill:focus {
            box-shadow: inset 0 0 0 1000px var(--dark), inset 0 -2px #ffffff;
          }

          &:not(:hover) {
            transition: .25s min-height;
          }

          &::placeholder {
            color: #ffffff52;
            transition: .2s color;
          }

          &:hover {
            box-shadow: inset 0 -2px #ffffff52;

            &::placeholder {
              color: #ffffff8a;
            }
          }

          &:focus {
            box-shadow: inset 0 -2px white;

            &::placeholder {
              color: #ffffff1c;
            }
          }
        }

        & input[type="tel"] {
          margin-block: -15px;
        }

        & textarea[name="text"] {
          resize: vertical;
          min-height: 80px;
          max-height: clamp(75px, 650px, 35vh);
          line-height: 1.1;

          &:focus {
            min-height: 200px;
          }

          &::-webkit-scrollbar {
            width: 0;
          }
        }

        & input[name="phone"].invalid {
          box-shadow: 0 0 0 7px var(--orange);
        }

        & .agreement {
          display: flex;
          justify-content: center;
          align-items: flex-end;
          gap: 4px;
          margin-block: -10px;
          color: #ffffff;
          font-size: min(.8em, 4vw);
          font-weight: var(--font-thin);
          line-height: 1;
          letter-spacing: -.3px;
          transition: opacity .15s;
          will-change: opacity;

          & input {
            width: 9.5px;
            height: 9.5px;
            box-shadow: none;
          }

          & a {
            text-decoration: underline;
            color: #fff;
          }
        }

        & button {
          display: flex;
          align-items: center;
          justify-content: center;
          height: calc(2vh + 1vw);
          min-height: 70px;
          margin-block: 10px 0;
          font-size: calc(1.8em + .1vh + .1vw);
          border-radius: 23px;
          overflow: hidden;
          z-index: 1;
          transition: background-color .05s, transform 2s ease-in-out;
          will-change: transform, background-color;
          isolation: isolate;
          contain: layout style paint;

          --flyX: 300px;
          --flyY: -120px;

          --height-coeff: calc(var(--calculated-height) / 34);
          --scale: var(--height-coeff, 20);

          /* запасные параметры */
          --icon-scale: 12.5;
          --icon-size: calc(var(--scale) * var(--icon-scale) * 1px);

          /* 66% от ширины wrapp */
          --icon-size-calculated: calc(var(--calculated-width) * .66px);
          --icon-size-sent: var(--icon-size-calculated, --icon-size);

          &:is(:active, :hover) {
            transition-duration: .05s;
          }

          & .icon {
            width: 38px;
            height: 38px;
            transition: scale .3s, opacity .15s, width .3s, height .3s;
            will-change: scale, opacity, width, height;
          }

          & span {
            padding-bottom: calc(.1vh + .1vw);
            pointer-events: none;
          }

          @supports (corner-shape: squircle) {
            border-radius: 50px;
            corner-shape: squircle;
          }
        }
      }
    }

    &.send {
      pointer-events: none;

      & .wrapp-dialog .wrapp-scroll {
        overflow-y: clip;

        & .info {
          & .conditions {
            opacity: 0;
          }
        }

        & form {
          pointer-events: none;

          & button {
            transition: background-color .05s, transform .5s ease-in-out;
            transform: scale(var(--scale));

            & .icon {
              animation-name: dialog-form-plane-fly;
              animation-duration: 1.6s;
              animation-delay: .25s;
              animation-timing-function: cubic-bezier(0.69, -1.04, 0.11, 0.94);
              animation-play-state: running;
              animation-iteration-count: infinite;
              scale: .15;
            }

            & span {
              display: none;
            }
          }
        }
      }

      &.animation-stop {
        & .wrapp-dialog .wrapp-scroll form {
          & button {
            & .icon {
              animation-play-state: paused;
            }
          }
        }
      }

      &.sent {
        & .wrapp-dialog .wrapp-scroll form {
          & button {
            & .icon {
              animation-timing-function: cubic-bezier(0.73, 0.03, 0.6, 0.98);
              width: var(--icon-size-sent);
              height: var(--icon-size-sent);
              /* отступ 10% от высоты wrapp */
              padding-block-end: calc(var(--calculated-height, 400px) * .1px);
            }
          }
        }
      }

      &.error {
        & .wrapp-dialog .wrapp-scroll form {
          & button {
            transition: background-color .25s, transform .5s ease-in-out;
            background-color: var(--dark);
          }
        }
      }
    }

    @media (max-height: 660px) and (min-width: 750px) {
      &:not([open]) {
        & .wrapp {
          & .info {
            transform: translateX(-100px);
          }

          & form {
            transform: translateX(100px);
          }
        }
      }

      & .wrapp-dialog {
        width: fit-content !important;
        gap: 10px;

        & .wrapp-scroll {
          border-top-right-radius: 0.9rem;

          & .wrapp .close {
            top: .45rem;
            right: .45rem;
            height: 22px;
          }
        }
      }

      & .wrapp:not(:has(.title:empty, conditions:empty)) {
        grid-template-columns: max(400px, 25vw) 1fr;
        grid-auto-rows: auto;
        grid-gap: 25px;
      }

      & .wrapp .info {
        height: calc(100% + 5px);
        margin: -25px 0 -25px -25px;

        & .title {
          font-size: max(calc(2.5svh + 1.5svw), 2.2em);
        }
      }

      &.sent {
        & .wrapp-dialog .wrapp-scroll form {
          & button {
            & .icon {
              --icon-size-sent: calc(var(--icon-size-sent) * .5);
            }
          }
        }
      }
    }


    @media (max-width: 500px) {
      inset: auto 0 0 0;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 2rem 2rem 0 0;
      transform: translateY(150px);
    }
  }

  @keyframes dialog-form-plane-fly {

    0%,
    100% {
      transform: translate(0, 0);
    }

    /* улетели за пределы по вектору (--flyX, --flyY) */
    49.9% {
      transform: translate(var(--flyX), var(--flyY));
    }

    /* прыжок на встречный край кнопки по противоположному вектору */
    50% {
      transform: translate(calc(-1*var(--flyX)), calc(-1*var(--flyY)));
    }
  }

  /* FORM */



  /* ПРАЙС ЛИСТ */

  .price-list {
    height: min-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    /* content-visibility: auto;
    contain-intrinsic-size: auto 300px; */
    contain: style layout;
    isolation: isolate;
    z-index: 1;

    & .dashed-blue.to-site {
      display: none;
    }

    & .tip {
      padding: 0 10px 5px;
      font-size: .75em;
      font-variant: petite-caps;
      line-height: 1;
      letter-spacing: .2px;

      & b {
        color: var(--orange);
      }
    }
  }

  .price-list table {
    position: relative;
    table-layout: auto;
    border-spacing: 1px;
    min-width: 666px;
    max-width: var(--wide);

    --headBorderRadius: 7.5px;
    --rowBorderRadius: 8px;
    --hoverBorderRadius: 14px;
  }

  .price-list .table-wrapp.scroll {
    padding: 20px 0 20px 13px;
    overflow: auto;
  }

  .price-list .table-wrapp.scroll table {
    width: calc(100% - 4px);
  }

  .price-list table thead tr {
    height: auto;
  }

  /* .price-list table :is(td, th) {
    pointer-events: none;
} */

  .price-list table th {
    position: relative;
    background: var(--dark);
    color: white;
    align-content: baseline;
    padding: 6px 12px 9px;
    font-size: 1.1em;
  }

  .price-list table tr:first-child :is(td, th):only-child {
    border: none;
  }

  .price-list table th:first-child {
    text-align: left;
    border-radius: var(--rowBorderRadius) 0 0 var(--rowBorderRadius);
  }

  .price-list table th:last-child {
    border-radius: 0 var(--rowBorderRadius) var(--rowBorderRadius) 0;

    &:before {
      content: "";
      position: absolute;
      inset: 0 auto 0 -1px;
      width: 1px;
      background-color: var(--dark);
    }
  }

  .price-list table th:empty:before {
    content: '. . .';
    font-size: small;
  }

  .price-list table th div {
    display: inline-flex;
    font-size: .75em;
    font-weight: var(--font-thin);
    font-variant: petite-caps;
    color: var(--green);
    float: right;
    padding: 3px 0 0 12px;
  }

  .price-list table tr.header {
    position: relative;
    height: auto;
    line-height: 1;
  }

  .price-list table tr:not(.header) {
    & td {
      position: relative;
      height: inherit;
      padding: 12px;
      background-color: white;

      &:not(:first-child):last-child {
        border-left: 1px solid #ececec;
      }
    }
  }

  .price-list table col:nth-child(n + 2) {
    width: min(15%, 60%);
  }

  .price-list table td:nth-child(n + 2) {
    text-align: center;
    white-space: nowrap;
  }

  .price-list table tr:not(.header):nth-child(even) td {
    background-color: #f9f9f9;
  }

  .price-list .service {
    display: block;
    padding-inline-end: 30px;
    font-weight: 700;
    font-size: 1.15em;
  }

  .price-list a {
    text-decoration: none;
  }

  .price-list .related {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }

  .price-list .related>* {
    font-size: .8em;
  }

  .price-list .description {
    font-size: .9em;
  }

  .price-list .wrapp {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .price-list .wrapp .price {
    font-weight: 700;
    font-size: 1.1em;
    position: relative;
  }

  .price-list .wrapp .old-price {
    color: red;
    font-size: .7em;
    font-weight: 900;
    text-decoration: line-through;
  }

  .price-list .wrapp .conditions .out-of-center {
    color: var(--blue);
    position: absolute;
    inset: 4px 4px auto auto;
  }

  .price-list .wrapp .conditions .remote {
    color: var(--blue);
    position: absolute;
    inset: 1px 20px auto auto;
    rotate: -20deg;

    @media (max-width: 500px) {
      top: 2px;
      right: 16px;
    }
  }

  .price-list .wrapp .conditions {
    display: flex;
    gap: 5px;
    justify-content: space-around;
    font-size: .8em;
    width: fit-content;
    margin: auto;

    @media (min-width: 500px) {
      & .time[data-depth] {
        font-size: .75em;
        line-height: 1;

        &[data-depth="3"] {
          text-wrap-mode: wrap;
          text-wrap-style: pretty;
        }
      }
    }
  }

  .price-list .price:not(:empty):after {
    content: "₽";
    font-size: .66em;
    font-weight: initial;
    padding-left: 2px;
  }

  .price-list .related *:not(:last-child):after {
    content: "";
    margin: 0 3px 2px 6px;
    width: 3px;
    height: 3px;
    background: #b9b9b9;
    border-radius: 10px;
    display: inline-block;
  }

  .price-list .related:empty {
    display: none;
  }

  .price-list .related:before {
    content: "обычно связано:";
    font-size: .8em;
    font-weight: var(--font-thin);
    display: inline-block;
    /*inline*/
  }

  /* .price-list table tr:has(+ tr.header) td {
    border-bottom-color: white;
} */

  .price-list table tr.header td {
    background-color: var(--dark);
    padding: 4px 12px 7px;
    border-radius: var(--headBorderRadius);
    /* border-bottom: 1px solid white; */
  }

  .price-list table tr.header h4 {
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: 900;
    font-size: 1.2em;
    color: white;

    & svg.icon {
      color: var(--green);
      fill: var(--green);
      margin-inline-end: 7px;
      /* margin-block-end: -1px; */
      margin-block: 2px auto;
    }
  }

  .price-list table tr.header .desc {
    margin-block-start: 5.5px;
    margin-inline-start: .15px;
    color: white;
    font-size: .7em;
    font-weight: 300;

    @media (max-width: 750px) {
      max-width: 80%;
    }
  }

  .price-list table .actions {
    position: absolute;
    left: calc(100% + 1px);
    top: 0;
    height: fit-content;
    width: max-content;
    min-width: 160px;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 6px;
    padding: 12px;
    margin: auto;
    background: var(--dark);
    color: white;
    /* border-radius: 29px 29px 18px 18px; */
    border-radius: var(--topBorderRadius) var(--topBorderRadius) var(--bottomBorderRadius) var(--bottomBorderRadius);
    white-space: normal;
    z-index: 2;
    transform: translateY(15px);
    /* transform: translateX(-15px); */
    opacity: 0;
    visibility: hidden;
    transition: .1s .15s;
    transition-property: visibility, opacity, transform;
    will-change: transform, opacity, visibility;
    contain: layout style;
    isolation: isolate;

    --bottomBorderRadius: calc(var(--hoverBorderRadius) - 2px);
    --topBorderRadius: var(--hoverBorderRadius);
  }

  /* херобора, чтобы можно было плавно перевести мышь к actions от строки */
  .price-list table .actions:before {
    content: "";
    position: absolute;
    top: 0;
    left: -3px;
    height: 100%;
    min-height: 65px;
    width: 3px;
  }

  .price-list table :is(tr:hover, tr.header, thead) ::selection {
    background-color: #fff;
    color: #000;
  }

  .price-list table tr:hover .service:before {
    visibility: visible;
    transition-delay: 0s;
  }

  .price-list table .actions button {
    margin: -3px -3px auto;
    border-radius: 9px;
  }

  .price-list table .actions .additionally,
  .price-list table .actions .additionally .data {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .9em;

    & .name {
      text-wrap-mode: wrap;
      text-wrap-style: balance;
      /* line-break: anywhere; */
    }
  }

  .price-list table .actions .additionally .data {
    max-height: 22svh;
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-block: 2px;
    margin-block: -2px;
    padding-inline-end: 3.5px;
    margin-inline-end: -7px;

    &::-webkit-scrollbar {
      width: 3.5px;
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #ffffff48;
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: white;
    }
  }

  .price-list table .actions .line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.1;
  }

  .price-list table .actions .additionally>.head {
    font-size: .82em;
    font-weight: var(--font-thin);
    font-variant: petite-caps;
    color: var(--green);
    line-height: 1.1;

    &::after {
      content: "акутуально на " attr(data-actual-date);
      display: block;
      font-size: .7em;
      font-variant: none;
      letter-spacing: .5px;
      color: #ffffffab;
    }
  }

  .price-list table .actions .additionally .data .head {
    font-weight: 700;
    line-height: 1;

    &:has(.icon) {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }

  .price-list table .actions.mini {
    border-radius: var(--topBorderRadius) var(--bottomBorderRadius) var(--bottomBorderRadius) var(--topBorderRadius);
    padding: 9px;
    bottom: 0;
    --bottomBorderRadius: calc(var(--hoverBorderRadius) + 4px);
  }

  .price-list table .actions.mini button {
    margin: 0;
  }

  .price-list table .actions .additionally {
    transition: cubic-bezier(0.25, 0.1, 0.42, 1.5) .5s;
    transform: translateY(25px);
  }

  .price-list table tr {

    .actions,
    .actions :is(button, .additionally) {
      transition: .27s .15s;
      transition-property: visibility, opacity, transform;
    }

    /* Кнопка при нажатии — везде */
    .actions button:active {
      transform: translateY(3px) scale(.98) !important;
      transition: .05s;
    }

    /* Десктоп */
    @media (any-hover: hover) {
      &:hover {

        .actions,
        .actions :is(button, .additionally) {
          opacity: 1;
          transform: none;
          visibility: visible;
        }
      }

      &:hover,
      &.highlighted {
        &:not(.header) {
          td {
            background: var(--dark);
            color: #fff;

            &:first-child {
              border-radius: var(--hoverBorderRadius) 0 0 var(--hoverBorderRadius);
            }

            &:last-child {
              border-radius: 0 var(--hoverBorderRadius) var(--hoverBorderRadius) 0;
            }

            &:first-child:last-child {
              border-radius: var(--hoverBorderRadius);
            }

            .related *:not(:last-child):after {
              background: #ffe800;
            }

            & a,
            & .remote,
            & .out-of-center {
              color: var(--green) !important;
            }
          }
        }
      }

      .actions:hover {
        opacity: 1;
        transform: none;
        visibility: visible;

        :is(button, .additionally) {
          opacity: 1;
          transform: none;
          visibility: visible;
        }
      }
    }

    /* Мобильные */
    @media (any-hover: none) {
      &.active {

        .actions,
        .actions :is(button, .additionally) {
          opacity: 1;
          transform: none;
          visibility: visible;
        }
      }

      &.active,
      &.highlighted {
        &:not(.header) {
          td {
            background: var(--dark);
            color: #fff;

            &:first-child {
              border-radius: var(--hoverBorderRadius) 0 0 var(--hoverBorderRadius);
            }

            &:last-child {
              border-radius: 0 var(--hoverBorderRadius) var(--hoverBorderRadius) 0;
            }

            .related *:not(:last-child):after {
              background: #ffe800;
            }

            & a,
            & .remote,
            & .out-of-center {
              color: var(--green) !important;
            }
          }
        }
      }
    }
  }

  .price-list table td a:hover {
    text-decoration: underline;
  }

  .price-list table tr:not(.header).hit .service:after {
    content: "🔥хит";
    position: absolute;
    right: 5px;
    top: 4px;
    font-size: .66em;
    font-variant-emoji: text;
    color: var(--orange);
  }

  .price-list .expander {
    width: fit-content;
    margin: auto;
    cursor: pointer;
  }

  @-moz-document url-prefix() {

    .price-list {
      height: 100%;
    }
  }

  body:not(:has(> #app)) .price-list {
    /* align-items: center;
    margin: auto;
    padding: var(--gap);
    content-visibility: initial; */

    width: fit-content;
    max-width: var(--wide);
    margin: auto;
    padding: var(--pad) var(--pad) 35vh;
    --pad: calc(var(--padding) / 2);

    & table {
      max-width: none;
    }

    & header.orange {
      @media (min-width: 750px) {
        max-width: var(--wide);
      }

      @media (max-width: 750px) {
        padding: var(--pad) var(--pad) 0;
      }
    }

    & .dashed-blue.to-price {
      display: none;
    }

    & .dashed-blue.to-site {
      display: inline-block;

      & svg {
        rotate: 180deg;
      }
    }
  }

  /* ПРАЙС ЛИСТ */



  /* RELATION */

  .relation {
    display: flex;
    gap: 15px;
    align-items: center;
    contain: layout style;

    & :is(h2, h3) {
      color: #707070;
      text-align: right;
      font-weight: var(--font-thin);

      &:after {
        content: " →";
        text-wrap: nowrap;
        white-space: nowrap;
      }
    }

    @media (min-width: 700px) {
      & #services ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px 25px;
      }
    }
  }

  /* RELATION */



  /* HUB */

  .hub {
    display: flex;
    flex-direction: column;
    gap: 3.5vh;
    margin-block: -7vh auto;
    contain: layout;

    .hub-card {
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    &[mode="hub"] {
      display: grid;
      grid-template-columns: 1fr 1fr;

      & .cards {
        gap: 7.5px;
      }
    }

    .cards {
      display: grid;
      justify-items: start;
      gap: 25px;

      [mode="hub"] & {
        grid-template-columns: repeat(auto-fill, minmax(333px, 1fr));
      }

      [mode="cat"] & {
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
      }

      .col {
        display: flex;
        gap: 25px;
        flex-direction: column;
      }

      .group {
        display: grid;
        align-content: start;
        gap: 25px;

        &:not(:last-child) {
          margin-block-end: 25px;
        }

        h2.card-name {
          font-size: 1.8em;
        }
      }

      .card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: fit-content;
        padding-block-end: 4px;

        &:has(a.overlay) {
          &::before {
            content: "";
            position: absolute;
            inset: -10px -5px;
            border-radius: 10px;
            box-shadow: inset 0 0 0 .5px #f2f2f2, 0 0 30px #e9e9e9;
            pointer-events: none;
            transition: opacity .15s;
            transform: rotate(0.01deg);
            opacity: 0;
            z-index: -1;
          }

          &:hover {

            &::before,
            & .icon-action {
              opacity: 1;
              transform: none;
            }
          }
        }

        a.overlay {
          position: absolute;
          inset: -10px;
          z-index: 2;
        }

        .icon-action {
          position: absolute;
          inset: 0 0 auto auto;
          color: var(--blue);
          transition: opacity .25s, transform .35s cubic-bezier(0.25, 0.1, 0, 1.4) .15s;
          opacity: 0;
        }

        header {
          display: flex;
          align-items: baseline;
          gap: 5px;
          line-height: 1;
          /* font-size: 1.15em; */
          font-weight: 700;
          font-variant-caps: petite-caps;

          span {
            width: 30px;
            text-align: center;
          }

          h3 {
            margin: 0;
          }
        }

        .chips {
          display: flex;
          flex-wrap: wrap;
          font-size: .75em;
          gap: 0 10px;
          margin-inline: 1em;

          &::before {
            content: "теги →";
            font-weight: bolder;
          }

          :has(header)>& {
            margin-inline: 35px 0;

            &::before {
              display: none;
            }
          }
        }

        .recommend {
          display: flex;
          gap: 10px;

          h4 {
            margin: 0 0 .5em;
            line-height: 1;
            font-size: 1.55em;
            font-weight: 700;
            font-variant-caps: petite-caps;
          }

          section {
            padding: 15px;
            border-radius: 22px;

            @supports (corner-shape: squircle) {
              corner-shape: squircle;
              border-radius: 33px;
            }

            &:first-child {
              background-color: var(--dark);
              color: white;
            }

            &:last-child {
              background-color: var(--green);

              ul {
                list-style: bengali;
              }
            }

            ul {
              list-style: cambodian;
              padding-inline-start: 40px;

              li {
                margin-block-start: 5px;
              }

              li div:last-child {
                font-size: .85em;

                &::before {
                  content: "→ ";
                  font-size: .75em;
                }
              }
            }
          }
        }

        .services {
          display: flex;
          flex-direction: column;
          gap: 10px;

          h2 {
            width: fit-content;
            margin: 10px 10px auto;
            text-align: right;
            font-weight: var(--font-thin);
            font-variant-caps: petite-caps;
            line-height: .8;
            color: gray;
          }

          .wrap {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(333px, 1fr));
            justify-items: start;
            gap: 10px;

            .col {
              display: flex;
              flex-direction: column;
              gap: 10px;
            }

            h4 {
              margin: 0;
              font-size: 1.25em;
              font-weight: 600;
              font-variant-caps: petite-caps;
              line-height: .8;
            }

            section {
              display: flex;
              flex-direction: column;
              gap: 10px;
              height: fit-content;
              width: 100%;
              width: -webkit-fill-available;
              width: stretch;
              padding: 10px 15px 12.5px;
              border-radius: 12px;
              transition: background-color .15s;

              &,
              &:first-child {
                background-color: var(--wheat);
              }

              @supports (order: sibling-index()) {
                background-color: oklch(from var(--wheat) l c calc(h + (sibling-index() - 1) * 52));
              }

              @supports (corner-shape: squircle) {
                corner-shape: squircle;
                border-radius: 22px;
              }

              .rels {
                margin: 0;
                list-style: square;
                padding-inline-start: 16px;
                color: var(--blue);
              }

              .desc {
                line-height: 1.2;
                font-size: .85em;

                &::first-letter {
                  text-transform: uppercase;
                }
              }
            }
          }
        }
      }
    }
  }

  /* HUB */



  /* ВЬЮВЕР zoomable-изображений */

  .zoomable img {
    cursor: zoom-in;
  }

  .zoom-viewer {
    position: fixed;
    inset: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    cursor: zoom-out;
    color: white;
    /* background: linear-gradient(252deg, #a7a7a73d, rgb(0 4 16 / 85%)); */
    background-color: rgb(0 4 16 / 40%);
    box-shadow: inset 0 0 250px #000410d9;
    backdrop-filter: blur(60px) saturate(1.8);
    -webkit-backdrop-filter: blur(60px) saturate(1.8);
    opacity: 0;
    visibility: hidden;
    transition: opacity, visibility;
    transition-duration: .15s;
    will-change: opacity, backdrop-filter;
    contain: layout style paint;
    isolation: isolate;
    z-index: 9999;

    /* фикс против прыжков при появлении/скрытии баров */
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    place-items: center;
    /* по умолчанию блокируем все панорамирования/зума */
    touch-action: none;
    overscroll-behavior: none;

    & .text {
      position: absolute;
      left: 10px;
      bottom: 10px;
      padding: 10px 15px 15px;
      max-width: calc(20vh + 20vw);
      display: flex;
      flex-direction: column;
      gap: 10px;
      line-height: 1;
      background-color: var(--dark);
      border-radius: 16px;
      z-index: 1;

      &:has(.desc:empty):has(.title:empty) {
        display: none;
      }

      & .desc {
        margin-bottom: auto;
        font-size: .8em;

        &:empty {
          display: none;
        }
      }

      & .title {
        font-weight: bold;
        margin: 0;

        &:empty {
          display: none;
        }
      }

      @media (pointer: coarse) {
        inset: 10px auto auto 10px;
      }
    }

    & a {
      position: fixed;
      inset: 10px 10px auto auto;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1;
      height: 40px;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 50px;
      background-color: var(--dark);
      color: white;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      pointer-events: auto;

      &:is(:hover, .hover) {
        background-color: var(--blue);
      }
    }

    &:has(img:not(.loaded)) {
      grid-auto-rows: min-content;
    }

    & .controls {
      position: absolute;
      inset: 0;
      pointer-events: none;

      &:has(.prev[data-count='0']):has(.next[data-count='0']) {
        display: none;
      }

      & .button {
        position: absolute;
        top: calc(50% - var(--height) / 2);
        height: var(--height);
        width: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--dark);
        color: white;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        pointer-events: auto;
        z-index: 1;
        border-radius: var(--borderRadius);
        transition: background-color .15s, transform .1s;

        --height: max(100px, 10vh);
        --borderRadius: 40px;
        --margin: 0px;
        --shift: 5px;

        &.prev {
          left: var(--margin);
          transition: transform .1s;

          --borderRadius: 0 40px 40px 0;
          --transform: calc(var(--shift) * -1);

          &.end .icon {
            transform: rotate(230deg);
          }

          &:after {
            display: none;
          }
        }

        &.next {
          right: var(--margin);

          --borderRadius: 40px 0 0 40px;
          --transform: var(--shift);

          &:not(.end):active .icon {
            transform: rotate(180deg) translateX(calc(var(--shift) * -1));
          }

          & .icon {
            transform: rotate(180deg);
          }

          &.end .icon {
            transform: rotate(310deg);
          }

          &:before {
            display: none;
          }
        }

        &:is(:hover, .hover) {
          background-color: var(--blue);
        }

        &:active {
          transform: scale(.98) translateX(var(--transform));

          &:not(.end) {
            & .icon {
              transform: translateX(var(--transform));
            }

            &:after,
            &:before {
              transform: translateX(calc(var(--transform) * 3));
            }
          }
        }

        &:after,
        &:before {
          content: attr(data-count);
          font-size: .55em;
          font-weight: 500;
          transition: transform .25s;
        }

        &.end {
          cursor: not-allowed;
          background-color: var(--gray-dark);
          color: var(--dark);
          transform: none !important;
        }

        & .icon {
          transition: transform .25s, color .25s;
        }

        @media (min-width: 1400px) {
          --borderRadius: 40px !important;
          --margin: 20px;
        }

        @media (max-width: 750px) {
          --borderRadius: 40px !important;
          --margin: 20px;
          top: calc(80% - var(--height) / 2);
          width: 15%;
        }
      }
    }

    &.visible {
      opacity: 1;
      visibility: visible;
      transition-duration: .35s;
    }

    & .zoom-img {
      max-width: 93%;
      max-height: 93%;
      min-height: 0;
      min-width: 0;
      margin: auto;
      border-radius: calc(1vw + 1vh);
      transform-origin: center center;
      transition: transform var(--transitionRubber) 0.45s, opacity .3s;
      transform: scale(0.97);
      opacity: 0;
      will-change: transform, opacity;

      &.no-transition {
        transition: none;
      }

      &.loaded {
        transform: none;
        opacity: 1;
      }

      @media (max-width: 750px) {
        max-width: 98%;
        max-height: 98%;
      }
    }

    & .loader {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      margin: -20px 0 0 -20px;
      border: 4px solid white;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin .8s linear infinite;
      transition: scale .15s;

      &.hide {
        animation: none;
        transform: scale(0);
      }
    }
  }

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

  html:has(.zoom-viewer.visible) {
    overflow: clip;
  }

  /* ВЬЮВЕР zoomable-изображений */

  /* ЧАТ */

  .chat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 35px;
    max-width: var(--chat-width);

    content-visibility: auto;
    contain-intrinsic-size: auto var(--chat-height);

    & .orange :is(h1, h2, h3) span {
      position: relative;

      &.main:after {
        content: " → не ИИ!";
        font-size: 30%;
        font-weight: normal;
        font-variant: petite-caps;
      }
    }

    /* служебные состояния */
    & .dashed-blue.to-site {
      display: none
    }

    &.sending {
      pointer-events: none;

      & * {
        pointer-events: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
      }
    }

    /* фильтр «только мои» */
    &[onlymy] .wrapp-scroll .wrapp-messages .thread {
      display: none;

      &:has(.message[owner="me"]) {
        display: flex
      }
    }

    /* каркас */
    &>.wrapp {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 35px;
    }

    /* область прокрутки */
    & .wrapp-scroll {
      position: relative;
      max-height: var(--chat-height);
      height: inherit;
      text-align: left;
      transition: transform .3s, opacity .3s;
      overflow-x: hidden;
      overflow-y: scroll;
      scroll-behavior: smooth;
      background:
        linear-gradient(white 30%, rgba(255, 255, 255, 0)),
        linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 10%), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 10%), rgba(0, 0, 0, 0)) 0 100%;
      background-repeat: no-repeat;
      background-color: white;
      background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
      background-attachment: local, local, scroll, scroll;
      /* will-change: opacity, transform; */

      /* contain: layout style paint; */
      contain: content;
      overflow-anchor: auto;
      isolation: isolate;

      &:has(.wrapp-messages:empty) {
        display: none
      }

      /* список тредов и сообщений */
      & .wrapp-messages {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* padding-inline: 10px 20px; */
        padding-inline: 10px;
        box-sizing: border-box;

        & .thread {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding-inline: 15px 20px;
          box-sizing: border-box;

          content-visibility: auto;
          contain-intrinsic-size: auto 250px;

          &:not(:last-child) {
            padding-bottom: 20px;
            border-bottom: 10px dotted #f2f2f2;
          }

          &:target {
            padding-inline-start: 7vw;
          }

          &:target:before {
            content: "";
            position: absolute;
            inset: -10px auto 10px 7vw;
            margin-left: -40px;
            z-index: -1;
            border-left: 10px dotted rgb(134 134 134 / 11%);
          }

          /* &:has(.message.no-render) {
                        height: 0;
                        padding: 0;
                        border: none;
                    } */
        }

        /* сообщения */
        & .messages {
          display: contents;

          /* сообщения одного типа в одном треде БЛИЖЕ друг к другу */
          & .message[data-type="A"]+.message[data-type="A"],
          & .message[data-type="Q"]+.message[data-type="Q"] {
            margin-top: -8px;
          }

          /* отображать хвостики только у последних сообщений одного типа */
          & .message[data-type="Q"]:has(+ .message[data-type="Q"])::before,
          & .message[data-type="A"]:has(+ .message[data-type="A"])::before {
            display: none;
          }

          & .message {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: var(--chat-message-padding);
            min-width: 45px;
            min-height: 21.34px;
            max-width: min(75%, 50vw);
            border: 0 solid transparent;
            border-radius: var(--chat-message-radius);
            white-space: normal;
            text-align: left;
            margin: auto auto auto 0;
            box-sizing: border-box;
            background-color: var(--chat-q-bg);
            transition: transform cubic-bezier(.25, .1, 0, 1.25) .5s, opacity .35s, background-color .15s;
            z-index: 1;

            contain: layout style;
            contain-intrinsic-size: auto 60px;

            @supports (corner-shape: squircle) {
              border-radius: 32px;
              corner-shape: squircle;
            }

            /* хвостик */
            &::before {
              content: "";
              position: absolute;
              bottom: 0;
              left: calc(100% - 20px);
              height: 40px;
              width: 30px;
              border-color: var(--chat-a-bg);
              border-radius: 50% 50% 50% 50%;
              border-style: solid;
              border-width: 0 20px;
              clip: rect(20px, 35px, 42px, 0);
              transition: transform .15s, border-color .15s;
              z-index: -1;

              pointer-events: none;
              contain: strict;
            }

            /* состояния */
            &.highlighted {
              transform: scale(1.02) translate(10px, 10px);
              color: white;
              z-index: 2;

              --chat-q-bg: var(--blue);
              --chat-a-bg: var(--blue);

              &[data-type="A"] {
                transform: scale(1.02) translate(-10px, 10px);
              }

              &:before {
                display: none;
              }
            }

            &.no-render {
              height: 0;
              min-height: 0;
              padding: 0;

              & *,
              &::before,
              &::after {
                display: none !important;
              }
            }

            &.hidden {
              opacity: 0;
              transform: translateX(-120px) scale(.95);
              transition-delay: .25s;

              &[data-type="Q"] {
                transform: translateX(120px) scale(.95)
              }
            }

            /* типы сообщений */
            &[data-type="A"] {
              background-color: var(--chat-a-bg);
              color: white;
              margin: auto 0 auto auto;

              ::selection {
                background-color: white;
                color: #000
              }
            }

            &[data-type="Q"]:before {
              left: auto;
              right: calc(100% - 20px);
              border-color: var(--chat-q-bg);
              clip: rect(20px, 70px, 42px, 35px);
            }

            /* элементы внутри сообщения */
            & .content {
              white-space: break-spaces;
              overflow-wrap: anywhere;
            }

            & a {
              color: var(--green);
              transition: color .3s
            }

            &[data-type="Q"] a {
              color: var(--blue);
            }

            &[owner="me"] .user-info .avatar {
              pointer-events: auto;
              cursor: pointer;
              transition: border-radius .15s ease-out, corner-shape .15s ease-out;
              transform-origin: center;

              &:hover {
                transform: scale(1.03);
              }

              &:active {
                transform: scale(.98);
                transition: transform .1s
              }

              &.loading {
                border-radius: 48px;
                animation: chat_avatar_rotate .5s infinite ease-out;

                @supports (corner-shape: squircle) {
                  corner-shape: initial;
                }
              }
            }

            & .user-info {
              display: flex;
              gap: 10px;

              & figcaption {
                display: flex;
                flex-direction: column;

                & .name {
                  width: fit-content;
                  font-weight: 700;

                  &[data-type]::after {
                    color: var(--orange)
                  }

                  &:empty::after {
                    content: "здесь могло быть имя";
                    font-weight: 400;
                    font-size: .8em;
                    text-transform: uppercase;
                    color: var(--gray-dark);
                  }
                }

                & .sub {
                  font-size: .66em
                }

                & .sub time {
                  content: attr(data-created);
                  opacity: .66;
                  transition: .3s, .3s .1s opacity
                }

                & .sub .role {
                  content: attr(data-type);
                  color: var(--green);
                  padding-inline-start: 4px
                }
              }

              & .avatar {
                object-fit: cover;
                border-radius: 14px;
                pointer-events: none;

                @supports (corner-shape: squircle) {
                  border-radius: 18px;
                  corner-shape: squircle;
                }
              }
            }

            &[data-type="Q"] .user-info {
              & figcaption {
                & .sub .role {
                  color: var(--blue);
                }
              }
            }

            &:has(.content:empty) .attachments {
              &:not(:has(.attachment:nth-child(2))) {
                --chat-thumb: auto;
              }
            }

            & .attachments {
              display: grid;
              gap: var(--chat-attach-gap);
              grid-template-columns: repeat(var(--columns-repeat), var(--chat-thumb-size));
              grid-auto-rows: var(--chat-thumb-size);
              grid-auto-flow: dense;
              user-select: none;
              -webkit-user-select: none;

              --chat-thumb-size: minmax(70px, var(--chat-thumb));
              --columns-repeat: auto-fit;

              &:empty {
                display: none;
              }

              & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 14px;

                @supports (corner-shape: squircle) {
                  border-radius: 18px;
                  corner-shape: squircle;
                }
              }

              &:has(.attachment:nth-child(2)) {
                --columns-repeat: 2;
              }

              &:has(.attachment:nth-child(3)) {
                --columns-repeat: 3;
              }

              &:has(.attachment:nth-child(4)) {
                --columns-repeat: 2;
              }

              &:has(.attachment:nth-child(5)) {
                --columns-repeat: 3;
              }
            }

            @media (max-width: 750px) {
              max-width: 95%;
              --chat-thumb: 25vw;

              & .attachments {
                &:not(:has(.attachment:nth-child(2))) {
                  --chat-thumb: auto;
                }
              }
            }
          }
        }
      }
    }

    /* шапка формы */
    & .header {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px 30px;
      /* padding: 10px; */
      /* padding-inline: 10px; */
      /* padding-inline-end: 5px; */
      box-sizing: border-box;
      contain: content;
      isolation: isolate;

      --header-outline-color: var(--blue);

      /* поле сообщения */
      & .wrapp-message {
        position: relative;
        width: 100%;
        max-width: 666px;

        & .contenteditable-fix {
          width: 100%;

          & .message {
            margin: 0;
            padding: 11px 76px 14px 14px;
            min-height: 42px;
            box-sizing: border-box;
            outline: none;
            border-radius: var(--chat-message-radius);
            white-space: normal;
            cursor: pointer;

            --saturate-dark: 2;
            --shadow-offset-y: -.5px;
            --shadow-offset-x: 0px;
            --shadow-offset-y-top: .5px;
            --shadow-offset-x-top: 1px;
            --bg-color: var(--gray);
            --opacity: 85%;

            --saturate-dark: .25;
            --saturate-light: 0;
            --bg-color: var(--blue-ultra-light);

            @supports (corner-shape: squircle) {
              border-radius: 32px;
              corner-shape: squircle;
            }

            &:empty:after {
              content: "Подробно Опишите проблему*";
              transition: .25s;
              color: var(--blue);
              color: var(--gray-dark);
              text-transform: uppercase;
              font-size: .9em;
              font-weight: var(--font-thin);
            }

            &:empty:focus:after {
              opacity: .25
            }

            /* &:before {
                        border-color: var(--dark)
                    } */
          }
        }

        /* &:after {
                content: '?';
                position: absolute;
                top: -30px;
                left: 0;
                text-align: center;
                transform: rotate(333deg);
                transform-origin: bottom;
                line-height: 1;
                font-size: 3em;
                z-index: -1;
            } */

        /* кнопка выбора файлов */
        & .files {
          position: absolute;
          right: 42px;
          bottom: 12.5px;
          width: 20px;
          min-width: 20px;
          height: 20px;
          overflow: hidden;

          &:active {
            transform: translateY(3px) scale(.99);
            transition: .2s
          }

          & .icon {
            position: absolute;
            inset: 0;
            margin: auto;
            fill: var(--blue)
          }

          & input {
            position: absolute;
            inset: 0;
            opacity: 0;
            height: 100%;
            width: 100%;
            cursor: pointer;
            z-index: 1;
          }

          &:has(input:focus-visible) {
            outline: 2px dashed var(--header-outline-color);
            border-radius: 4px
          }
        }

        /* кнопка отправки */
        & .send {
          position: absolute;
          right: 8px;
          bottom: 8px;
          color: #fff;
          cursor: pointer;
          line-height: 1.8;
          border-radius: 50px;
          text-align: center;
          transition: transform .3s, background-color .3s;
          width: 30px;
          min-width: 30px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0;
          margin: auto;
          min-height: auto;
          outline: none;
          border: none;

          &::before {
            content: "";
            position: absolute;
            inset: var(--chat-progress-inset);
            border-radius: 50%;
            background:
              conic-gradient(var(--chat-progress-color) calc(var(--chat-upload-progress) * 1%), var(--chat-progress-bg) 0);
            mask-image: radial-gradient(circle at center, transparent calc(100% - var(--chat-progress-size)), black calc(100% - var(--chat-progress-size)));
            -webkit-mask-image: radial-gradient(circle at center, transparent calc(100% - var(--chat-progress-size)), black calc(100% - var(--chat-progress-size)));
            pointer-events: none;
            transition: background .3s, transform .3s, opacity .3s;
            transform: scale(.8);
            opacity: 0;
          }

          & .icon {
            pointer-events: none;
            fill: white;
            transition: opacity .15s .15s, transform .25s cubic-bezier(.69, -1.04, .11, .94);
            will-change: opacity, transform
          }

          &:active {
            transform: translateY(3px) scale(.99);
            transition: .2s
          }

          &:focus-visible {
            outline: 2px dashed var(--header-outline-color);
            outline-offset: 2px;
            border-radius: 60px
          }

          &[upload] {
            transform: scale(.75);
            pointer-events: none;

            & .icon {
              transform: translateY(-20px);
              opacity: 0
            }

            &::before {
              opacity: 1;
              transform: none;
              transition: background .3s, transform .3s, opacity .1s
            }
          }

          &[upload="success"] {
            --bg-color: var(--green-dark);
            transform: scale(.65);

            &::before {
              --chat-progress-color: var(--green-dark)
            }
          }

          &[upload="error"] {
            --bg-color: red;
            transform: scale(.65);

            &::before {
              --chat-progress-color: red
            }
          }

          &.error {
            background: red;
            --bg-color: red
          }
        }
      }

      /* превью файлов */
      & .wrapp-files {
        flex: 1 100%;
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(70px, var(--chat-header-thumb)));
        grid-auto-rows: minmax(70px, var(--chat-header-thumb));
        grid-auto-flow: dense;
        user-select: none;
        -webkit-user-select: none;

        &:empty {
          display: none
        }

        & .thumb {
          position: relative;

          & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 14px;
            aspect-ratio: 1 / 1
          }

          & button.delete {
            position: absolute;
            top: -5px;
            right: -5px;
            inline-size: 40px;
            block-size: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            cursor: pointer;
            z-index: 1;
            transition: transform .15s;
            transform: scale(.9999999);

            &:hover .icon {
              fill: red;
            }

            @media (pointer: fine) {
              &:hover .icon {
                transform: scale(1.1)
              }

              &:active .icon {
                transform: scale(.9);
                transition-duration: .05s
              }
            }

            & .icon {
              width: 12px;
              min-width: 12px;
              height: 12px;
              padding: 4px;
              background-color: white;
              border-radius: 20px;

              & use {
                pointer-events: none
              }
            }
          }
        }
      }

      & .wrapp-adv {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: auto 0;
        max-height: max-content;

        & input {
          position: relative;
          min-height: 25.33px;
          /* min-width: 120px; */
          width: fit-content;
          padding: 0 12px 2px;
          field-sizing: content;
          font-size: .85em;
          text-align: center;
          border-radius: 8px;
          /* background-color: var(--bg-color);
                box-shadow: inset 0 0 0 50px var(--bg-color); */
          cursor: pointer;
          outline: none;
          border: none;

          --bg-color: var(--blue-ultra-light);

          /* --shadow-offset-y: -.3px;
                --shadow-offset-x: -.3px;
                --shadow-offset-y-top: 0;
                --shadow-offset-x-top: 0; */

          --shadow-offset-y: -.3px;
          --shadow-offset-x: 0px;
          --shadow-offset-y-top: .3px;
          --shadow-offset-x-top: 1px;

          --rotate: 218deg;
          --opacity: 85%;
          --saturate-dark: 5;
          --shadow-blur: 35px;

          &:placeholder-shown {
            font-size: .66em;
            font-weight: 500;

            &.name {
              max-width: 60px;
            }
          }

          &:not(:placeholder-shown) {
            min-width: 30px;
          }

          &:placeholder-shown::-webkit-input-placeholder {
            color: var(--blue)
          }

          &:focus {
            user-select: auto;
            -webkit-user-select: auto
          }

          &:focus::placeholder {
            opacity: .2;
            transition: opacity .3s
          }
        }

        & .toggle {
          display: flex;
          cursor: pointer;
          align-items: center;
          user-select: none;
          -webkit-user-select: none;

          --toggle-padding: 2px;
          --toggle-width: 64px;
          --slider-translate: calc(var(--slider-width) - var(--toggle-width) + var(--toggle-padding) * 2);
          --slider-width: 37px;
          --slider-bg-color: #dbdde0;
          --slider-color: #fff;
          --slider-label-color: #fff;

          & label {
            width: min-content;
            font-size: .66em;
            line-height: .7;
            cursor: pointer;
            text-align: left;
            padding-left: 5px;
            padding-bottom: 3px
          }

          &:hover .wrapp::after {
            transition: .3s cubic-bezier(.25, .1, 0, 1.22);
          }

          & .wrapp {
            display: flex;
            align-items: center;
            outline: none;
            gap: 20px;
            box-sizing: border-box;
            position: relative;
            background-color: var(--slider-bg-color);
            border-radius: 60px;
            min-width: var(--toggle-width);
            width: var(--toggle-width);
            height: 26px;
            overflow: hidden;
            touch-action: pan-x;
            cursor: pointer;
            border: var(--toggle-padding) solid transparent;

            & input {
              width: 100%;
              height: 100%;
              margin: auto;
              position: relative;
              z-index: 1;
              opacity: 0;
              pointer-events: none;
            }

            &::after {
              content: '';
              position: absolute;
              inset: var(--toggle-padding);
              inset: 0;
              left: auto;
              margin: auto;
              width: var(--slider-width);
              border-radius: 60px;
              background-color: var(--slider-color);
              transform: translateX(var(--slider-translate));
            }

            &:has(input:focus-visible)::after {
              box-shadow: inset 0 0 0 1px var(--blue);
            }

            &:has(input:checked) {
              --slider-bg-color: var(--green-dark);

              &::after {
                transform: none;
              }
            }

            &:active {
              &::after {
                transition: transform .3s .05s;
                transform: translateX(calc(var(--slider-translate) / 1.5));
              }

              &:has(input:checked)::after {
                transform: translateX(calc(var(--slider-translate) / 3));
              }
            }

            @media (max-width: 500px) {
              &::after {
                transition: .15s;
              }

              &:active::after {
                transition: .15s .05s;
              }
            }
          }
        }

        @media (max-width: 500px) {
          display: grid;
          grid-template-columns: 1fr 1fr max-content;
          justify-content: space-between;
          grid-gap: 5px;
          width: 100%;

          &:not(:has(input.name:placeholder-shown)) {
            grid-template-columns: 1fr .7fr max-content;
          }

          &:not(:has(input.email:placeholder-shown)) {
            grid-template-columns: .7fr 1fr max-content;
          }

          & input {
            width: auto;
            min-width: auto;
          }
        }
      }
    }
  }

  @keyframes chat_avatar_rotate {
    0% {
      transform: scale(1) rotate(0deg);
    }

    50% {
      transform: scale(0.7) rotate(36deg);
    }

    100% {
      transform: scale(1) rotate(360deg);
    }
  }

  body:not(:has(> #app)) .chat {
    margin: auto;
    padding: var(--pad);
    --pad: calc(var(--padding) / 2);

    & header.orange {
      @media (min-width: 750px) {
        max-width: var(--wide);
      }

      @media (max-width: 750px) {
        padding: var(--pad) var(--pad) 0;
      }
    }

    /* & .header {
        padding-inline: 5px;
        margin-inline: -5px;
    } */

    & .dashed-blue.to-chat {
      display: none;
    }

    & .dashed-blue.to-site {
      display: inline-block;

      & svg {
        rotate: 180deg;
      }
    }

    & .wrapp-scroll {
      overflow: initial;
      min-height: initial;
      max-height: initial;
      height: inherit;
      padding-inline: 5px;
      padding-block-end: 150px;
      margin: auto -15px;
      background: none;

      & .wrapp-messages {
        padding-inline: 10px;
      }
    }

    @media (max-width: 750px) {
      max-width: none;
      padding: 0;
      content-visibility: inherit;

      & .header {
        position: fixed;
        inset: auto 0 0;
        margin: auto auto 0;
        padding: var(--pad);
        max-width: 850px;
        max-height: 100dvh;
        align-content: center;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(to top, #000000d9 30%, #000000e3);
        backdrop-filter: blur(15px) saturate(1.8);
        -webkit-backdrop-filter: blur(15px) saturate(1.8);
        z-index: 1;

        min-height: 0 !important;
        transition: min-height .3s ease-in-out;

        --header-outline-color: white;

        &:has(input:focus),
        &:has([contenteditable]:focus) {
          inset: 0;
          min-height: 100svh !important;
        }

        & .wrapp-message {
          display: flex;
          gap: 5px;
          align-items: center;
          width: 100%;

          & .message {
            width: 100%;
            padding: 4px 10px 7px;
            min-height: auto;
            max-height: 33.67px;
            overflow-x: hidden;
            overflow-y: scroll;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;

            /* border: 1px solid var(--gray); */
            --bg-color: white;

            &::-webkit-scrollbar {
              width: 0;
            }

            &:focus {
              max-height: 35svh;
            }

            &::after {
              color: var(--gray-dark);
            }
          }

          & .files {
            position: relative;
            inset: auto;

            & .icon {
              fill: white;
            }
          }

          & .send {
            position: relative;
            inset: auto;

            &:hover,
            &:active {
              transition: none;
              transform: none;
            }
          }
        }

        & .wrapp-files {
          grid-auto-flow: column;
          grid-auto-rows: auto;
          --chat-header-thumb: 65px;

          &:has(.thumb:nth-child(5)) {
            grid-template-columns: auto;
          }

          & .thumb .icon {
            transition: none;
          }
        }

        & .wrapp-adv {
          & .toggle {
            & .wrapp {
              &:has(input:not(:checked)) {
                --slider-color: #333333;
                --slider-bg-color: #595959;
              }
            }

            & label {
              color: var(--gray-dark);
            }
          }
        }

        & input {
          width: auto;
          min-width: auto;
          max-width: 90px;
          color: white;
          --bg-color: #ffffff12;

          &::placeholder {
            color: var(--gray-dark) !important;
          }

          &::-webkit-input-placeholder {
            color: var(--gray-dark) !important;
          }

          &::-moz-placeholder {
            color: var(--gray-dark) !important;
          }

          &::-ms-input-placeholder {
            color: var(--gray-dark) !important;
          }
        }
      }

      & .wrapp-scroll {
        content-visibility: auto;
        contain-intrinsic-size: auto var(--chat-height);
        margin: auto;
      }
    }
  }

  @keyframes losaving {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  /* ЧАТ */



  /* UI:::NOTIFIER */

  #ui .notify-container {
    position: fixed;
    inset: auto 20px 0 auto;
    max-width: max(15vw, 300px);
    max-height: calc(100% - 50px);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    padding-block: 25px;
    contain: layout;
    z-index: 100;

    --offset: -25px;

    &::-webkit-scrollbar {
      display: none;
    }

    &:hover {
      overflow-y: scroll;

      & .notify:not(:first-child) {
        margin-bottom: calc(var(--offset) * -.2);
        transition-delay: 0s;
      }
    }

    & .notify {
      max-width: fit-content;
      max-height: 600px;
      border-radius: 18px;
      font-size: .88em;
      line-height: 1.2;
      pointer-events: auto;
      cursor: pointer;
      will-change: transform, opacity;

      color: var(--dark);
      --rotate: 200deg;
      --bg-color: #ebebeb;

      transition:
        transform .3s,
        opacity .3s,
        margin .3s,
        max-height .3s;

      &.deleting {
        opacity: 0;
        margin-block: calc(var(--offset) * .2);
        transform: scale(.8);
        max-height: 0;

        &:first-child {
          margin-block-end: calc(var(--offset) * -.2);
        }
      }

      @starting-style {
        opacity: 0;
        grid-template-rows: 0fr;
        transform: translateX(40px);
      }

      & .wrapp {
        display: grid;
        align-items: center;
        grid-template-rows: .1fr;
        grid-template-columns: 1fr auto;
        gap: calc(var(--padding) / 2.5);
        padding: calc(var(--padding) / 1.5) calc(var(--padding) / 2);
        box-sizing: border-box;
        min-height: 0;
        overflow: hidden;
        pointer-events: none;

        & span {
          pointer-events: none;
          text-wrap-style: balance;
          overflow-wrap: anywhere;
          white-space: pre-wrap;
        }

        & .icon {
          min-height: 0;
          max-height: 35px;
          max-width: 35px;
          width: min-content;
        }
      }

      &:not(:first-child) {
        margin-bottom: var(--offset);
      }

      &.success {
        --bg-color: #26a269;
        color: white;
      }

      &.info {
        --bg-color: var(--blue);
        color: white;
      }

      &.error {
        --bg-color: var(--orange-bright);
        color: white;
      }
    }

    @media (pointer: coarse) {
      inset: 0 20px auto auto;
      max-width: max(35vw, 400px);
      zoom: 0.6;
    }
  }

  /* UI:::NOTIFIER */



  /* TABS v2 */

  app[name=tabs] {
    max-width: fit-content;
    --app-tab-sticky: 68px;

    & tabs {
      display: flex;
      gap: 3px;
      overflow: hidden;
      user-select: none;
      -webkit-user-select: none;
      font-size: .88em;
      margin-inline: 0;
      padding-block: 0 7px;
      overflow: auto hidden;
      white-space: nowrap;
      scroll-behavior: smooth;
      scrollbar-gutter: stable;
      scroll-snap-type: x mandatory;

      &:has(tab[active] a[href='/contact']) .icon:has([href='#icon-star_filled']) {
        animation: tabs-icon-jump 1s 2s cubic-bezier(0.53, 0, 0.1, 1.99);
        animation-iteration-count: 1;
      }
    }

    & tabs tab {
      display: flex;
      flex-direction: column;
      cursor: pointer;
      scroll-snap-align: start;

      &:after {
        content: "";
        display: block;
        height: 4px;
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: var(--dark);
        border-radius: 4px;
        margin-block-end: -2px;
        pointer-events: none;
        transition: background-color .15s, transform .15s;
        will-change: background-color, transform;
      }

      &[active] {
        & a {
          color: var(--blue);
        }

        & .icon {
          fill: var(--blue);
        }

        &:after {
          background-color: var(--blue);
        }
      }

      &:hover {
        & a {
          color: var(--blue-bright);
        }

        & .icon {
          fill: var(--blue-bright);
        }

        &:after {
          background-color: var(--blue-bright);
          transform: scaleX(.95);
        }
      }

      &:active:after {
        transform: scale(.9);
      }
    }

    & tabs tab a {
      position: relative;
      display: flex;
      gap: 5px;
      padding: 3px 5px 5px;
      margin: auto 2px 1px;
      text-decoration: none;
      color: var(--dark);

      &:after {
        content: "";
        position: absolute;
        inset: 0 0 -5px 0;
      }
    }

    &.sticky {
      position: sticky;
      top: var(--app-tab-sticky);
      z-index: 10;

      & tabs {
        & a {
          background: linear-gradient(to right, #ffffffeb 10%, #ffffffc9 15%);
          backdrop-filter: blur(5px) saturate(2.8);
          -webkit-backdrop-filter: blur(5px) saturate(2.8);
          box-shadow: 0 0 0 1px #e4e4e4, inset 0 0 3px #00000012;
          border-radius: 3px 3px 8px 8px;

          &:after {
            inset: -5px 0 0 0;
          }
        }

        & tab {
          flex-direction: column-reverse;

          & .icon {
            color: var(--dark);
          }
        }

        & tab:after {
          margin-block: 0;
        }
      }
    }
  }

  @keyframes tabs-icon-jump {
    0% {
      transform: none;
    }

    50% {
      transform: translateY(12px) rotate(-30deg);
    }

    100% {
      transform: none;
      fill: var(--orange);
    }

  }

  /* TABS */



  /* ПРОГРЕВ GPU \ ПРЕРЕНДЕР */

  gpu-preheat.backdrop-filter {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(var(--gpu-preheat-blur-max));
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }

  /* ПРОГРЕВ GPU \ ПРЕРЕНДЕР */

  /* ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ */

  theme-toggle {
    position: fixed;
    inset: auto 7.5px 7.5px auto;
    display: flex;
    justify-content: center;
    cursor: pointer;
    width: var(--size);
    height: var(--size);
    z-index: 10;

    isolation: isolate;
    contain: layout style paint;

    --size: 18px;

    & svg {
      position: absolute;
      width: var(--size);
      height: var(--size);
      opacity: 0;
      transform: scale(0) rotate(75deg);
      transition: opacity .25s, transform .25s;
    }

    &:hover {
      & svg {
        fill: var(--blue-bright);
      }
    }

    html[data-theme="auto"] & svg:has([href="#icon-theme-auto"]),
    theme-toggle.theme-auto & svg:has([href="#icon-theme-auto"]) {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    html[data-theme="light"] & svg:has([href="#icon-theme-light"]),
    theme-toggle.theme-light & svg:has([href="#icon-theme-light"]) {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    html[data-theme="dark"] & svg:has([href="#icon-theme-dark"]),
    theme-toggle.theme-dark & svg:has([href="#icon-theme-dark"]) {
      opacity: 1;
      transform: scale(1) rotate(0deg);

      theme-toggle:hover & {
        fill: var(--green);
      }
    }
  }

  /* ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ */



  /* СТИЛИ ДЛЯ ОПРЕДЕЛЁННЫХ СТРАНИЦ */

  #app.🧬know {
    & .headers {
      h1 {
        grid-area: head;
      }

      & .warranty {
        display: none;
      }
    }
  }

  #app.🐈contact {
    --contact-gap: calc(var(--gap) / 2);

    & .headers {
      /* grid-template-areas:
            "head head"
            "bread bread"
            "before before"; */

      h1 {
        grid-area: head;
      }

      & .warranty {
        display: none;
      }
    }

    & header .buttons a.button {
      opacity: .3;
      pointer-events: none;
    }

    & .banners {
      display: flex;
      gap: var(--contact-gap);
      flex-direction: column;
    }

    & .banner {
      display: grid;
      grid-template-columns: auto 190px;
      grid-template-rows: min-content;
      width: min-content;
      position: relative;
      border-radius: 24px;
      background-color: #fdeaac;
      overflow: hidden;
      align-items: center;

      & picture {
        display: block;
        width: 100%;
        height: 100%;
      }

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      &>.title {
        padding: 15px;
        padding-inline-end: 5px;
        margin-bottom: auto;
        z-index: 1;

        & p {
          margin: .5em auto 0;
          line-height: 1;
          font-size: .9em;
          opacity: .6;
        }

        & b {
          font-size: 1.4em;
        }

        & h2 {
          line-height: .8;
        }

        & h3 {
          margin: .5rem auto;
        }

        &:not(:has(h2)) h3 {
          margin: 0 auto;
          line-height: 1.2;
        }

        & h4 {
          line-height: 1;
        }
      }

      &.vertical {
        grid-template-columns: auto;
        grid-template-rows: auto 220px;

        & .title {
          padding: 15px;
          padding-block-end: 5px;
          margin-bottom: auto;
        }
      }

      &.fullscreen img {
        position: absolute;
        inset: 0;
      }

      &.white-title {

        & .title :is(h2, h3, h4),
        & .title p {
          color: white;
        }
      }
    }

    & #warranty {
      max-width: 650px;
    }

    & #promotions .wrapp {
      display: flex;
      gap: var(--contact-gap);
      flex-wrap: wrap;

      & .promo-group {
        display: flex;
        flex-direction: column;
        gap: var(--contact-gap);
      }

      & .cards {
        display: flex;
        gap: var(--contact-gap);
        flex-wrap: wrap;

        & .banner {
          grid-template-columns: clamp(160px, 180px, 10vw) 140px;

          &.three-devices {
            background-color: #017ccc;
          }

          &.repeated-visits {
            background-color: #fbe515;
          }

          &.software-on-upgrade {
            background-color: #fab510;
          }

          &.upgrade {
            background-color: #603c62;
          }

          &.cleaning {
            background-color: #ffd320;
          }

          &.cleaning-imac {
            background-color: #233d30;
          }

          &.cleaning-macbook {
            background-color: #d38823;
          }

          &.cleaning-notebook {
            background-color: #5f2028;
          }

          &.more-programs {
            background-color: #165b1c;
          }

          &.more-devices {
            background-color: #0e4646;
          }

          &.glass-gift {
            background-color: #6d7e03;
          }

          &.data-store {
            background-color: #feac00;
          }
        }
      }
    }

    & #delivery {
      max-width: fit-content;

      &>section {
        display: flex;
        gap: var(--gap);
      }

      & .wrapp {
        display: grid;
        gap: var(--contact-gap);
        grid-template-areas:
          "moscow mkad"
          "russia russia";
        max-width: 600px;
        height: min-content;

        & .moscow {
          grid-area: moscow;
        }

        & .mkad {
          grid-area: mkad;
        }

        & .russia {
          grid-area: russia;

          & h3 {
            margin-block-start: 0;
          }
        }

        dl {

          .gift .icon {
            fill: var(--orange);
          }

          & dd {
            text-wrap: nowrap;
            white-space: nowrap;
          }
        }
      }

      & .free-by-count {
        background-color: #007acc;
      }

      & .free-by-service {
        background-color: #ffb211;
      }
    }

    & #contact {
      display: flex;
      flex-direction: column;
      gap: var(--contact-gap);
      max-width: 800px;

      &>section.contacts {
        display: flex;
        flex-direction: column;
        gap: var(--contact-gap);

        & .yamap {
          overflow: clip;
          width: 100%;
          height: 450px;
          object-fit: cover;
          border-radius: 24px;
          box-shadow: 0 0 0 .5px #c9c9c9;

          & iframe {
            width: 100%;
            height: 100%;
            border: none;
          }

          @supports (corner-shape: squircle) {
            corner-shape: squircle;
            border-radius: 30px;
          }
        }

        & .__social {
          display: inline-flex;
          gap: 3px;
          --ico-size: 23px;

          &>a {
            aspect-ratio: auto;
          }
        }

        & .payment {
          & .icon {
            width: 15px;
            height: 15px;
            object-fit: cover;
            fill: var(--orange);
          }

          & span {
            display: inline-flex;
            align-items: center;
            gap: 2px;
          }
        }

        #location {
          display: flex;
          gap: var(--contact-gap);
          align-items: center;
          /* width: fit-content; */
          justify-content: space-between;

          & .route {
            display: flex;
            gap: 15px;
            align-items: center;

            & :is(h2, h3) {
              color: #707070;
              width: min-content;
              font-weight: var(--font-thin);
              font-variant-caps: petite-caps;

              &:after {
                content: " →";
                text-wrap: nowrap;
                white-space: nowrap;
              }
            }
          }
        }
      }

      &>section.photo-route {
        display: flex;
        flex-direction: column;

        & .wrapp {
          display: grid;
          grid-gap: var(--contact-gap);
          grid-template-columns: repeat(auto-fit, minmax(200px, .5fr));
          grid-auto-flow: dense;

          & figure {
            position: relative;
            height: 100%;
            display: grid;
            grid-template-rows: 1fr auto;
            border-radius: 20px;
            transition: .25s;

            & img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 20px;
            }

            & figcaption {
              padding: 5px;
              font-weight: 300;
              font-size: .88em;
            }

            &:nth-child(n+2):nth-child(-n+9):after {
              content: "→";
              position: absolute;
              top: 20px;
              left: -20px;
              color: var(--gray-dark);
            }
          }
        }
      }
    }

    & dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 15px 0;
      max-width: fit-content;

      &:last-child {
        margin-block-end: 0;
      }

      & i {
        font-size: .8em;
      }

      & :is(dt, dd) {
        border-bottom: 1px solid var(--gray);
        margin: 0;
        padding-block-end: 5px;

        & time {
          font-weight: 700;
        }

        &.last {
          border-bottom: none;
          padding-block-end: 0;
        }
      }

      & dt {
        font-weight: 300;
        font-size: 1.1em;
      }

      & dd {
        padding-inline-start: 35px;
      }
    }
  }

  /* СТИЛИ ДЛЯ ОПРЕДЕЛЁННЫХ СТРАНИЦ */



  /* ПОДДЕРЖКА */

  html[data-os="MacOS"] {
    --font-thin: 200;

    main {

      & .intro .rels {
        height: 100%;

        & h2 {
          font-weight: 300;
        }

        & .items {
          height: 100%;

          & .item .name:after {
            top: -8px;
          }
        }
      }

      &>header {
        & .contacts {
          & .telephone {
            max-height: 38px;
          }
        }
      }
    }
  }

  html[data-os="MacOS"][data-browser="Safari"] {}

  html[data-os="iOS"] {}

  /* ПОДДЕРЖКА */



  /* HTML data-system="loaded" */

  html:not([data-system="loaded"]).menu-expanded {
    & #menu .wrapp {
      max-width: 50vw;
      transition: 0s;
    }
  }

  html.first-run {
    --nav-min-width: 500px;
  }

  /* html:not([data-system="loaded"]) {
    & #menu[hovered] .wrapp {
        max-width: 50vw;
        transition: 0s;
    }
} */

  /* HTML data-system="loaded" */



  /* Анимации, перезагрузки */

  /* @keyframes target {
    0% {
        opacity: 1;
        transform: scale(.95) translateY(2%);
    }

    100% {
        opacity: .88;
        transform: scale(1) translateY(0);
    }
} */

  /* .waves {
    --size: 50px;
    --b: 5px;
    --p: 25px;
    --R: calc(55.9px + var(--b)/2);

    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
    -webkit-mask:
        radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)),
        radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g)) 50% calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b));
    background: linear-gradient(90deg, #fffcca, #e6f7ff);
} */

  /** :target применяется к элементу, когда его ID соответствует части URL после знака «#» */
  /* :target {
    animation: target 1500ms ease-in-out;
}
@keyframes target {
    0% {
        box-shadow: 0 0 0 20px #fff, 0 0 0 21px #bfbfbf;
    }

    0%, 100% {
        border-radius: 25px;
    }

    50%, 85% {
        transform: scale(1.02) translateY(-5px);
    }

    100% {
        transform: none;
        box-shadow: 0 0 0 20px #fff, 0 0 0 21px #fff;
    }
} */

  /** тёмная тема */
  /* @media (prefers-color-scheme: dark) {

} */

  /* .reload {
        interactivity: inert;

        &::before {
            content: "";
            position: absolute;
            inset: -20px;
            border-radius: calc(1vw + 1vh);
            background: linear-gradient(90deg, rgb(0 48 255 / 9%) 0%, rgb(254 255 0 / 10%) 50%, rgb(0 255 10 / 7%) 100%);
            background-size: 200% 100%;
            animation: reloadShimmer 1.5s infinite;
            z-index: 10;
        }

        @media (prefers-reduced-motion: reduce) {
            &::before {
                animation: none;
            }
        }
    }

    @keyframes reloadShimmer {
        to {
            background-position: -200% 0;
        }
    } */

  /* Анимации, перезагрузки */

  @media (min-width: 1300px) {
    html {

      & #app {
        zoom: 1.15;
      }
    }
  }

  /** для больших экранов */
  @media (min-width: 1500px) {

    :root {
      --gap: 60px;
      --max-res: 1100px;
    }

    html {
      & #app {
        zoom: 1.25;
      }

      & dialog {
        zoom: 1.1;
      }
    }

    #menu .navigation {
      font-size: max(1em, 1.5vh, .7vw);
    }
  }

  @media (min-width: 1850px) {
    html {
      & #app {
        zoom: 1.35;
      }
    }
  }

  @media (max-width: 1500px) {

    main {
      --gap-main: max(calc(var(--gap) * 1.6), 12vh) var(--gap);

      /* & .intro {
            .rels .wrapp {
                flex-direction: column;

                & h2 {
                    width: auto;
                    margin: 0;

                    &:after {
                        content: " ↓";
                    }
                }
            }
        } */
    }
  }

  /* @media (max-width: 1280px) and (min-width: 700px) {

    main {

        & .intro {
            grid-template-columns: max(250px, 10.5vw) 1fr;

            & #services {
                grid-column-end: 2 span;

                & ul {
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 0 15px;
                    padding: 10px 15px;
                }
            }
        }
    }
} */


  @media (max-width: 1260px) and (min-width: 500px) {
    html {
      zoom: .86;
    }

    :root {
      --gap: 40px;
    }

    main {
      --gap: 20px;
    }
  }

  @media (max-width: 1160px) {
    main {
      &>header {
        & .contacts {
          & .telephone {
            font-size: 2em;
          }
        }
      }
    }
  }

  @media (max-width: 1100px) {
    html {
      zoom: normal;
    }

    #app {
      display: block;
    }

    #menu {
      & .wrapp {
        inset: auto 2px 2px 2px;
        max-width: min-content;
        height: calc(100dvh - 4px);
        margin: auto;
        box-sizing: border-box;
        transform: translateY(calc(100% - 42.5px));
        transition: transform .35s, background-color .25s .15s, max-width cubic-bezier(0.41, 0.4, 0.08, 1.18) .5s .35s;

        & .navigation {
          padding: 0;

          &::-webkit-scrollbar {
            width: 0;
          }

          & ul,
          & ol {
            &::-webkit-scrollbar {
              background-color: transparent;
              height: 3px;
            }

            &::-webkit-scrollbar-thumb {
              background-color: #ffffff48;
            }

            &:not(:last-child):has(li:nth-child(2)) {
              overflow-x: scroll;
              scroll-padding-inline: 2px;
              scroll-snap-type: x mandatory;
              scroll-behavior: smooth;
            }

            & li {
              &.header {
                left: 0;
                position: sticky;
              }

              & a {
                width: auto;

                &:first-child {
                  position: sticky;
                  left: 0;
                }
              }
            }
          }
        }
      }
    }

    html.menu-open {
      pointer-events: none;
      touch-action: none;
      overflow: clip;

      #menu {
        pointer-events: auto;
        touch-action: auto;

        & .wrapp {
          transform: none;
          --nav-max-width: calc(100% - 4px);
        }
      }
    }

    main {
      & .relation {
        flex-direction: column;

        & :is(h2, h3) {
          &:after {
            content: " ↓";
          }
        }
      }

      & .cat {
        flex-direction: column;

        & .column {
          & .card {
            width: 100%;
            width: -webkit-fill-available;
            width: stretch;

            &[data-image-position="center"] .image {
              justify-content: flex-end;
            }

            & .wrapp {
              height: 100%;
              grid-template-rows: min-content min-content auto;

              &:not(:has(.vars)) {
                grid-template-rows: min-content auto;
              }

              & .services {
                max-width: none;
                margin-block: auto 0;
                padding-block-start: 15px;
              }
            }
          }
        }
      }
    }

    .price-list {
      & table {
        & tbody {
          & tr:last-child {
            & .actions {
              top: auto;
              bottom: 100%;
            }
          }
        }

        & .actions {
          top: 100%;
          left: auto;
          right: 0;
          margin-block-start: 1px;

          &::before {
            display: none;
          }
        }
      }
    }

    footer {
      margin-top: 65px;
    }
  }

  @media (max-width: 1100px) and (min-width: 900px) {
    main {
      & .cat {
        & .column {
          flex-direction: row;

          & .card {
            &[data-image-position="center"] .image {
              justify-content: flex-end;
            }
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    :root {
      --wide: none;
    }
  }

  @media (max-width: 950px) {

    main {

      & .intro {
        grid-template-areas:
          "left"
          "right";
        grid-template-columns: auto;
        margin: -5vh 0 0 0;

        &:has(.right):has(.bottom) {
          grid-template-areas:
            "left"
            "right"
            "bottom";
        }

        & .rels:not(.horizontal) {
          & .items {
            & .item {
              text-align: left;
              margin-block-start: 0;

              &:not(:has(picture)) {
                &:has(.icon) .header {
                  line-height: .8;
                  margin-block-end: 5px;

                  & .name {
                    white-space: initial;
                  }
                }
              }

              & .name:after {
                line-height: 0;
              }
            }
          }

          & .items:has(.item:nth-child(5)),
          & .items:has(.group) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22.5px;
          }
        }

        & .images[aria-label]:before {
          display: none;
        }
      }
    }
  }

  @media (max-width: 950px) and (min-width: 500px) {

    main {
      & .intro {
        & .images {
          flex-direction: row;
          --rotate: -2.5deg;

          &:not(:has(figure:nth-child(2))) {
            --rotate: -.5deg;
          }

          & .card {
            max-height: 200px;
            margin-inline: 10px 5px;

            --k: 1.04;

            &:not(:first-child, :last-child) {
              margin: auto calc(var(--compression) * -2);
            }

            &:not(:first-child):nth-child(2):last-child {
              margin-top: inherit;
              margin-left: -10%;
            }
          }
        }
      }
    }
  }

  @media (max-width: 900px) {
    main {
      --gap-main: max(6vh, 76.6px);

      &>header {
        inset: 4px 0 auto;
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 4px 0;
        padding: 4px;
        margin: -10px -6px auto;
        border-radius: 15px 15px 19px 19px;

        & .logo {
          position: absolute;

          & img {
            width: 50px;
            rotate: 180deg;
            margin-top: 75px;
            margin-left: 10px;
          }

          &>span {
            display: none;
          }
        }

        & .contacts {
          grid-area: contacts;
          font-size: 1.1em;
          width: 100%;
          width: -webkit-fill-available;
          width: stretch;
          gap: 4px;


          & .telephone {
            gap: .75vw;
            padding-inline: 8px;
            height: var(--height);
            max-height: var(--height);
            box-sizing: border-box;
            font-size: 1.15em;
            border-radius: 11px;
            color: var(--green);
            --bg-color: var(--dark);
            --shadow-offset-y-top: .5px;

            & svg.icon {
              display: block;
              padding-inline-end: 4px;
            }
          }

          & .__social {
            display: flex;
            gap: 4px;
            --ico-size: var(--height);

            & a {
              border-radius: 11px;

              &.vk {
                display: none;
              }
            }
          }

          & .contact {
            display: flex;
          }
        }

        & .buttons {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 4px;

          & .links {
            display: none;
          }
        }
      }

      & .headers {
        margin-block-start: auto;
        gap: 5px;

        & .warranty {
          height: fit-content;
          padding: 5px 1px;
          margin: auto calc(var(--padding) * -1) auto auto;
          rotate: none;
          font-size: .7em;
          writing-mode: vertical-rl;
          border-radius: 12px 0 0 12px;
          z-index: 1;
        }
      }

      & .package {
        &>.wrapp {
          width: auto;
          gap: 20px;
          grid-auto-flow: column;
          justify-content: space-between;
          padding: 20px 1px;
          margin: -20px 0;
          scroll-snap-type: x mandatory;
          scroll-padding-inline-start: 15px;
          scroll-behavior: smooth;
          scrollbar-gutter: stable;
          box-sizing: border-box;
          overflow-y: hidden;
          overflow-x: auto;

          & .box {
            width: clamp(320px, 420px, 85vw);
            scroll-snap-align: start;

            & .wrapp {
              grid-template-columns: auto;
              align-items: end;
              height: 100%;
              justify-content: normal;
            }

            & .solution {
              justify-content: flex-start;
              gap: 15px;
              padding: 15px 15px 25px;

              & .title {
                min-height: 68px;
                font-size: 1.4em;
                text-align: center;
              }

              & .benefits-button {
                flex-direction: column;
                align-items: center;
                z-index: 1;
                position: relative;

                & .benefits {
                  justify-content: center;
                  font-size: .7em;
                }

                & button {
                  width: 100%;
                }
              }
            }

            & .offer {
              height: 215px;
              margin-inline: 0;

              & .price {
                top: calc(25% + min(4vw, 27px) + 13px);
                font-size: 3.5em;
                font-weight: 500;
              }

              & .separately {
                top: calc(29% - min(5vw, 25px) + 18px);
              }

              & img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                border-radius: 80px 80px 0 0;
                box-shadow: 0 0 0 .5px #e4e4e4, 0 0 18px #00000012;
              }
            }
          }
        }
      }

      & .hub {
        margin-block-start: -40px;

        & .cards {
          & .card {
            .recommend {
              flex-direction: column;
            }
          }
        }
      }
    }
  }

  @media (max-width: 700px) {
    main {
      & .intro {
        & .buttons {
          gap: 4px;

          & .button {
            margin: initial;
          }
        }

        & .rels:not(.horizontal) {
          & .items {
            grid-template-columns: initial !important;

            & .item {
              margin-top: auto;
            }
          }
        }
      }

      & .features {
        & .feature {
          grid-template-columns: auto;
          gap: 10px;
          text-wrap-style: pretty;

          & .h2 {
            justify-content: space-between;
            align-items: center;

            & h2 {
              text-wrap-mode: nowrap;
              font-size: 1.5em;
            }

            & .dashed-blue {
              font-size: .75em;
              height: fit-content;
            }
          }

          & .benefits {
            grid-template-columns: 1fr 1fr;
            width: -webkit-fill-available;
            width: stretch;

            & .benefit {
              display: flex;
              align-items: normal;
              gap: 5px;
              font-size: 80%;
              line-height: 1.25;
            }
          }
        }
      }
    }

    #menu {
      & .nav:before {
        background-color: #ffffff5c;
      }

      & .wrapp {
        width: auto;
        max-width: var(--nav-min-width);
        /* border-width: 1px;
            box-shadow: inset 0px 5px 7px #ffffff12; */
        transition: transform .35s, background-color .25s .15s;

        & .navigation {
          font-size: 1.25em;
          font-variant: small-caps;

          & :is(ul, ol) li a {
            &:first-child {
              background-color: transparent;
              backdrop-filter: blur(5px);
              border-radius: 0 10px 10px 0;
            }
          }
        }
      }
    }

    html.menu-open {
      & #menu .wrapp {
        backdrop-filter: initial;
      }
    }

    .price-list table {
      min-width: 340px;
    }

    .price-list table tr.header .desc {
      max-width: none;
    }
  }

  @media (max-width: 500px) {

    h1,
    .orange h2,
    .intro .rels h2 {
      text-wrap-style: balance;
      font-size: 1.7em;
      margin: 0;
      text-align: left;
    }

    #app {
      --padding: 10px;
    }

    #menu {
      & .wrapp {
        max-width: none;
        min-width: var(--min-res);
      }
    }

    main {
      --gap-main: min(calc(var(--gap) * 2), 10svh) var(--gap);

      & .intro {
        & .images {
          & .card {
            --k: 1.01;

            &:not(:first-child, :last-child) img {
              margin: calc(var(--compression) * -.25) auto;
            }
          }
        }

        & .rels.horizontal {
          & h2 {
            text-align: left;
          }

          &:has(.items > .item:nth-child(10)) {
            overflow-x: auto;
            overflow-y: hidden;
            width: 100%;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scrollbar-gutter: stable;

            &::-webkit-scrollbar {
              display: none;
            }

            & h2 {
              position: sticky;
              left: 0;
            }

            & .items {
              width: 200%;
              padding: 1px;

              &:has(> .item:nth-child(14)) {
                width: 300%;
              }

              &:has(> .item:nth-child(18)) {
                width: 400%;
              }
            }
          }
        }
      }

      & .cat {
        display: grid;
        grid-auto-flow: column;
        justify-content: space-between;
        align-content: start;
        align-items: stretch;
        overflow: auto hidden;
        gap: 5px 10px;
        margin-block-end: -7px;
        margin-inline: 0;
        padding-block: 0 7px;
        scrollbar-gutter: stable;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        &::-webkit-scrollbar {
          display: none;
        }

        & .column {
          display: contents;

          & .card {
            grid-row: none;
            height: 100%;
            min-width: 80vw;
            margin: 0 auto auto;
            scroll-snap-align: start;

            & .wrapp {
              & .image {
                height: 70%;
                inset: 10px -10px 0 auto;

                & img {
                  max-height: 350px;
                }
              }
            }
          }
        }
      }

      & .package {
        &>.wrapp {
          & .box {
            & .solution {
              & .benefits-button {
                & .benefits {
                  max-width: none;
                }
              }
            }
          }
        }
      }
    }

    .chat {
      & .wrapp-scroll {
        max-height: none;
        overflow: initial;
        background: none;
      }
    }

    .price-list {
      & table {
        & a {
          pointer-events: none;
        }

        & tbody {
          & tr:not(.header) {
            & td:first-child {
              vertical-align: top;
            }

            & td:last-child {
              text-align: -webkit-center;

              & .wrapp {
                writing-mode: vertical-rl;
              }
            }
          }
        }

        & thead th {
          font-size: .8em;
          padding-bottom: 6px;
          --rowBorderRadius: 8px;

          & div {
            padding-top: 0;
            font-size: .9em;
          }
        }
      }
    }

    & .features {
      & .feature {
        & .benefits {
          & .benefit {
            & .image img {
              width: 75px;
            }
          }
        }
      }
    }

    #app.🐈contact {
      app[name=tabs] {
        --app-tab-sticky: 93.67px;

        & tabs {
          scrollbar-width: none;

          &::-webkit-scrollbar {
            display: none;
          }
        }
      }

      & dl {
        align-items: end;
        text-wrap-style: pretty;

        & dt {
          font-size: initial;
          line-height: 1.1;
        }

        & dd {
          padding-inline-start: 20px;
          font-size: .9em;
        }
      }

      & #warranty {
        & dl.wrapp {
          grid-template-columns: .3fr 1fr;
        }
      }

      & #contact {
        --contact-gap: var(--gap);

        &>section.contacts {

          & dl {
            grid-template-columns: .3fr 1fr;
          }

          & #location {
            flex-direction: column;

            & .banner {
              grid-template-columns: auto;
              width: auto;

              & img {
                height: auto;
              }
            }
          }
        }

        &>section.photo-route {
          & .wrapp {
            grid-template-columns: auto;

            & figure {
              &:nth-child(n+2):nth-child(-n+9):after {
                inset: auto 0 0 auto;
                content: "↓";
              }
            }
          }
        }
      }

      & #delivery {
        &>section {
          flex-direction: column;

          & .wrapp {
            grid-template-areas:
              "moscow moscow"
              "mkad mkad"
              "russia russia";
            gap: var(--gap);

            & h4 {
              margin-block: 0;
            }
          }
        }

        & .banners {
          flex-direction: row;
          font-size: 70%;
          flex: 50%;
          --contact-gap: 5px;
        }
      }

      & #promotions .wrapp {
        & .cards {
          flex-direction: column;
          --contact-gap: 5px;

          & .banner {
            grid-template-columns: auto 170px;
            width: 100%;
            width: -webkit-fill-available;
            width: stretch;
          }
        }
      }
    }

    dialog[data-type="form"] {
      align-content: end;
      transition: transform .45s cubic-bezier(0.16, 0.53, 0.06, 1.22), opacity .25s, overlay .45s;

      --parts-shift: 80px;
      --parts-margin: 50px;
      --parts-size: 100%;
      --parts-form-translate: calc(var(--parts-size) - var(--parts-margin));

      & .parts {
        overflow-y: auto;
        position: absolute;
        inset: calc(var(--parts-margin) * -1) 0 var(--parts-shift);
        max-height: 95%;
        margin: 0 auto auto;
        box-sizing: border-box;
      }

      &:not(:has(.parts:empty)) {

        & .parts {
          transform: translateY(calc(var(--parts-margin) * -1));
        }

        &[open] {
          & .parts {
            transform: none;
            transition: transform .45s .55s, opacity .45s 0s;
          }
        }

        & .wrapp-dialog {
          position: relative;
          width: auto;
          display: grid;
          grid-template-rows: 1fr;
          grid-template-columns: 1fr;
          height: auto;
          margin-block: auto;

          & .wrapp-scroll {
            transition: transform .45s cubic-bezier(0.16, 0.53, 0.06, 1.22);
            transition-delay: .15s;
          }
        }

        &:not(.send):has(.parts:hover) {
          & .wrapp-dialog {
            & .wrapp-scroll {
              transform: translateY(var(--parts-form-translate));
              transition-delay: 0s;
            }
          }
        }
      }

      & .wrapp-dialog {
        align-items: end;
        max-height: 95vh;
        width: -webkit-fill-available;
        max-width: -webkit-fill-available;
        width: stretch;
        max-width: stretch;
        margin: auto;

        & .wrapp-scroll {
          height: 100%;
          width: -webkit-fill-available;
          width: stretch;
          border-radius: 1.2rem 1.2rem 0 0;

          & .wrapp {
            padding: 20px 15px;
            grid-gap: 45px;

            & form {
              & button {
                --icon-size-calculated: calc(var(--calculated-width) * .9px);
              }
            }

            & .info {
              padding: 15px 20px;
              margin: -20px;

              & .title {
                font-size: 1.4em;
              }

              & .conditions {
                font-size: .8em;

                &>li {
                  padding-inline: 5px;
                }
              }
            }
          }
        }
      }
    }

    html[data-os="iOS"] {
      main .headers .warranty {
        margin-top: 10%;
      }
    }
  }

  @media (max-width: 400px) {
    main {
      &>header {
        & .contacts {
          & .contact {
            display: block;
            line-height: 1.9;

            & .icon {
              display: none;
            }
          }
        }

        & .button {
          margin: initial;
        }
      }
    }
  }


  @media (max-width: 370px) {
    main {
      zoom: .9;
    }
  }
}