/* 00-tokens.css — только :root переменные, цвета, тени, радиусы */
:root {
    /* Основные цвета */
    --основной-цвет: #9B7BB8;
    --основной-темный: #6A2C70;
    --фон-светлый: #FBF8FC;
    --фон-градиент: linear-gradient(135deg, #D4A5C9 0%, #9B7BB8 50%, #7A5A9A 100%);
    --белый: #FFFFFF;

    /* Текст */
    --текст-темный: #33263D;
    --текст-светлый: #6A5C75;

    /* Дополнительные */
    --акцентный-цвет: #E8A4C9;
    --акцентный-розовый: #F5C6D6;
    
    /* Тени */
    --тень-мягкая: 0 8px 24px rgba(155, 123, 184, 0.10);
    --тень-средняя: 0 12px 30px rgba(155, 123, 184, 0.14);
    --тень-при-наведении: 0 8px 30px rgba(155, 123, 184, 0.3);

    /* Радиусы */
    --радиус-12: 12px;
    --радиус-14: 14px;
    --радиус-18: 18px;
    --радиус-22: 22px;

    /* Анимации */
    --переход: all 0.3s ease;
}


/* =========================================================
   HEADER / NAV (ХЕДЕР)
   ========================================================= */

   /* HEADER menu: remove default list bullets */
.шапка .меню-навигации {
  list-style: none;
  margin: 0;
  padding: 0;
}

.шапка .меню-навигации li::marker {
  content: "";
}

.шапка {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: var(--белый);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.навигация {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.логотип {
  display: flex;
  align-items: center;
}

.логотип-изображение {
  height: 50px;
  width: auto;
}

.меню-навигации {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.ссылка-навигации {
  font-weight: 500;
  font-size: 14px;
  color: var(--заголовок-цвет);
  position: relative;
  white-space: nowrap;
}

.ссылка-навигации::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--основной-цвет);
  transition: var(--переход);
}

.ссылка-навигации:hover::after { width: 100%; }
.ссылка-навигации:hover { color: var(--основной-цвет); }

.ссылка-навигации.активная {
  color: var(--основной-цвет);
  font-weight: 600;
}

.ссылка-навигации.активная::after { width: 100%; }

.правая-часть-навигации {
  display: flex;
  align-items: center;
  gap: 20px;
}

.иконки-соцсетей {
  display: flex;
  gap: 17px;
}

.иконки-соцсетей a {
  font-size: 22px;
  color: var(--основной-цвет);
}

.иконки-соцсетей a:hover {
  color: var(--основной-темный);
  transform: scale(1.5);
}

.выбор-языка {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.выбор-языка .язык {
  background: none;
  border: none;
  padding: 4px 6px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--текст-темный);
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
  transition: var(--переход);
}

.выбор-языка .язык::after {
  content: "/";
  margin-left: 6px;
  color: #cbb8d6;
}

.выбор-языка .язык:last-child::after { content: ""; }

.выбор-языка .язык:hover {
  background: rgba(155, 123, 184, 0.12);
  color: var(--основной-цвет);
}

.выбор-языка .язык.активный {
  background: rgba(155, 123, 184, 0.2);
  color: var(--основной-цвет);
}

.кнопка-мобильного-меню {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.кнопка-мобильного-меню span {
  width: 25px;
  height: 3px;
  background: var(--основной-цвет);
  border-radius: 2px;
  transition: var(--переход);
}

/* Разрешаем overflow, чтобы выпадашки/меню не обрезались */
.header,
header {
  overflow: visible;
}

/* ---------------------------
   HEADER: mobile behaviour
   --------------------------- */

@media (max-width: 768px) {
 
  
  .меню-навигации {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--белый);
    flex-direction: column;
    padding: 20px;
    box-shadow: var(--тень);
  }

  .меню-навигации.активное { display: flex; }
  .правая-часть-навигации { display: none; }
}

@media (max-width: 1200px) {
  .меню-навигации { gap: 16px; }
  .ссылка-навигации { font-size: 14px; }
}

/* Мобильное выезжающее меню (<=820px) */
@media (max-width: 820px) {
  .кнопка-мобильного-меню {
    position: relative;
    z-index: 1102;
    display: inline-flex;
    margin-right: 0px;
  }

  .меню-навигации {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    height: 100dvh;
    width: min(88vw, 360px);
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 18px 18px;
    padding-left: 18px;
    padding-right: 58px;
    background: rgba(255, 255, 255, 0.96);
    border-left: 1px solid rgba(155, 123, 184, 0.3);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(.2, .9, .2, 1);
    z-index: 1101;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.menu-open .меню-навигации { transform: translateX(0); }

  .меню-навигации .ссылка-навигации {
    font-size: 18px;
    padding: 10px 6px;
    width: 100%;
  }

  .меню-навигации .ссылка-навигации::after { display: none; }

  .mobile-menu-extras .иконки-соцсетей {
    display: flex;
    gap: 16px;
  }

  .mobile-menu-extras .иконки-соцсетей a { font-size: 26px; }

  .mobile-menu-extras .выбор-языка {
    display: flex;
    gap: 6px;
  }

  .mobile-menu-extras .выбор-языка .язык {
    font-size: 16px;
    padding: 8px 10px;
  }

  body.menu-open { overflow: hidden; }

  /* В шапке оставляем только бургер справа */
  .правая-часть-навигации {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-left: auto;
   
  }

  .правая-часть-навигации .иконки-соцсетей,
  .правая-часть-навигации .выбор-языка {
    display: none !important;
  }
}
/* =========================================================
   INSTAGRAM + TELEGRAM (ИНСТА БЛОК + TG QR)
   ========================================================= */

.секция-инстаграм {
  padding: 40px 0;
}


.карточка-инстаграм {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr 170px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 20px;
  border: 1px solid #c79acb;
  background: linear-gradient(
    90deg,
    #f2e6f1 0%,
    #f8edf5 35%,
    #fff7fb 70%,
    #ffffff 100%
  );
  overflow: hidden;
}


.иконка-инстаграм {
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.иконка-инстаграм i {
  font-size: 92px;
  color: rgba(209, 107, 176, 0.92);
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.55);
}

.содержимое-инстаграм {
  text-align: center;
  justify-self: center;
}

.содержимое-инстаграм h3 {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: #6a2c70;
}

.содержимое-инстаграм p {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0;
  color: #6a2c70;
  opacity: 0.95;
}

.qr-код-инстаграм {
  justify-self: end;
  text-align: center;
}

.qr-код-инстаграм span {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #c16bb5;
}

/* =========================================================
   TELEGRAM CTA — same design as Instagram card (desktop only)
   ========================================================= */

.секция-присоединяйся {
  padding: 40px 0;
}

/* делаем карточку TG визуально = карточке Instagram */
.карточка-присоединяйся {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr 220px;
  align-items: center;
  padding: 36px 60px;
  border-radius: 20px;
  border: 1px solid #c79acb; /* оставляем как у инсты, чтобы было едино */
  background: linear-gradient(
    90deg,
    #f2e6f1 0%,
    #f8edf5 35%,
    #fff7fb 70%,
    #ffffff 100%
  );
  overflow: hidden;
}

/* левая иконка */
.иконка-телеграм {
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.иконка-телеграм img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  /* чуть “воздушности”, чтобы ощущалось как большая иконка */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.10));
}

/* центр: текст */
.содержимое-присоединяйся {
  text-align: center;
  justify-self: center;
}

.содержимое-присоединяйся h3 {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: #6a2c70; /* как у инсты — единый стиль */
}

.содержимое-присоединяйся .tg-текст {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0;
  color: #6a2c70;
  opacity: 0.95;
}

/* справа: QR (у тебя уже есть базовые правила, но дополним позиционирование как у инсты) */
.карточка-присоединяйся .qr-код-телеграм {
  justify-self: end;
  text-align: center;
}

/* если захочешь подпись под QR — сразу готово */
.карточка-присоединяйся .qr-код-телеграм span {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #c16bb5;
}

.qr-код-телеграм {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.qr-код-телеграм .qr-изображение {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.qr-код-телеграм span {
  font-size: 20px;
  font-weight: 600;
  opacity: 0.95;
}

/* =========================================================
   Instagram + Telegram — MOBILE (<=820px)
   QR слева, текст справа/по центру, без больших иконок
   ========================================================= */

/* =========================================================
   Instagram + Telegram — MOBILE (<=820px)
   Clean, no duplicates, bigger card, smaller outer gaps
   ========================================================= */
@media (max-width: 820px) {

  /* секции: убираем лишний “воздух” и даем карточке ширину */
  .секция-инстаграм,
  .секция-присоединяйся {
    padding: 20px 0px; /* было 40px 0 — компактнее */
  }

  /* .секция-инстаграм .контейнер,
  .секция-присоединяйся .контейнер {
    padding-left: 0px;   
    padding-right: 30px !important;
  } */

  /* карточки: шире/крупнее и одинаково для IG + TG */
  .карточка-инстаграм,
  .карточка-присоединяйся {
    display: grid;
    grid-template-columns: 100px 1fr;  /* QR | текст */
    column-gap: 20px;
    align-items: center;

    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;

    padding: 10px 10px;    /* больше внутренние отступы */
    border-radius: 20px;
  }

  /* на мобиле скрываем большие иконки */
  .иконка-инстаграм,
  .иконка-телеграм {
    display: none !important;
  }

  /* QR: без трансформов, просто нормальное выравнивание */
  .qr-код-инстаграм,
  .карточка-присоединяйся .qr-код-телеграм {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: center;
  }

  .qr-код-инстаграм img,
  .qr-код-телеграм .qr-изображение {
    width: 164px;
    height: 164px;
    object-fit: contain;
    border-radius: 14px;
  }

  .qr-код-инстаграм span,
  .карточка-присоединяйся .qr-код-телеграм span {
    display: none;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 200;
  }

  /* текст */
  .содержимое-инстаграм,
  .содержимое-присоединяйся {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    text-align: center;
  }

  .содержимое-инстаграм h3 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
  }

  .содержимое-инстаграм p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.25;
    text-transform: uppercase;
    opacity: 0.95;
  }

  .карточка-присоединяйся .содержимое-присоединяйся h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.1;
  }

  .карточка-присоединяйся .tg-текст {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1.25;
    text-transform: uppercase;
    opacity: 0.95;
  }
}

/* =========================================================
   FOOTER (final, no duplicates)
   ========================================================= */

:root{
  --footer-bg: #FBF3FA;
}

/* футер: фон + отступы */
.подвал{
  background: var(--footer-bg);
  margin-top: 18px;
  padding: 28px 0 calc(56px + env(safe-area-inset-bottom));
}

/* верхняя строка: линия + заголовок + кнопка рядом */
.подвал .заголовок-секции{
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
  margin-bottom: 38px;
}

.подвал .линия-секции{
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--основной-цвет);
  flex: 0 0 auto;
}

.подвал .название-секции{
  margin: 0;
  font-size: 32px;           /* как на index */
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--основной-цвет);
  white-space: nowrap;
}

/* кнопка возле заголовка (не вправо) */
.подвал .заголовок-секции .кнопка{
  margin-left: 18px;
  flex: 0 0 auto;
}

/* pill style кнопки */
.подвал .кнопка-основная{
  border-radius: 999px;
  padding: 16px 34px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;

  background: var(--фон-градиент) !important;
  color: var(--белый) !important;
  border: none !important;
  padding: 16px 22px !important;

  box-shadow: var(--тень-мягкая) !important;
  transform: none !important;
    /* как на 1 фото: центр и uppercase */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;

}

/* контакты: меньше иконки и текст */
.подвал .контактная-информация{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}

.подвал .элемент-контакта{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--текст-темный);
  text-decoration: none;
}

.подвал .элемент-контакта i{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(155, 123, 184, 0.65);
  color: var(--основной-цвет);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: transparent;
}

.подвал .элемент-контакта span{
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* соцсети: больше отступ сверху (между контактами и соцсетями) */
.подвал .ссылки-соцсетей{
  margin-top: 40px;          /* вертикальный отступ от контактов */
  display: flex;
  justify-content: center;
  gap: 40px;                 /* расстояние IG vs TG */
  flex-wrap: wrap;
}

.подвал .ссылки-соцсетей a{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--текст-темный);
  text-decoration: none;
}

/* убрать кружки у соц-иконок */
.подвал .ссылки-соцсетей a i{
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  font-size: 28px;
  color: var(--основной-цвет);
  transition: var(--переход);
}

.подвал .ссылки-соцсетей a:hover{
  color: var(--основной-цвет);
}

.подвал .ссылки-соцсетей a:hover i{
  transform: scale(1.06);
}
/* =========================================================
   FOOTER — MOBILE (<= 820px)
   Layout like reference: title row / icons row / gradient button
   ========================================================= */
@media (max-width: 820px){

  /* Grid: (line+title) / icons / button */
  .подвал .контейнер{
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    row-gap: 26px;                 /* больше воздуха между рядами */
    align-items: center;
  }

  /* Allow placing children directly into grid */
  .подвал .заголовок-секции{
    display: contents;
  }

  .подвал .линия-секции{
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    width: 56px;
    height: 3px;
    border-radius: 999px;
  }

  .подвал .название-секции{
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
    white-space: normal;
  }

  /* Icons row (contacts + socials) */
  .подвал .содержимое-подвала{
    grid-column: 1 / -1;
    grid-row: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    width: 100%;
    margin-top: 10px;              /* чуть больше расстояние от заголовка */
  }

  /* Flatten both wrappers so links become direct children */
  .подвал .контактная-информация,
  .подвал .ссылки-соцсетей{
    display: contents;
  }

  /* Common link styles for all icons */
  .подвал .элемент-контакта,
  .подвал .ссылки-соцсетей a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 0;
  }

  /* Hide text: contacts (span) + socials (text inside <a>) */
  .подвал .элемент-контакта span{
    display: none !important;
  }

  .подвал .ссылки-соцсетей a{
    font-size: 0 !important;       /* скрывает @MOVE... / @DANCE... */
    line-height: 0 !important;
  }

  /* Icons: same look, no circles/borders */
  .подвал .элемент-контакта i,
  .подвал .ссылки-соцсетей a i{
    width: auto !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 0 !important;

    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--основной-цвет);
  }

  /* Button row */
  .подвал .заголовок-секции .кнопка{
    grid-column: 1 / -1;
    grid-row: 3;

    width: 100%;
    max-width: 520px;
    justify-self: center;

    margin-top: 12px;              /* больше расстояние от иконок */
  }

  /* Gradient button (restored) */
  .подвал .кнопка-основная{
    background: var(--фон-градиент) !important;
    color: var(--белый) !important;
    border: none !important;

    border-radius: 999px !important;
    padding: 16px 2px !important;

    box-shadow: var(--тень-мягкая) !important;
    transform: none !important;
  }

  .подвал .кнопка-основная:hover{
    transform: translateY(-2px) !important;
    box-shadow: var(--тень-средняя) !important;
  }

  /* Bottom safe spacing */
  .подвал{
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 820px){
  .подвал .линия-секции{
    width: 36px;   /* было ~48–60px */
  }
}



/* =========================================================
   HEADER — Mobile burger panel overrides (<= 820px)
   Purpose:
   - panel width control
   - clean inner padding
   - hide IG/TG in burger
   - push languages a bit lower
   - keep links aligned
   ========================================================= */

@media (max-width: 820px){

  /* Burger button: no accidental horizontal shifts */
  .кнопка-мобильного-меню{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Burger panel: width + padding (single source of truth) */
  .меню-навигации{
    /* TUNE HERE */
    --burger-width: min(80vw, 400px);

    --burger-pad-top: 4px;
    --burger-pad-right: 10px;
    --burger-pad-bottom: 18px;
    --burger-pad-left: 26px;

    width: var(--burger-width) !important;
    padding: var(--burger-pad-top)
             var(--burger-pad-right)
             var(--burger-pad-bottom)
             var(--burger-pad-left) !important;
  }

  /* Links: use panel padding (no extra inner left/right) */
  .меню-навигации .ссылка-навигации{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Extras block inside burger: full width, no extra padding */
  .mobile-menu-extras{
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hide IG/TG icons inside burger */
  .mobile-menu-extras .иконки-соцсетей{
    display: none !important;
  }

  /* Push languages slightly lower */
  .mobile-menu-extras .выбор-языка{
    margin-top: 18px;
  }
}