<!-- =================================================== -->
<!-- ===== ГЛОБАЛЬНЫЕ НАСТРОЙКИ САЙТА MARI MLADS ======= -->
<!-- Вставить ОДИН РАЗ: «CSS-код для всех страниц сайта». -->
<!-- Меняешь значения тут — меняется на ВСЁМ сайте.       -->
<!-- =================================================== -->




/* ====================================================== */
/* 1. ПЕРЕМЕННЫЕ — главный центр управления                */
/* ====================================================== */
:root {
  /* ===== ШРИФТ ===== */
  --mari-font: 'Manrope', sans-serif;

  /* ===== ЦВЕТА (как в баннере) ===== */
  --mari-bg:          #fafafc;   /* фон страницы/секций */
  --mari-text:        #202023;   /* основной тёмный текст / заголовки */
  --mari-text-soft:   #80808c;   /* приглушённый текст (описания) */
  --mari-muted:       #b0b0bc;   /* совсем светлый (второстепенное) */
  --mari-accent:      #6c63ff;   /* акцент (фиолетовый) */
  --mari-accent-2:    #ff7a1a;   /* МЕЛКИЙ оранжевый акцент (детали) */
  --mari-dark:        #202023;   /* тёмная заливка (полосы, кнопки) */
  --mari-on-dark:     #fafafc;   /* текст на тёмном фоне */
  --mari-card:        #ececf2;   /* фон карточек/заглушек */
  --mari-line:        rgba(32,32,35,.10); /* тонкие разделители */
  --mari-ok:          #2ec27e;   /* статус «онлайн / открыта» */

  /* ===== БОКОВЫЕ ОТСТУПЫ ===== */
  --mari-pad: 60px;              /* десктоп */

  /* ===== РАЗМЕРЫ / РАДИУСЫ ===== */
  --mari-maxw:   1560px;         /* макс. ширина контента */
  --mari-radius: 18px;           /* радиус карточек/фото */
  --mari-pill:   50px;           /* радиус «таблеток» (кнопки, чипы) */

  /* ===== ТЕНИ ===== */
  --mari-shadow:    0 30px 60px -20px rgba(32,32,35,.25);
  --mari-shadow-lg: 0 40px 80px -30px rgba(32,32,35,.35);

  /* ===== АНИМАЦИЯ ===== */
  --mari-ease: cubic-bezier(.2,.7,.2,1);
}

/* ПЛАНШЕТ + МОБАЙЛ — отступы 16px */
@media screen and (max-width: 980px) {
  :root { --mari-pad: 16px; }
}


/* ====================================================== */
/* 2. БАЗА / УТИЛИТЫ                                       */
/* ====================================================== */

/* контейнер-обёртка для любой секции */
.mari-section {
  background: var(--mari-bg);
  font-family: var(--mari-font);
  padding: 90px var(--mari-pad);
  box-sizing: border-box;
}
.mari-inner {
  max-width: var(--mari-maxw);
  margin: 0 auto;
}

/* метка-надзаголовок «РЕЗЮМЕ / ПРОЕКТЫ» с линией */
.mari-label {
  display: inline-block;
  font-family: var(--mari-font);
  font-size: 13px; font-weight: 700; letter-spacing: 4px;
  color: var(--mari-accent);
  position: relative; padding-left: 40px;
}
.mari-label::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 28px; height: 2px; background: var(--mari-accent);
  transform: translateY(-50%);
}

/* подзаголовок раздела с линией-хвостом */
.mari-subtitle {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mari-font);
  font-size: 13px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mari-text);
  margin: 0 0 14px;
}
.mari-subtitle::after {
  content: ''; flex: 1; min-width: 30px; height: 1px;
  background: var(--mari-line);
}

/* подсветка ключевого слова */
.mari-hl { color: var(--mari-accent); font-weight: 600; }


/* ====================================================== */
/* 3. КНОПКИ (универсальные)                              */
/* ====================================================== */
.mari-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mari-font);
  font-size: 15px; font-weight: 700; letter-spacing: 1.5px;
  padding: 17px 32px;
  border-radius: var(--mari-pill);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .25s var(--mari-ease), background .25s ease,
              color .25s ease, box-shadow .25s ease;
}
/* тёмная — текст ВСЕГДА белый */
.mari-btn--primary { background: var(--mari-dark); color: #fafafc; }
.mari-btn--primary:hover {
  background: var(--mari-accent); color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -10px var(--mari-accent);
}
/* контурная — текст ЧЁРНЫЙ, при hover белый */
.mari-btn--ghost { background: transparent; color: var(--mari-text); border-color: var(--mari-text); }
.mari-btn--ghost:hover { background: var(--mari-text); color: #fafafc; transform: translateY(-3px); }
/* стрелки внутри кнопок */
.mari-btn .ico { transition: transform .25s var(--mari-ease); }
.mari-btn--primary:hover .ico-right { transform: translateX(5px); }
.mari-btn--ghost:hover   .ico-down  { transform: translateY(3px); }


/* ====================================================== */
/* 4. ЧИПЫ (теги-факты)                                   */
/* ====================================================== */
.mari-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mari-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mari-font);
  font-size: 14px; font-weight: 600;
  color: var(--mari-text); background: var(--mari-card);
  padding: 9px 16px; border-radius: var(--mari-pill);
  transition: transform .25s var(--mari-ease), background .25s ease, color .25s ease;
  cursor: default;
}
.mari-chip:hover { transform: translateY(-3px); background: var(--mari-text); color: #fafafc; }
.mari-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mari-accent); }


/* ====================================================== */
/* 5. КАРТОЧКА / ФОТО                                     */
/* ====================================================== */
.mari-photo {
  position: relative; border-radius: var(--mari-radius); overflow: hidden;
  background: var(--mari-card); box-shadow: var(--mari-shadow-lg);
}
.mari-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(20%);
  transition: filter .5s ease, transform .6s ease;
}
.mari-photo:hover img { filter: grayscale(0%); transform: scale(1.04); }


/* ====================================================== */
/* 6. АНИМАЦИЯ ПОЯВЛЕНИЯ (общая)                          */
/* ====================================================== */
/* добавь .mari-reveal элементу, и .is-visible родителю при скролле */
.mari-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s var(--mari-ease); }
.is-visible .mari-reveal { opacity: 1; transform: translateY(0); }
/* задержки-лесенка */
.is-visible .mari-reveal.d1 { transition-delay: .1s; }
.is-visible .mari-reveal.d2 { transition-delay: .2s; }
.is-visible .mari-reveal.d3 { transition-delay: .35s; }
.is-visible .mari-reveal.d4 { transition-delay: .5s; }
.is-visible .mari-reveal.d5 { transition-delay: .65s; }


/* ====================================================== */
/* 7. ОБЩИЙ АДАПТИВ                                        */
/* ====================================================== */
@media screen and (max-width: 980px) {
  .mari-section { padding: 52px var(--mari-pad); }
}
@media screen and (max-width: 480px) {
  .mari-section { padding: 36px var(--mari-pad); }
  .mari-btn { width: 100%; justify-content: center; padding: 15px 24px; }
}
</style>