:root {
  --scrollbar-track-opacity: 0.3;
  --FONT:  "Montserrat", sans-serif;
  --BLACK: black;
  --WHITE: white;
  --A-IMP: auto !important;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;

  scroll-behavior: smooth;
}

* {
  margin: 0;
  box-sizing: border-box;
  resize: none;
}

body {
  font-family: var(--FONT);
  font-weight: 500;
  background-color: var(--BLACK);
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
}

.Header-Primary-TXT, .Content .Main .Title, .Content-Title, .Content-AD-Title, .Reviews .Reviews-Blocks .Review-Block .Review-Profile .Review-Data .Review-Who, .Reviews .Reviews-Blocks .Review-Block .Review .Review-Title, .Services .Service .Service-Data .Service-Name {
  font-weight: 600;
}

.Header-Container .Header .List .List-Comp .List-TXT, .Header-Container .Header {
  position: relative;
}

.Header-Container .Header {
  top: 0px;
  width: 100%;
  height: 80px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 120px;
}

.Content .Main .Buttons .Modern-Button {
  background: var(--WHITE);
  color: var(--BLACK);
  font-size: 20px;
  margin-top: 1rem;
  margin-bottom: 4rem;
  font-weight: 500;
  padding: 16px 38px;
  border-radius: 11px;
  cursor: pointer;
  transition: 0.3s ease;
  margin-left: 5px;
}

.Content .Main .Buttons .Modern-Button-S {
  color: var(--WHITE);
  margin-left: 30px;
}

.Content .Main .Buttons .Modern-Button-S i {
  font-size: 28px;
}

.Header-Container .Up-Header {
  display: flex;
  justify-content: space-between;
  color: #bdbdbd;
  font-weight: 500;
  font-size: 12px;
  padding: 0px 120px;
  height: 41px;

  transition: opacity 0.5s ease, height 0.5s ease, padding 0.5s ease;
  opacity: 1;
}

.Header-Container .Up-Header.hidden {
  opacity: 0;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.Content {
  padding-top: 121px;
}

.Header-Container .Up-Header .Stability,
.Header-Container .Up-Header .Supports {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ================= HEADER ================= */


.Header-Container {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(10, 10, 10, 0.33);
  backdrop-filter: saturate(200%) blur(20px);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
}

.Logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.Logo img {
  width: 35px;
  height: 23px;
}

.Header-Primary-TXT {
  font-size: 30px;
  color: var(--WHITE);
  margin-top: 2px;
}

/* NAV */
.Header-Container .Header .List {
  flex: 1;
  display: flex;
  justify-content: center;
}

.Header-Container .Header .List .List-Comp {
  display: flex;
  gap: 21px;
}

.Header-Container .Header .List .List-Comp .List-TXT {
  font-size: 15px;
  font-weight: 500;
  color: var(--WHITE);
  cursor: pointer;
  transition: 0.25s ease;
}

/* AUTH */
.Header-Container .Header .Authorization {
  min-width: 140px;
  display: flex;
  justify-content: flex-end;
}

.Header-Container .Header .Authorization .Log-Sign {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Header-Container .Header .Authorization .BTN {
  background: var(--WHITE);
  color: var(--BLACK);
  height: 40px;
  padding: 0px 17px;
  font-size: 14px;
  border-radius: 10px;
  transition: 0.3s;
  display: flex;
  align-items: center;
}

a {
  text-decoration: none;
  color: inherit;
}

.Header-Container .Up-Header .Up-Header-TXT-X {
  color: rgba(255, 255, 255, 0.9);
}

.Header-Container .Up-Header .Stability img {
  margin-left: -11px;
  margin-top: 1px;
  animation: blink 2s infinite;
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.Content .Main {
  padding: 199px 121px;
  background-image: url(/images/fram.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 70px;
}

.Content .Main .Title {
  font-size: 64px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.986) 100%
  );
  max-width: calc(2ch * 10);
  letter-spacing: -0.01em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.Content .Main .Description {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
  opacity: 50%;
  color: var(--WHITE);
  margin-top: 32px;
  max-width: 970px;
  margin-bottom: 60px;
}

/* ================= MOBILE & TABLET ================= */

@media (max-width: 1700px) {
  .Reviews .Reviews-Blocks,
  .Services {
    padding: 0 20px;
  }
}
@media (max-width: 768px) {
  .Header-Container .Up-Header {
    padding: 0 20px;
    font-size: 11px;
  }

  .For-Faq {
    display: grid !important;
  }

  .FAQ {
    margin-top: 0px !important;
  }

  .FAQ-Left {
    display: none !important;
  }

  .FAQ {
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
    margin-top: 120px;
  }

  .FAQ-Left {
    display: none; /* ты уже это используешь — оставляем */
  }

  .Questions {
    width: 100% !important;
  }

  .FAQ-Item .Question {
    height: auto !important;
    padding: 18px 20px !important;
  }

  .FAQ-Item .Question span {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  .Question-Reply {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .FAQ-Item.active .Question-Reply {
    max-height: 500px !important; /* чтобы текст не обрезался */
  }

  .Footer {
    padding-top: 50px;
    padding-bottom: 60px;
  }

  .Footer .container {
    padding: 0 20px;
    gap: 40px;
  }

  .company-info,
  .ceo-info,
  .address,
  .documents {
    font-size: 20px !important;
    white-space: normal !important;
    line-height: 1.6;
  }

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

  .menu {
    display: none !important;
  }

  .menu-column strong {
    font-size: 14px;
  }

  .menu-column a {
    font-size: 14px;
  }

  .Header-Container .Header {
    padding: 14px 20px;
    height: 64px;
  }

  .Header-Primary-TXT {
    font-size: 22px;
  }

  .Logo img {
    width: 30px;
    height: auto;
  }

  .Header-Container .Header .List {
    display: none;
  }

  .Header-Container .Up-Header .Up-Header-TXT {
    display: none;
  }

  .Header-Container .Up-Header .Authorization {
    min-width: auto;
  }

  .Header-Container .Header .Authorization .BTN {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }

  .Header-Container .Up-Header .Stability img {
    margin-top: 5px;
  }

  /* ---------- MAIN ---------- */
  .Content .Main {
    padding: 140px 20px;
    min-height: 87vh;
  }

  .Content .Main .Title {
    font-size: 38px;
    max-width: 100%;
    line-height: 1.15;
    text-align: center;
  }

  .Content .Main .Description {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 40px;
    max-width: 100%;
    text-align: center;
  }

  /* ---------- BUTTONS ---------- */
  .Content .Main .Buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
  }

  .Content .Main .Modern-Button {
    font-size: 16px;
    padding: 14px 28px;
    margin: 0;
  }

  .Content .Main .Modern-Button-S {
    margin-left: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .Content .Main .Modern-Button-S i {
    font-size: 26px;
  }

  .Services .Service .Service-Button {
    margin-top: var(--A-IMP);
    margin-left: var(--A-IMP);
    margin-right: var(--A-IMP);
    display: block;
  }
}

/* ================= SMALL PHONES ================= */

@media (max-width: 480px) {
  .Content .Main .Title {
    font-size: 30px;
  }

  .Content .Main .Description {
    font-size: 16px;
  }

  .Header-Primary-TXT {
    font-size: 20px;
  }

  .FAQ-Item .Question span {
    font-size: 15px;
  }

  .Question-Reply {
    font-size: 14px;
  }

}

.Content-Title, .Content-AD-Title {
  text-align: center;
}

.Content-Title {
  color: var(--WHITE);
  font-size: 47px;
}

.Content-AD-Title {
  color: #808080;
  font-size: 22px;
  font-weight: 300;
}

.Content-Block {
  margin-top: 114px;
  margin-bottom: 114px;
}

/* ================= REVIEWS ================= */

.Reviews .Reviews-Blocks .Review-Block {
  background-color: var(--WHITE);
  border-radius: 26px;
  min-height: 360px;
  height: auto;
  width: 420px;
  padding: 0px 28px;
  overflow: hidden;
}

.Reviews .Reviews-Blocks .Review-Block .Review-Profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
}

.Reviews .Reviews-Blocks .Review-Block .Review-Profile .Review-Data {
  display: flex;
  gap: 11px;
}

.Reviews .Reviews-Blocks .Review-Block .Review-Profile .Review-Data .Review-Avatar img {
  border-radius: 10000px;
  height: 55px;
  width: 55px;
}

.Reviews .Reviews-Blocks .Review-Block .Review-Profile .Review-Data .Review-Who {
  font-size: 20px;
}

.Reviews .Reviews-Blocks .Review-Block .Review-Profile .Review-Data .Review-Who .Review-Name {
  color: black;
}

.Reviews .Reviews-Blocks .Review-Block .Review-Profile .Review-Data .Review-Who .Review-Role {
  opacity: 50%;
}

.Reviews .Reviews-Blocks .Review-Block .Review-Profile .Review-Rate {
  color: #f5b50a;
  margin-bottom: auto;
}

.Reviews .Reviews-Blocks .Review-Block .Review .Review-Title {
  color: var(--BLACK);
  font-size: 32px;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Reviews .Reviews-Blocks .Review-Block .Review .Review-Text {
  opacity: 50%;
  font-size: 18px;
}

.Reviews .Reviews-Blocks, .Services {
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
  gap: 32px;
}

.Services {
  align-items: center;
}

.Services .Service {
  background-color: var(--WHITE);
  border-radius: 26px;
  height: 320px;
  width: 100%;
  max-width: 1776px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.Services .Service .Service-Data {
  padding: clamp(40px, 6vw, 95px) clamp(20px, 8vw, 122px) 0;
  color: var(--BLACK);
}

.Services .Service .Service-Data .Service-Description, .Services .Service .Service-Data .Service-Name {
letter-spacing: -0.02em;
}

.Services .Service .Service-Data .Service-Name {
  font-size: clamp(32px, 4vw, 40px);
}

.Services .Service .Service-Data .Service-Description {
  font-size: clamp(18px, 2.5vw, 20px);
  margin-top: 16px;
  max-width: 515px;
  opacity: 50%;
}

.Services .Service .Service-Button {
  font-family: var(--FONT);
  margin-top: auto;
  margin-left: auto;
  margin-right: 33px;
  margin-bottom: 24px;
  width: clamp(180px, 80%, 500px);
  font-size: clamp(12px, 1.5vw, 16px);
  border-radius: 14px;
  height: 50px;
  background: #1F2933;
  color: var(--WHITE);
}


/* .FAQ {
  margin-top: 227px;
  padding: 227px 105px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
  gap: 32px;
}

.FAQ .FAQ-Title {
  font-size: 48px;
  color: var(--WHITE);
  font-weight: 700;
}

.FAQ .FAQ-Description {
  font-size: 32px;
  color: var(--WHITE);
  font-weight: 400;
  max-width: 896px;
} */

/* ================= FAQ ================= */
/* ================= FAQ ================= */
.FAQ {
  display: flex;
  gap: 105px;              /* расстояние между левым и правым блоком */
  max-width: 1776px;       /* как Services */
  margin: 0 auto;           /* центрируем блок */
  margin-top: 226px;
  box-sizing: border-box;
}

/* LEFT SIDE */
.FAQ-Left {
  flex: 1;
  min-width: 0;             /* чтобы текст не выходил за блок */
}

/* TITLE — без переноса */
.FAQ-Title {
  color: white;
  font-size: 48px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.1;
}

/* DESCRIPTION — строго 3 строки */
.FAQ-Description {
  margin-top: 24px;
  color: #808080;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.06em;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 520px;          /* фиксируем ширину описания */
}

/* RIGHT SIDE */
.Questions {
  width: 869px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* QUESTION ITEM */
.FAQ-Item {
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
}

/* NON ACTIVE QUESTION */
.FAQ-Item .Question {
  width: 100%;
  height: 77px;
  background: #0F0F0F;
  padding: 24px 36px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.FAQ-Item .Question span {
  color: var(--WHITE);
  font-family: var(--FONT);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.06em;
}

/* ACTIVE QUESTION */
.FAQ-Item.active .Question {
  background: white;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom: 1px black solid;
}

.FAQ-Item.active .Question span {
  color: var(--BLACK);
}

/* ANSWER */
.Question-Reply {
  background: white;
  padding: 0 36px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;

  color: rgba(0, 0, 0, 0.75);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.06em;
  text-align: left;
}

.FAQ-Item.active .Question-Reply {
  padding: 24px 36px;
  max-height: 121px;
}

.For-Faq {
  display: none;
}
.Footer {
  background-color: #050505;
  border-top: 0.5px solid #272727;
  color: #aaaaaa;
  font-size: 15px;
  padding: 70px 120px;
  margin-top: 95px;
}

.Footer .container {
  max-width: 1776px;

  display: flex;
  align-items: flex-start;
  gap: 120px;
}

.left-column {
  line-height: 1.55;
}

.company-info,
.ceo-info,
.address,
.documents {
  font-size: 24px;
  margin-bottom: 24px;
  white-space: nowrap;
}

.info {
  display: flex;
  gap: 50px;
  margin-top: 20px;
}

.company-info strong,
.ceo-info strong {
  color: #ffffff;
}

.documents a {
  color: #aaaaaa;
  text-decoration: none;
}

.documents a:hover {
  color: #ffffff;
}

.menu {
  display: flex;
  gap: 120px;      
  margin-left: auto;
}

.menu-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-column strong {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 10px;
}

.menu-column a {
  color: #aaaaaa;
  text-decoration: none;
  transition: color 0.15s;
}

.menu-column a:hover {
  color: #ffffff;
}

@media (max-width: 1100px) {
  .Footer .container {
    flex-direction: column;
    gap: 60px;
  }
}