/*

Template 2082 Pure Mix

http://www.tooplate.com/view/2082-pure-mix

*/
/* === TAN Moonlight (локальный) === */
@font-face {
  font-family: "TAN Moonlight";
  src: url("../fonts/tan-moonlight.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MotterFixed";
  src: url("../fonts/dsmotterstylefixed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fallback с метриками, близкими к брендовым шрифтам */
@font-face {
  font-family: "TAN Moonlight Fallback";
  src: local("SF Pro Display"), local("Segoe UI"), local("Avenir Next"), local("Trebuchet MS");
  font-weight: 400;
  font-style: normal;

  /* метрики: подгоняем размер и строки под реальный TAN Moonlight */
  size-adjust: 108%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "MotterFixed Fallback";
  src: local("Arial Black"), local("Impact"), local("Segoe UI"), local("SF Pro Display");
  font-weight: 400;
  font-style: normal;

  /* метрики под Motter */
  size-adjust: 96%;
  ascent-override: 88%;
  descent-override: 20%;
  line-gap-override: 0%;
}

/* На случай старых браузеров — базовый трюк: держать x-height стабильной */
@supports not (font: 1em "a" / 1 var(--test)) {
  .header-one .header-thumb h1 {
    font-size-adjust: 0.50;
  }

  /* подберёшь +-0.02 */
}

:root {
  /* Page background base */
  --page-bg-color: #ffffff;
  --page-bg-img: none;
  --page-bg-size: auto;
  --page-bg-pos: center;
  --page-bg-repeat: repeat;
  --page-bg-attach: scroll;

  /* UI curves & masonry */
  --grid-gap: 18px;
  --cols: 3;
  --hover-brightness: 1.22;
  --tap-brightness: 1.35;
  --tap-scale: .985;
  --ui-ease: .18s;
  --radius-soft: clamp(10px, 1.2vw, 18px);

  /* Logo sizing */
  --logo-h-mobile: 84px;
  --logo-h-desktop: 140px;

  /* Preloader logo sizing */
  --pre-logo-h-desktop: clamp(120px, 14vw, 180px);
  --pre-logo-h-mobile: clamp(80px, 26vw, 120px);

  /* Preloader glass/glow */
  --pre-glass-alpha: .8500;
  --pre-glass-blur: 500px;
  --pre-glow-alpha: .22;
  --pre-glow-size: 62%;
  --pre-glow-y: 38%;

  /* Hero gap */
  --hero-gap-desktop: 35px;

  /* Nav top */
  --nav-top-desktop: 50px;
}

body {
  background-color: var(--page-bg-color);
  background-image: var(--page-bg-img);
  background-size: var(--page-bg-size);
  background-position: var(--page-bg-pos);
  background-repeat: var(--page-bg-repeat);
  background-attachment: var(--page-bg-attach);
}

/* Анти-Drag для картинок */
img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Typography
------------------------------------- */

h1,
h2,
h3,
h4 {
  font-weight: 400;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}

h1 {
  color: #000;
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 0;
}

h2 {
  color: #ffffff;
  font-size: 1rem;
}

h3 {
  color: #444;
  font-size: 14px;
  letter-spacing: 4px;
}

h5 {
  font-weight: 400;
  letter-spacing: 1px;
}

p {
  color: #777;
  font-size: 16px;
  line-height: 28px;
  word-spacing: 1px;
  letter-spacing: 1px;
}

a {
  outline: none;
  text-decoration: none;
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  outline: 0;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

img {
  width: 100%;
  max-width: 100%;
}

/* navigation styles
/* ========================================== */
.nav-container,
nav {
  overflow: visible;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}

nav {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}

nav a {
  color: #333333;
}

.navbar {
  background: transparent;
  height: 94px;
  max-height: 94px;
  margin: 0;
  border-radius: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}

.brand {
  float: none;
  padding: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}

.brand a {
  color: #333;
  font-size: 24px;
  font-weight: 700;
  opacity: 1;
  text-decoration: none;
}

.navicon {
  position: relative;
  right: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0;
}

nav ul {
  display: inline-block;
}

nav ul.right {
  float: right;
  right: 0
}

#nav-menu a {
  font-weight: 300;
  font-size: 26px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}

#nav-menu li {
  list-style: none;
  padding: 6px;
}

.nav-text-light a {
  color: #ffffff;
}

.sticky .nav-text-light a {
  color: #555555;
}

.sticky nav.nav-inner .navbar {
  height: 70px;
  max-height: 70px;
  margin: 0;
  background: transparent;
}

.sticky nav.transparent .navbar {
  background: transparent;
}

@media all and (max-width: 990px) {
  .nav-text-light a {
    color: #555555;
  }

  .nav-inner {
    background: transparent;
  }

  .transparent {
    background: transparent;
  }

  .navicon {
    padding-right: 10px;
  }

  nav ul.right {
    float: left;
  }
}

a.icon {
  font-size: 32px;
  padding-right: 20px;
}

.intro-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.close {
  font-family: inherit;
  font-size: 32px;
  font-weight: 300;
  text-shadow: none;
}

.close:focus {
  outline: 0px auto -webkit-focus-ring-color;
}

.circle {
  width: 45px;
  height: 45px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 50%;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  cursor: pointer;
  z-index: 99;
  padding: 4px 0 0;
}

.circle i {
  font-size: 36px;
  color: #111112;
}

.circle.dark {
  border-color: #292929;
}

.circle.dark:before {
  border-color: transparent transparent transparent #292929;
}

.circle.large {
  height: 120px;
  width: 120px;
  margin-top: -60px;
  margin-left: -60px;
}

.circle.large:before {
  margin-top: -18px;
  margin-left: -10px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 31.0px;
  border-color: transparent transparent transparent #ffffff;
}

.circle.large.dark:before {
  border-color: transparent transparent transparent #292929;
}

.circle.inline {
  position: relative;
  top: 0;
  left: 0;
  margin-top: 0;
  margin-left: 0;
  display: inline-block;
  z-index: 0;
}

@media all and (max-width: 767px) {
  .circle.large {
    width: 90px;
    height: 90px;
    margin-top: -45px;
  }

  .circle.large:before {
    margin-top: -14px;
    margin-left: -8px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25.0px;
    border-color: transparent transparent transparent #fff;
  }
}

/* header section styles
/* ========================================== */
#header {
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  text-align: center;
  padding-top: 130px;
  padding-bottom: 100px;
}

#header .header-thumb {
  background: #ffffff;
  border: 10px solid #f9f9f9;
  padding: 62px 20px 62px 20px;
}

.header-one .header-thumb,
.header-two .header-thumb,
.header-three .header-thumb,
.header-four .header-thumb,
.header-five .header-thumb {
  padding: 32px 20px 32px 20px !important;
}

/* STICKER: белая «наклейка» с мягкой тенью */
#header.header-one .header-thumb {
  padding: 26px 26px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fdfdfd 100%);
  /* «бумага» */
  border: 2px solid #fff;
  /* белая кромка */
  border-radius: 24px;
  /* мягкие углы */
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .18),
    /* основная тень вниз */
    0 2px 10px rgba(0, 0, 0, .06),
    /* дополнительная мягкая */
    0 0 0 1px rgba(0, 0, 0, .04);
  /* еле заметная внешняя окантовка */
  max-width: 780px;
  /* разумная ширина */
  margin: 0 auto;
  /* по центру */
  transition: transform .18s ease, box-shadow .25s ease;
}

/* лёгкий «подъём» при ховере на десктопе */
@media (hover:hover) {
  #header.header-one .header-thumb:hover {
    transform: translateY(-1px);
    box-shadow:
      0 16px 42px rgba(0, 0, 0, .20),
      0 3px 14px rgba(0, 0, 0, .08),
      0 0 0 1px rgba(0, 0, 0, .05);
  }
}

/* мобильная компоновка — чуть компактнее и скруглённее */
@media (max-width: 700px) {
  #header.header-one .header-thumb {
    padding: 18px 18px !important;
    border-radius: 20px;
    max-width: 92%;
  }
}

.header-one,
.header-two,
.header-three,
.header-four,
.header-five {
  height: 42vh !important;
  min-height: 420px;
  padding-top: 120px !important;
}

.header-two {
  background: url('../images/header-bg.jpg') no-repeat;
}

.header-three {
  background: none;
}

.header-four {
  background: url('../images/header-four-bg.jpg') no-repeat;
}

.header-five {
  background: url('../images/header-five-bg.jpg') no-repeat;
}

/* Portfolio section styles
/* ========================================== */
#portfolio {
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 6rem;
}

#portfolio img {
  width: 100%;
}

#portfolio .portfolio-thumb {
  position: relative;
  overflow: hidden;
  margin: 0;
}

#portfolio .portfolio-thumb .portfolio-overlay {
  background: #141414;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

#portfolio .portfolio-thumb:hover .portfolio-overlay {
  opacity: 0.9;
}

#portfolio .portfolio-thumb .portfolio-overlay .portfolio-item {
  text-align: center;
  padding: 30% 20px 20px;
}

#portfolio .portfolio-thumb .portfolio-overlay .fa {
  background: #f9f9f9;
  border-radius: 100px;
  color: #141414;
  font-size: 1.3rem;
  display: inline-block;
  width: 3.5rem;
  height: 3.5rem;
  line-height: 3.5rem;
  text-align: center;
  text-decoration: none;
  margin-bottom: 4px;
}

/*filter css*/
.filter-wrapper {
  width: 100%;
  margin-bottom: 32px;
  overflow: hidden;
}

/*isotope box css*/
.iso-box-section {
  width: 100%;
}

.iso-box-wrapper {
  width: 100%;
  padding: 0;
  clear: both;
  position: relative;
}

.iso-box>a {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.fluid-img {
  width: 100%;
  display: block;
}

/* single project section styles
/* ========================================== */
#single-project {
  padding-top: 4rem;
  padding-bottom: 6rem;
}

#single-project .project-info {
  padding-bottom: 10px;
}

#single-project img {
  padding-top: 14px;
}

/* about section styles
/* ========================================== */
#about {
  padding-top: 5rem;
  padding-bottom: 8rem;
}

#about .col-md-4 {
  padding-top: 16px;
  padding-bottom: 32px;
}

#about img {
  padding-bottom: 0px;
}

#about blockquote {
  letter-spacing: 2px;
  margin-top: 20px;
}

.about-thumb {
  margin-top: 50px;
  /* можешь поменять если хочется больше отступ */
}

/* === ABOUT (mobile): поднять только заголовок и подпись === */
@media (max-width: 767px) {
  #about .about-thumb>h1 {
    position: relative;
    top: -20px;
    /* подстрой: -6…-16px */
  }

  #about .about-thumb>p:first-of-type {
    position: relative;
    top: -20px;
    /* подстрой: -4…-12px */
    margin-bottom: 12px;
    /* чтобы не липло к следующему абзацу */
  }
}

/* Двинем только заголовок (и при желании подпись) на десктопе */
@media (min-width: 992px) {
  #about .about-thumb>h1 {
    transform: translateY(-50px);
    /* подбери -12…-24px */
  }

  /* если нужно поднять и строку "Документальный фотограф из Хельсинки." */
  #about .about-thumb>p:first-of-type {
    transform: translateY(-50px);
  }
}

/* ABOUT — поставить ряд иконок прямо под подписью (desktop) */
@media (min-width: 992px) {
  #about .about-thumb .about-iconrow {
    transform: translateY(-50px);
    /* возьми то же значение, что выше */
  }

  /* чтобы текст под иконками не прилипал */
  #about .about-thumb .about-iconrow+p {
    margin-top: 6px;
  }
}

.about-iconrow {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 6px 0 4px;
  color: #9aa;
}

.about-iconrow .ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
  transition: opacity .18s, transform .12s;
}

.about-iconrow:hover .ico {
  opacity: 1
}

.about-iconrow .ico:active {
  transform: translateY(1px) scale(.98)
}

/* авто-цвет под розовые фоны (у тебя body[data-bg="rose-vert-ultra"]) */
body[data-bg^="rose-vert"] .about-iconrow {
  color: color-mix(in srgb, #111 28%, #fff);
}

/* тёмные темы, если будут */
body[data-bg^="charcoal"] .about-iconrow {
  color: #d0d0d0
}

@media (max-width:700px) {
  .about-iconrow .ico {
    width: 20px;
    height: 20px
  }
}


/* Подпись под блоком About */
.about-signature {
  margin: -120px auto 10px;
  text-align: center;
}

.about-signature-img {
  max-width: 420px;
  /* ширина на десктопе */
  width: 70%;
  /* адаптивность */
  height: auto;
  display: inline-block;
  opacity: 0.96;
}

@media (max-width: 600px) {
  .about-signature-img {
    max-width: 320px;
    width: 80%;
  }
}

/* === About FI: подпись в текстовой колонке === */
.about-signature--text {
  margin: -125px 0 -10px;
  text-align: left;
  /* на десктопе — как рукописная строка под текстом */
}

.about-signature--text img {
  max-width: 220px;
  /* ширина подписи */
  width: 70%;
  height: auto;
  opacity: .98;
  display: inline-block;
  margin-left: 18px;
  /* 👉 сдвиг вправо — подбери 10–30px по вкусу */
}

/* на телефоне — выровнять по центру и убрать сдвиг */
@media (max-width: 767px) {
  .about-signature--text {
    text-align: center;
    margin-top: -90px;
    margin-bottom: -40px;
  }

  .about-signature--text img {
    margin-left: 0;
  }
}

/* === SECRET STRIP under FI signature === */
.about-secret-strip {
  margin: 0;
  /* 👉 когда пасхалка закрыта — блок не занимает лишнего места */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s ease, opacity .4s ease, margin .4s ease;
}

.about-secret-strip.is-open {
  /* 👉 отступы появятся только когда фото раскрыты */
  margin: 10px 0 28px;
  max-height: 280px;
  /* при необходимости подстроишь */
  opacity: 1;
}

.about-secret-caption {
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: none;
  margin: 4px 0 6px;
  color: #777;
}

.about-secret-caption .about-heart {
  font-size: 1em;
  /* чуть меньше текста, можно 1em если хочешь одинаково */
  letter-spacing: 0.05em;
  display: inline-block;
  color: #c36a7b;
}

/* Ряд мини-полароидов */
.about-secret-photos {
  display: flex;
  gap: 14px;
  flex-wrap: nowrap;
  align-items: flex-end;
  margin-top: 4px;
}

/* Собственно "полароид" */
.about-secret-photos img {
  position: relative;
  width: 30%;
  max-width: 140px;

  /* рамка полароида */
  background: #fff;
  padding: 10px 10px 26px;
  /* снизу толще — классика */
  border-radius: 12px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .16),
    0 2px 6px rgba(0, 0, 0, .08);
  object-fit: cover;

  /* лёгкая кинематографичность */
  filter: saturate(1.02) contrast(1.03);

  transform-origin: center bottom;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Немного "разбросаем" карточки по углам */
.about-secret-photos img:nth-child(1) {
  transform: rotate(-5deg);
}

.about-secret-photos img:nth-child(2) {
  transform: rotate(2deg);
}

.about-secret-photos img:nth-child(3) {
  transform: rotate(6deg) translateY(4px);
}

/* При ховере карточка "выравнивается" и поднимается */
@media (hover:hover) {
  .about-secret-photos img:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow:
      0 14px 30px rgba(0, 0, 0, .22),
      0 3px 10px rgba(0, 0, 0, .10);
  }
}

/* на мобиле — по центру и без сильных наклонов */
@media (max-width: 767px) {
  .about-secret-photos {
    justify-content: center;
  }

  .about-secret-photos img {
    max-width: 135px;
    transform: rotate(0deg);
    padding: 12px 12px 30px;
  }
}

/* Общие отступы абзацев в колонке about */
#about .about-thumb p {
  margin: 0 0 18px;
}

/* Когда пасхалка ОТКРЫТА — фотки + текст не должны налезать друг на друга */
.about-secret-strip.is-open {
  margin: 16px 0 70px;
  /* было 10 / 28 — даём больше воздуха снизу */
  max-height: 360px;
  /* чтобы всё точно влезало, можно 340, если нужно */
}

#about .about-thumb .about-secret-strip.is-open+p {
  margin-top: 50px !important;
  /* было 10 — поднимаем, чтобы текст явно отъехал */
}

/* blog & single post section styles
/* ========================================== */
#blog,
#single-post {
  padding-top: 4rem;
  padding-bottom: 6rem;
}

#blog .blog-thumb {
  padding-top: 60px;
  padding-bottom: 40px;
}

#blog .post-format,
#single-post .post-format {
  padding-bottom: 10px;
}

#blog .post-format span,
#single-post .post-format span {
  color: #888;
  font-weight: 400;
  letter-spacing: 1px;
  padding-right: 10px;
}

#blog .blog-thumb .btn {
  border-radius: 0px;
  padding: 10px 32px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 22px;
  transition: all 0.4s ease-in-out;
}

#blog .blog-thumb .btn:hover {
  background: #111112;
  border-color: transparent;
  color: #ffffff;
}

#single-post blockquote {
  margin-top: 32px;
  letter-spacing: 2px;
}

.post-image {
  margin: 25px 0px;
}

#single-post .blog-comment,
#single-post .blog-comment-form {
  margin-top: 62px;
}

#single-post .blog-comment h3,
#single-post .blog-comment-form h3 {
  padding-bottom: 20px;
}

#single-post .blog-comment .media {
  padding-bottom: 22px;
}

#single-post .blog-comment .media img {
  padding-right: 14px;
}

#single-post .blog-comment h4 {
  font-weight: 700;
}

#single-post .blog-comment-form .form-control {
  background: transparent;
  border: 1px solid #eee;
  border-radius: 0px;
  box-shadow: none;
  font-size: 16px;
  margin-bottom: 16px;
  transition: all 0.4s ease-in-out;
}

#single-post .blog-comment-form input[type="submit"] {
  background: #111112;
  border-color: transparent;
  color: #ffffff;
  height: 50px;
}


/* contact section styles
/* ========================================== */
#contact {
  padding-top: 5rem;
  padding-bottom: 4rem;
}

#contact .fa {
  font-size: 32px;
  padding-right: 0px;
  display: block;
  margin: 0 auto;
  line-height: 1;
}

#contact .contact-info-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  /* расстояние между иконкой и ником */
}

/* Кликабельные иконки в контактных карточках */
#contact .contact-info-block .icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  /* было 6px */
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}

#contact .contact-info-block .icon-link:hover,
#contact .contact-info-block .icon-link:focus-visible {
  background: transparent;
  outline: none;
}

#contact .contact-info-block .icon-link i {
  pointer-events: none;
}

#contact #map-canvas {
  border: none;
  width: 100%;
  height: 300px;
  margin-top: 40px;
}

#contact .contact-form {
  padding-top: 14px;
}

#contact .form-control {
  background: transparent;
  border: 1px solid #e7d2da;
  /* мягкий розоватый базовый */
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  margin-bottom: 16px;
  transition: border-color .25s ease, box-shadow .25s ease;
}

#contact .form-control:hover {
  border-color: #dab9c6;
  /* при hover чуть насыщеннее */
}

#contact .form-control:focus {
  border-color: #111112;
  /* контраст для доступности */
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 120, 150, .12);
}

#contact textarea {
  min-height: 100px;
}

#contact input {
  height: 50px;
}

/* Contact CTA — брендовый ghost-pill */
#contact input[type='submit'] {
  appearance: none;
  cursor: pointer;

  display: block;
  width: 100%;
  min-height: 54px;
  height: auto;

  background: transparent;
  /* ghost */
  color: #111;
  /* читаемый текст */
  border: 2px solid color-mix(in srgb, var(--rose-6, #ff7aa6) 55%, #fff);
  border-radius: 999px;
  /* пилюля */
  letter-spacing: .5px;
  font-weight: 500;

  margin: 0 auto;
  /* центр в .contact-submit */
  transition: background-color .2s ease, border-color .2s ease,
    box-shadow .2s ease, transform .06s ease, color .2s ease;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .04), 0 10px 24px rgba(255, 160, 190, .14);
}

#contact input[type='submit']:hover {
  background: color-mix(in srgb, var(--rose-2, #ffe6ee) 40%, #fff);
  border-color: color-mix(in srgb, var(--rose-6, #ff7aa6) 68%, #fff);
  box-shadow: 0 12px 28px rgba(255, 160, 190, .22);
}

#contact input[type='submit']:active {
  transform: translateY(1px) scale(.99);
}

#contact input[type='submit']:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rose-6, #ff7aa6) 60%, #fff);
  outline-offset: 2px;
}

/* Фолбэк, если нет color-mix */
@supports not (background: color-mix(in srgb, #fff, #000)) {
  #contact input[type='submit'] {
    border-color: #ff8fb1;
  }
}

.contact-submit {
  width: 50%;
  margin: 28px auto 0;
  /* было 0 — теперь есть воздух сверху */
  text-align: center;
}

#contact .col-md-4 {
  background: transparent;
  /* один цвет со страницей */
  padding: 28px 16px;
  /* аккуратные отступы */
  position: static;
  /* снимаем позиционирование */
  text-align: center;
  /* иконки и текст по центру */
  margin-top: 200px;
}

#contact .row {
  padding-bottom: 15px;
}


/* footer section styles
/* ========================================== */
footer.wide-footer {
  width: 100%;
  background: #141414;
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
  position: static;
  box-sizing: border-box;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.footer-top-row {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 700px) {
  .footer-top-row {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* social icon */
.social-icon {
  padding: 0;
  margin: 0;
}

.social-icon li {
  list-style: none;
  display: inline-block;
}

.social-icon li a {
  border-radius: 100px;
  border: 1px solid transparent;
  color: #909090;
  font-size: 18px;
  width: 50px;
  height: 50px;
  line-height: 48px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  transition: all 0.4s ease-in-out;
  padding: 0px;
  margin-top: 14px;
  margin-right: 8px;
  margin-left: 8px;
  position: relative;
  top: 0px;
}

.social-icon li a:hover {
  background: #ffffff;
}

/* ------------------------------
   Responsive Mobile styles
------------------------------ */

@media (max-width: 980px) {
  .intro-inner {
    top: 30%;
  }

  #contact .col-md-4 {
    padding: 24px 16px;
    text-align: center;
    margin-top: 80px;
  }

  #contact .col-md-4 p {
    font-size: 12px;
  }

  #contact #map-canvas {
    margin-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .brand {
    padding-left: 24px;
  }

  .header-one,
  .header-two,
  .header-three,
  .header-four,
  .header-five {
    min-height: 380px;
    padding-top: 80px !important;
  }

  #about .col-md-4,
  #single-project .col-md-3 {
    padding-bottom: 32px;
  }
}

@media (max-width: 700px) {
  h1 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 13px;
    letter-spacing: 3px;
  }

  .filter-wrapper {
    padding: 0;
  }

  #contact {
    padding-bottom: 4rem;
  }

  #contact .col-md-4 {
    padding: 20px 16px;
    margin-top: 40px;
  }

  .contact-submit {
    width: 72%;
    margin-top: 18px;
  }
}

@media (max-width: 450px) {
  .intro-inner {
    top: 50%;
  }
}

/* ------------------------------
   Header Overlay
------------------------------ */

.header-one {
  position: relative;
}

.header-one::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.20);
  z-index: 1;
  pointer-events: none;
}

.header-thumb {
  position: relative;
  z-index: 2;
}

/* Hero title — TAN Moonlight (полировка) */
.header-one .header-thumb h1 {
  font-family:
    "TAN Moonlight",
    "TAN Moonlight Fallback",
    system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Source Sans Pro", sans-serif;
  font-weight: 400;
  /* шрифт подключён с весом 400 */
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.16;
  letter-spacing: .004em;
  /* ПЛЮС, не минус */
  text-transform: none;
  text-wrap: balance;
  color: #111;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Подзаголовок под hero — в таком же стиле, только помельче */
.header-one .header-thumb .hero-tagline {
  margin-top: 8px;
  font-family:
    "TAN Moonlight",
    "TAN Moonlight Fallback",
    system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Source Sans Pro", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: .004em;
  text-transform: none;
  color: #111;
}

/* на больших экранах можно чуть сильнее раздвинуть буквы */
@media (min-width: 1200px) {
  .header-one .header-thumb h1 {
    letter-spacing: .01em;
  }
}

/* DESKTOP: карточки ровные, без наклонов */
@media (min-width: 992px) {
  .pricing-grid .price-card {
    transition: transform .14s ease, box-shadow .2s ease;
    transform: none;
  }
}

/* ====== HEADER ====== */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 0 4px;
}

/* Логотип */
.brand {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Правая панель (языки + бургер) */
.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Кликабельное название текущей страницы (desktop) */
.header-page-trigger {
  background: none;
  border: none;
  padding: 0;
  margin-right: 18px;

  font: 600 13px/1.2 "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;

  cursor: pointer;
  color: #111111;
  text-decoration: none;
  text-underline-offset: 3px;
}

.header-page-trigger:hover,
.header-page-trigger:focus-visible {
  opacity: 0.9;
}

body.header-menu-open .header-page-trigger {
  opacity: 0.7;
}

/* Языковой переключатель */
.language-switch {
  list-style: none;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

.language-switch li a {
  color: #333333;
  text-decoration: none;
  transition: color 0.3s;
  line-height: 1;
}

.language-switch li a:hover {
  color: #888;
}

/* Гамбургер */
.navicon {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* ====== MOBILE ====== */
@media (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }

  .header-row {
    height: 70px;
    padding: 0 15px;
  }

  /* крестик (X) — поверх всего */
  .list-menu .ion-close-round {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    z-index: 100003;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center
  }

  /* MOBILE: языки по центру сверху, ровно в линию с крестом */
  /* прячем языки по умолчанию на мобилке */
  .language-switch.mobile-only {
    display: none;
  }

  /* когда меню открыто (у тебя в этот момент на body вешается .no-scroll) —
     показываем языки и центрируем их по горизонтали */
  body.no-scroll .language-switch.mobile-only {
    display: flex !important;
    position: fixed;
    /* к окну, не к диву */
    top: 56px;
    /* возьми то же значение, что у крестика */
    left: 50%;
    transform: translateX(-50%);
    /* идеальный центр по X */
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 100002;
    /* поверх оверлея и под курсором */
  }

  body.no-scroll .language-switch.mobile-only a {
    color: #fff !important;
    text-decoration: none;
  }
}

/* анимация для языков в мобильном оверлее */
body.no-scroll .language-switch.mobile-only a {
  transition: color var(--ui-ease), filter var(--ui-ease), transform .12s;
  -webkit-tap-highlight-color: rgba(255, 255, 255, .15);
  opacity: .9;
  /* лёгкое притухание в базе, чтобы эффект был заметнее */
}

body.no-scroll .language-switch.mobile-only a:hover,
body.no-scroll .language-switch.mobile-only a:focus-visible {
  filter: brightness(var(--hover-brightness)) contrast(1.05);
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  body.no-scroll .language-switch.mobile-only a:active {
    filter: brightness(var(--tap-brightness)) contrast(1.05);
    transform: scale(var(--tap-scale));
  }
}


/* контент внутри оверлея — без абсолютов и на всю ширину */
.list-menu .intro-inner {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  text-align: center !important;
}

/* список пунктов — обнуляем отступы и центрируем */
.list-menu ul#nav-menu {
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none;
  width: 100%;
  max-width: 480px;
  /* узкая колонка по центру */
  text-align: center;
  /* ключ к выравниванию текста */
}

.list-menu ul#nav-menu>li {
  display: block;
  margin: 0 !important;
  padding: 12px 0 !important;
  /* удобная тап-зона */
  list-style: none;
}

.list-menu ul#nav-menu>li>a {
  display: inline-block;
  transform: none !important;
}

.list-menu a {
  pointer-events: auto;
}


/* блокируем прокрутку при открытом меню */
html.no-scroll,
body.no-scroll {
  overflow: hidden;
  height: 100%;
}

@media (min-width: 768px) {
  .language-switch.desktop-only {
    transform: none;
  }
}

/* Десктоп: подвинуть бургер ближе к правому краю */
@media (min-width: 768px) {
  .navicon {
    margin-right: 0;
    margin-left: 16px;
    padding-top: 0;
  }

  .header-row {
    padding: 0 6px;
  }

  /* Языки + бургер правее и чуть ниже */
  .header-right {
    margin-right: -40px;
  }

  .language-switch {
    margin-right: 10px;
  }
}



/* Десктоп: логотип в одну строку */
.brand a {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
}

/* Мобайл: логотип в две строки и бургер у правого края */
@media (max-width: 767px) {
  .header-row {
    height: 96px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .brand {
    font-size: 20px;
    margin-top: 10px;
    transform: none;
  }

  .brand a {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.05;
    white-space: normal;
    /* разрешаем перенос */
  }

  /* бургер ближе к правой кромке */
  .header-right {
    margin-left: auto;
    margin-right: -8px;
    margin-top: 10px;
    transform: none;
  }

  /* группа справа прижимается вправо */
  .navicon {
    margin-right: -10px;
  }
}

/* === HERO / Header-one без фоновой картинки из CSS === */
#header.header-one {
  position: relative;
  /* для ::before и абсолютного <picture> */
  height: auto !important;
  /* как и было */
  min-height: 420px !important;
  padding-top: 150px !important;
}

/* Растягиваем <picture class="hero-bg"> как подложку */
.hero-bg,
.hero-bg>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* как background-size: cover */
  display: block;
  z-index: 0;
  /* под контентом */
}

/* Сдвигаем букет чуть выше в кадре,
   чтобы снизу осталось чуть больше фона */
.hero-bg>img {
  object-position: center 35%;
  /* можешь поиграть:
     45% – букет ниже
     35% – ещё выше */
}

.header-thumb {
  position: relative;
  z-index: 2;
}

/* Мобильная настройка шапки, если нужна пониже */
@media (max-width: 768px) {
  #header.header-one {
    min-height: 380px !important;
    padding-top: 80px !important;
  }
}

/* --- Burger click area (без камеры) --- */
.header-row .circle {
  position: static !important;
  margin: 0 !important;
  width: 45px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  opacity: 1;
  transform: scale(1);
  transition: opacity .22s ease, transform .22s ease;
}

/* Когда меню открыто — бургер чуть «тускнеет» */
body.header-menu-open .header-row .circle {
  opacity: 0.4;
}

/* Показываем обычный ion-navicon, без кастомной камеры */
.header-row .circle i {
  font-size: 28px;
  line-height: 1;
  pointer-events: none;
}

/* Убираем нарисованную камеру */
.header-row .circle::before,
.header-row .circle::after {
  content: none;
}

/* Гарантируем клики по пунктам меню и языкам в оверлее */
.list-menu a,
.language-switch.mobile-only {
  position: relative;
  z-index: 100001;
  pointer-events: auto;
}

.iso-box-wrapper {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 0 72px !important;
  position: relative !important;
}

#portfolio .container {
  max-width: 1400px;
}

/* ширина одной колонки — строго завязана на --cols */
.grid-sizer {
  width: calc((100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols));
}

.gutter-sizer {
  width: var(--grid-gap);
}

/* Карточка */
.iso-box {
  width: calc((100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols)) !important;
  margin: 0 0 var(--grid-gap) 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform .22s ease, opacity .18s ease;
  will-change: transform;
  /* убрали left/top */
}

.iso-box picture {
  display: block;
  line-height: 0;
}

/* Мягкие углы карточек портфолио */
.iso-box,
.portfolio-thumb {
  border-radius: var(--radius-soft);
  overflow: hidden;
  /* чтобы содержимое не вылезало за уголки */
}

.iso-box img,
.portfolio-thumb img {
  border-radius: inherit;
  /* картинка повторяет скругление */
  display: block;
}

/* чтобы псевдо-оверлеи тоже повторяли скругление */
.iso-box::before,
.iso-box::after {
  border-radius: inherit;
}

/* если пользователь просит "меньше анимации" — уважаем */
@media (prefers-reduced-motion: reduce) {
  .iso-box img {
    transition: none !important;
    transform: none !important;
  }
}

/* 2 колонки */
@media (max-width: 900px) {
  :root {
    --cols: 2;
  }
}

/* 1 колонка */
@media (max-width: 600px) {
  :root {
    --cols: 1;
  }
}


/* чуть меньше пустоты над футером */
#portfolio {
  padding-bottom: 3rem;
}

@media (max-width:700px) {
  #portfolio {
    padding-bottom: 2rem;
  }
}

/* плавное появление карточек */
@keyframes cardFade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.iso-box.is-visible {
  animation: none !important;
}

/* === Friendlier "Показать ещё" button === */
.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;

  margin: 24px auto 0;
  padding: 12px 18px;
  min-height: 44px;
  /* комфортная тап-зона */
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-soft);
  /* тот же радиус, что у карточек */
  background: #111;
  color: #fff;

  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  /* мягче, чем 2px */
  text-transform: none;
  /* без КАПСА — дружелюбнее */
  cursor: pointer;

  transition:
    background-color .2s ease,
    transform .1s ease,
    opacity .2s ease,
    box-shadow .2s ease;

  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.btn-more:hover {
  opacity: .96;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}

.btn-more:active {
  transform: translateY(1px) scale(.99);
}

.btn-more:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, .35), 0 8px 22px rgba(0, 0, 0, .12);

}

.btn-more[hidden] {
  display: none !important;
}

/* Кнопка "Показать ещё" — состояние загрузки */
.btn-more.is-busy {
  pointer-events: none;
  opacity: .85;
  position: relative;
}

.btn-more.is-busy::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.2em;
  animation: btnspin .6s linear infinite;
}

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

/* Категорный режим: показываем все карточки без требования .is-visible */
.mode-cat .iso-box {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Мягкая кривая для анимаций Isotope */
.iso-box {
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* ===== BASE (один раз) ===== */
.iso-box {
  position: relative;
  overflow: hidden;
  transition: box-shadow .35s cubic-bezier(.22, .61, .36, 1);
}

.iso-box img {
  display: block;
  width: 100%;
  height: auto;
  /* убрали translateZ(0) и heavy will-change */
  will-change: auto;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), filter .35s;
}

@media (hover:hover) {
  .iso-box:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
  }
}

/* ===== РЕЖИМЫ ПО <body data-fx="..."> ===== */

/* 1) gray→color + zoom (кинематографично) */
body[data-fx~="grayzoom"] .iso-box img {
  filter: grayscale(22%) saturate(90%) contrast(98%);
}

@media (hover:hover) {
  body[data-fx~="grayzoom"] .iso-box:hover img {
    filter: none;
    transform: scale(1.05);
  }
}

/* 2) zoom + pan вверх на 2px */
@media (hover:hover) {
  body[data-fx="pan"] .iso-box:hover img {
    transform: scale(1.06) translateY(-2px);
  }
}

/* 3) soft glow вокруг кадра */
body[data-fx="glow"] .iso-box::after {
  content: "";
  position: absolute;
  inset: -8%;
  background: rgba(255, 255, 255, .12);
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}

@media (hover:hover) {
  body[data-fx="glow"] .iso-box:hover::after {
    opacity: 1;
  }

  body[data-fx="glow"] .iso-box:hover img {
    transform: scale(1.04);
  }
}

/* 4) overlay + плюс в центре */
body[data-fx="overlay"] .iso-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(transparent 55%, rgba(0, 0, 0, .35));
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}

body[data-fx="overlay"] .iso-box::after {
  content: "+";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  font: 600 22px/1 system-ui, sans-serif;
  color: #fff;
  letter-spacing: .04em;
  opacity: 0;
  transition: transform .28s, opacity .28s;
  pointer-events: none;
}

@media (hover:hover) {
  body[data-fx="overlay"] .iso-box:hover::before {
    opacity: 1;
  }

  body[data-fx="overlay"] .iso-box:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  body[data-fx="overlay"] .iso-box:hover img {
    transform: scale(1.04);
  }
}

/* 5) subtle rotate (чуть-чуть «жизни») */
@media (hover:hover) {
  body[data-fx="rotate"] .iso-box:hover img {
    transform: scale(1.045) rotateZ(.4deg);
  }
}

/* 6) zoom-out reveal (из лёгкого зума в 1.0 + «резкость») */
body[data-fx~="zoomout"] .iso-box img {
  transform: scale(1.08);
  filter: saturate(103%) contrast(100%) blur(.2px);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), filter .35s;
}

@media (hover:hover) {
  body[data-fx~="zoomout"] .iso-box:hover img {
    transform: scale(1.00);
    filter: none;
  }
}

/* OVERRIDE: zoomout без изменения цвета */
body[data-fx~="zoomout"] .iso-box img,
body[data-fx~="zoomout"] .iso-box:hover img {
  filter: none !important;
}

/* 7) warm lift (слегка теплее и сочнее на hover) */
@media (hover:hover) {
  body[data-fx="warm"] .iso-box:hover img {
    filter: saturate(112%) contrast(104%) sepia(8%);
    transform: scale(1.04);
  }
}

/* 8) shine sweep (диагональный блик) */
body[data-fx="shine"] .iso-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}

@media (hover:hover) {
  body[data-fx="shine"] .iso-box:hover::before {
    transform: translateX(120%);
  }

  body[data-fx="shine"] .iso-box:hover img {
    transform: scale(1.035);
  }
}

/* 9) границы-уголки (border reveal) */
body[data-fx="corners"] .iso-box::before,
body[data-fx="corners"] .iso-box::after {
  content: "";
  position: absolute;
  width: 22%;
  height: 22%;
  pointer-events: none;
  opacity: .85;
  border: 2px solid rgba(255, 255, 255, .9);
  transform: scale(.9);
  transition: transform .28s, opacity .28s;
}

body[data-fx="corners"] .iso-box::before {
  left: 8px;
  top: 8px;
  border-right: none;
  border-bottom: none;
}

body[data-fx="corners"] .iso-box::after {
  right: 8px;
  bottom: 8px;
  border-left: none;
  border-top: none;
}

@media (hover:hover) {

  body[data-fx="corners"] .iso-box:hover::before,
  body[data-fx="corners"] .iso-box:hover::after {
    transform: scale(1);
  }

  body[data-fx="corners"] .iso-box:hover img {
    transform: scale(1.035);
  }
}

/* 10) vignette мягкая (центр светлее) */
body[data-fx="vignette"] .iso-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .28));
  opacity: 0;
  transition: opacity .35s;
}

@media (hover:hover) {
  body[data-fx="vignette"] .iso-box:hover::before {
    opacity: 1;
  }

  body[data-fx="vignette"] .iso-box:hover img {
    transform: scale(1.04);
  }
}

/* 11) Простой zoom-in без изменения цвета */
body[data-fx~="zoomin"] .iso-box img {
  transform: none;
}

@media (hover:hover) {
  body[data-fx~="zoomin"] .iso-box:hover img {
    transform: scale(1.06);
  }
}

/* 3D-tilt режим (включается, когда на <body data-fx="tilt">) */
@media (hover:hover) {
  body[data-fx~="tilt"] .iso-box {
    perspective: 950px;
  }

  /* перспектива для ребёнка */
}

/* Гибрид: tilt + мягкий zoom-out при hover */
body[data-fx~="tilt"] .iso-box img {
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), filter .22s ease-out;
}

@media (hover:hover) {
  body[data-fx~="tilt"] .iso-box:hover img {
    transform: scale(1.00);
    /* «отпускаем» назад при наведении */
  }
}

/* если у пользователя Reduce Motion — ничего не дёргаем */
@media (prefers-reduced-motion: reduce) {
  body[data-fx~="tilt"].iso-box img {
    transition: none !important;
  }
}

@media (hover:hover) {

  /* Зум происходит "к месту" наведения курсора */
  body[data-fx~="tilt"] .iso-box img {
    transform-origin: var(--ox, 50%) var(--oy, 50%);
  }
}

/* === TILT: блик + динамическая тень (по CSS-переменным из JS) === */
@media (hover:hover) {
  body[data-fx~="tilt"] .iso-box {
    /* позиция блика и направление тени — JS проставит */
    --x: 50%;
    --y: 50%;
    /* где блик */
    --dx: 0;
    --dy: 0;
    /* куда смещать тень */
    position: relative;
  }

  /* блик сверху */
  body[data-fx~="tilt"] .iso-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--x) var(--y),
        rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 55%);
    opacity: 0;
    transition: opacity .25s;
  }

  /* мягкая тень под карточкой */
  body[data-fx~="tilt"] .iso-box::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 24px;
    pointer-events: none;
    filter: blur(8px);
    background: radial-gradient(60% 40% at calc(50% + var(--dx)*20px) 0%,
        rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 70%);
    opacity: 0;
    transition: opacity .25s;
  }

  body[data-fx~="tilt"] .iso-box:hover::before,
  body[data-fx~="tilt"] .iso-box:hover::after {
    opacity: 1;
  }
}

/* старт: лёгкий blur и небольшой масштаб */
.img-blur {
  filter: blur(12px);
  transform: scale(1.02);
}

/* когда загрузилось — плавно убираем эффекты */
.img-blur.is-loaded {
  filter: none;
  transform: none;
  transition: filter .35s, transform .35s;
}

/* Микро-мягкость в момент входа курсора */
@media (hover:hover) {

  /* немного ускорим фильтр, чтобы мягко погасить "софт" */
  body[data-fx~="tilt"].iso-box img {
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), filter .22s ease-out;
  }

  /* пока курсор только вошёл — слегка софтим картинку */
  body[data-fx~="tilt"] .iso-box.is-entering img {
    filter: blur(.35px);
  }
}

/* === МЯГКОЕ ВЫПЛЫВАНИЕ КАРТОЧЕК (для фильтров и "Показать ещё") === */
/* Анимируем IMG внутри карточки, чтобы не конфликтовать с transform Isotope */
.iso-box.iso-soft-start img {
  opacity: 0;
  transform: translateY(10px) scale(.985);
}

.iso-box.iso-soft-in img {
  opacity: 1;
  transform: none;
  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--st, 0ms);
  /* задержка для «волны» */
}

/* уважаем Reduce Motion */
@media (prefers-reduced-motion: reduce) {

  .iso-box.iso-soft-start img,
  .iso-box.iso-soft-in img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.iso-box img {
  backface-visibility: hidden;
  /* помогает рендереру */
}

/* без базового зума: картинка статична, масштаб только при hover из JS */
body[data-fx~="tilt"] .iso-box img {
  transform: none;
}


/* Подсказки под полями */
.form-group {
  margin-bottom: 22px;
}

.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #888;
}

.form-hint.error {
  color: #d33;
}

/* Красная рамка при ошибке */
.form-control.field-error {
  border-color: #d33 !important;
  outline: none;
}

.site-logo {
  display: block;
  height: var(--logo-h-mobile);
  width: auto;
  /* сохраняем пропорции */
  image-rendering: auto;
  /* на всякий случай */
}

/* десктоп */
@media (min-width: 768px) {
  .site-logo {
    height: var(--logo-h-desktop);
  }
}

/* если логотипу тесно — можно немного увеличить высоту шапки */
@media (min-width: 768px) {
  .navbar {
    max-height: 110px;
    height: 110px;
  }

  .brand {
    margin-top: 30px;
    /* подстрой по вкусу */
  }
}

/* === Helpers === */
.nobr {
  white-space: nowrap;
}

/* === Hero title: ширина и центрирование на десктопе === */
@media (min-width: 768px) {
  .header-one .header-thumb h1 {
    max-width: 1700px;
    /* подбери 820–960 по вкусу */
    margin: 0 auto;
  }
}

/* Hero title: две строки (вторая строка чуть меньше) */
.header-one .header-thumb h1 .line1,
.header-one .header-thumb h1 .line2 {
  display: block;
}

.header-one .header-thumb h1 .line1 {
  letter-spacing: .006em;
  margin-bottom: .06em;
}

.header-one .header-thumb h1 .line2 {
  font-size: .94em;
  letter-spacing: .005em;
  margin-top: .01em;
  white-space: normal;
}

@media (max-width:700px) {
  .header-one .header-thumb h1 .line2 {
    font-size: .96em;
    /* на мобилке уменьшение всего ~2% */
  }
}

/* === FILTER as CHIPS (современный вид) === */
.filter-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.filter-wrapper li {
  margin: 0;
  /* убираем старые отступы li */
}

.filter-wrapper li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  /* удобная высота */
  padding: 0 14px;
  /* горизонтальный внутренний отступ */
  border: none;
  box-shadow: none;
  border-radius: 999px;
  /* именно «пилюля», не мягкий угол */
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .3px;
  /* аккуратнее, чем 2px */
  text-transform: none;
  /* без КАПСА — читабельнее */
  line-height: 1;
  cursor: pointer;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .08s ease;
}

/* Единый шрифт для кнопок фильтра на всех языках (перекрывает базовый) */
.filter-wrapper li a {
  font-family: "Unbounded", system-ui, -apple-system, "Segoe UI",
    "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  /* как на EN-скрине */
  letter-spacing: .3px;
}

/* hover / active / focus */
.filter-wrapper li a:hover {
  background: #111;
  color: #fff;
}

.filter-wrapper li a:active {
  transform: translateY(1px);
}

.filter-wrapper li a:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* текущее состояние фильтра (Isotope обычно даёт .is-checked) */
.filter-wrapper li a.is-checked,
.filter-wrapper li a.active,
.filter-wrapper li a[aria-pressed="true"] {
  background: #111;
  color: #fff;
  border: none;
  box-shadow: none;
}

/* мобильная настройка: чуть больше кнопки */
@media (max-width: 480px) {
  .filter-wrapper li a {
    height: 40px;
    padding: 0 16px;
    font-size: 15px;
  }
}

/* уважение Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  .filter-wrapper li a {
    transition: none;
  }
}

/* === Reusable hero style (как на index) === */
#header.hero-index-style {
  position: relative;
}


#header.hero-index-style .header-thumb {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 6px solid #f1f1f1;
  border-radius: clamp(10px, 1.2vw, 18px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
  padding: 24px 20px !important;
}

#header.hero-index-style .header-thumb h1 {
  font-family:
    "TAN Moonlight",
    "TAN Moonlight Fallback",
    system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Source Sans Pro", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.22;
  letter-spacing: .006em;
  text-transform: none;
  color: #111;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width:768px) {
  #header.hero-index-style .header-thumb h1 {
    max-width: 1000px;
    margin: 0 auto;
  }
}

/* === ABOUT-RU: центр + шрифт Motter для заголовка в белой карточке === */
html[lang="ru"] #header.hero-index-style .header-thumb {
  display: grid;
  place-items: center;
  /* центр по вертикали и горизонтали */
  text-align: center;
  min-height: 140px;
  padding: 24px 20px !important;
}

/* на мобилке — помягче */
@media (max-width: 767px) {
  html[lang="ru"] #header.hero-index-style .header-thumb {
    margin-top: 14px;
    /* подстрой: 8–22px */
  }
}

/* 2) опустить сам текст внутри карточки (баланс верх/низ) */
html[lang="ru"] #header.hero-index-style .header-thumb {
  padding-top: 55px !important;
  /* ↑ больше сверху — текст ниже */
  padding-bottom: 14px !important;
  /* ↓ чуть меньше снизу */
}

/* Home only: сделать такой же размер, как в index-fi (.header-one) */
.page-home #header.hero-index-style .header-thumb h1 {
  font-size: clamp(26px, 3.2vw, 52px);
  letter-spacing: .006em;
  line-height: 1.22;
  text-transform: none;
}

.page-home #header.hero-index-style .header-thumb h1 .line2 {
  font-size: .90em;
  letter-spacing: .014em;
  margin-top: .01em;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .page-home #header.hero-index-style .header-thumb h1 {
    max-width: 1000px;
    margin: 0 auto;
  }
}

/* === Page background presets === */
/* по умолчанию */
body:not([data-bg]),
body[data-bg="white"] {
  --page-bg-color: #ffffff;
  --page-bg-img: none;
}

/* тёплый светло-серый */
body[data-bg="warm"] {
  --page-bg-color: #f7f5f3;
  --page-bg-img: none;
}

/* мягкий вертикальный градиент */
body[data-bg="gradient"] {
  --page-bg-color: #ffffff;
  --page-bg-img: linear-gradient(180deg, #ffffff 0%, #faf7f4 50%, #f5f2ee 100%);
  --page-bg-repeat: no-repeat;
}

/* «зерно» (точечный шум) */
body[data-bg="grain"] {
  --page-bg-color: #ffffff;
  --page-bg-img: radial-gradient(rgba(0, 0, 0, .028) 1px, transparent 1.2px);
  --page-bg-size: 8px 8px;
}

/* бумага (чуть выразительнее) */
body[data-bg="paper"] {
  --page-bg-color: #fffdfa;
  --page-bg-img:
    radial-gradient(1200px 600px at 50% -5%, rgba(0, 0, 0, .06), transparent 60%),
    radial-gradient(1200px 600px at 50% 105%, rgba(0, 0, 0, .06), transparent 60%),
    radial-gradient(rgba(0, 0, 0, .022) 1px, transparent 1.4px);
  --page-bg-size: auto, auto, 10px 10px;
  --page-bg-repeat: no-repeat, no-repeat, repeat;
}

/* Розовые пресеты (исправлено) */
body[data-bg="rose"],
body[data-bg="rose-strong"],
body[data-bg="rose-hot"] {
  --page-bg-size: auto;
}

/* базовый мягкий розовый */
body[data-bg="rose"] {
  --page-bg-color: #faf2f2;
  --page-bg-img: linear-gradient(180deg, #fff0f0 0%, #fff5f8 45%, #ffffff 100%);
  --page-bg-repeat: no-repeat;
}

/* сильнее розовый */
body[data-bg="rose-strong"] {
  --page-bg-color: #fae4ea;
  --page-bg-img:
    linear-gradient(180deg, rgba(255, 120, 150, .10), rgba(255, 120, 150, 0) 70%),
    linear-gradient(180deg, #fff0f5 0%, #ffd9e6 50%, #fff0f5 100%);
  --page-bg-repeat: no-repeat, no-repeat;
}

/* самый насыщенный вариант */
body[data-bg="rose-hot"] {
  --page-bg-color: #f9d9e3;
  --page-bg-img:
    linear-gradient(180deg, rgba(255, 120, 150, .14), rgba(255, 120, 150, 0) 70%),
    linear-gradient(180deg, #ffe8f0 0%, #ffc3d6 50%, #ffe8f0 100%);
  --page-bg-repeat: no-repeat, no-repeat;
}

/* === EXTRA PRESETS === */

/* Тёплый кремовый (почти белый) */
body[data-bg="cream"] {
  --page-bg-color: #fdfaf6;
  --page-bg-img: none;
}

/* Лён / бумага с мягкими тенями + лёгкие точки */
body[data-bg="linen"] {
  --page-bg-color: #fbf8f3;
  --page-bg-img:
    radial-gradient(1200px 600px at 50% -8%, rgba(0, 0, 0, .045), transparent 65%),
    radial-gradient(1200px 600px at 50% 108%, rgba(0, 0, 0, .045), transparent 65%),
    radial-gradient(rgba(0, 0, 0, .022) 1px, transparent 1.4px);
  --page-bg-size: auto, auto, 10px 10px;
  --page-bg-repeat: no-repeat, no-repeat, repeat;
}

/* Песок — тёплый вертикальный градиент */
body[data-bg="sand"] {
  --page-bg-color: #f6efe6;
  --page-bg-img: linear-gradient(180deg, #f9f2ea 0%, #efe3d2 60%, #faf6ef 100%);
  --page-bg-repeat: no-repeat;
}

/* Рассвет — персиковый градиент (очень нежно) */
body[data-bg="dawn"] {
  --page-bg-color: #fff7f3;
  --page-bg-img: linear-gradient(180deg, #fff3eb 0%, #ffe6e9 50%, #fff7f3 100%);
  --page-bg-repeat: no-repeat;
}

/* Закат — лаванда → сланец (атмосферно) */
body[data-bg="dusk"] {
  --page-bg-color: #f3f1f9;
  --page-bg-img: linear-gradient(180deg, #efe9ff 0%, #e9e7f7 45%, #eef1f7 100%);
  --page-bg-repeat: no-repeat;
}

/* Туман — прохладный нейтральный */
body[data-bg="fog"] {
  --page-bg-color: #f5f6f7;
  --page-bg-img: linear-gradient(180deg, #f6f7f8 0%, #eef1f4 55%, #f7f8f9 100%);
  --page-bg-repeat: no-repeat;
}

/* Шалфей — лёгкий зелёный (натуральный) */
body[data-bg="sage"] {
  --page-bg-color: #f3f6f2;
  --page-bg-img: linear-gradient(180deg, #f4f8f1 0%, #e8f1ea 55%, #f5f8f4 100%);
  --page-bg-repeat: no-repeat;
}

/* Океан — мягкий сине-бирюзовый */
body[data-bg="ocean"] {
  --page-bg-color: #f0f6f8;
  --page-bg-img: linear-gradient(180deg, #e9f6fb 0%, #e1eff4 55%, #f0f6f8 100%);
  --page-bg-repeat: no-repeat;
}

/* Лаванда — нежный фиолетовый фон */
body[data-bg="lavender"] {
  --page-bg-color: #f7f4fb;
  --page-bg-img: linear-gradient(180deg, #f6f0ff 0%, #efe7fb 55%, #faf8ff 100%);
  --page-bg-repeat: no-repeat;
}

/* Темный «charcoal» (для белых карточек/контента поверх) */
body[data-bg="charcoal"] {
  --page-bg-color: #121212;
  --page-bg-img: linear-gradient(180deg, #1a1a1a 0%, #101010 100%);
  --page-bg-repeat: no-repeat;
  --page-bg-attach: scroll;
  /* можно поставить fixed для лёгкого параллакса */
}

/* Charcoal + мягкая плёнка (зерно) */
body[data-bg="charcoal-grain"] {
  --page-bg-color: #121212;
  --page-bg-img:
    linear-gradient(180deg, #1a1a1a 0%, #101010 100%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.35px);
  --page-bg-size: auto, 9px 9px;
  --page-bg-repeat: no-repeat, repeat;
}

/* Нежная сетка (почти незаметная) — для светлых страниц */
body[data-bg="grid"] {
  --page-bg-color: #ffffff;
  --page-bg-img:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .018), rgba(0, 0, 0, .018) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .018), rgba(0, 0, 0, .018) 1px, transparent 1px, transparent 18px);
  --page-bg-size: auto, auto;
  --page-bg-repeat: repeat, repeat;
}

/* Любой пастельный + зерно (удобный базовый микс) */
body[data-bg="pastel-grain"] {
  --page-bg-color: #fafafa;
  --page-bg-img:
    linear-gradient(180deg, #ffffff 0%, #f7f7f7 55%, #ffffff 100%),
    radial-gradient(rgba(0, 0, 0, .025) 1px, transparent 1.3px);
  --page-bg-size: auto, 8px 8px;
  --page-bg-repeat: no-repeat, repeat;
}

/* === MORE ROSE PRESETS === */

/* сверх-нежный розовый (еле заметный) */
body[data-bg="rose-soft"] {
  --page-bg-color: #fff7f9;
  --page-bg-img: linear-gradient(180deg, #fff4f7 0%, #fff8fb 55%, #ffffff 100%);
  --page-bg-repeat: no-repeat;
}

/* классический «румянец» */
body[data-bg="rose-blush"] {
  --page-bg-color: #fff2f6;
  --page-bg-img: linear-gradient(180deg, #fff0f5 0%, #ffe6ee 52%, #fff6f9 100%);
  --page-bg-repeat: no-repeat;
}

/* розовый → персик (теплее) */
body[data-bg="rose-peach"] {
  --page-bg-color: #fff4f0;
  --page-bg-img: linear-gradient(180deg, #ffe9ef 0%, #ffe9e1 55%, #fff7f2 100%);
  --page-bg-repeat: no-repeat;
}

/* розовый → бежевый (натурально) */
body[data-bg="rose-sand"] {
  --page-bg-color: #fdf5f2;
  --page-bg-img: linear-gradient(180deg, #ffeef3 0%, #f7ece3 58%, #fff7f3 100%);
  --page-bg-repeat: no-repeat;
}

/* розовый → лаванда (чуть прохладнее) */
body[data-bg="rose-lavender"] {
  --page-bg-color: #f9f2ff;
  --page-bg-img: linear-gradient(180deg, #ffeaf2 0%, #f1eaff 52%, #faf7ff 100%);
  --page-bg-repeat: no-repeat;
}

/* розовый «закат»: мягкий цвет сверху + база */
body[data-bg="rose-sunset"] {
  --page-bg-color: #fff6f8;
  --page-bg-img:
    linear-gradient(180deg, rgba(255, 110, 150, .12) 0%, rgba(255, 110, 150, 0) 62%),
    linear-gradient(180deg, #fff0f5 0%, #ffdbe7 50%, #fff3f8 100%);
  --page-bg-size: auto, auto;
  --page-bg-repeat: no-repeat, no-repeat;
}

/* розовый в углах (corner glow) */
body[data-bg="rose-corners"] {
  --page-bg-color: #fff7f9;
  --page-bg-img:
    radial-gradient(800px 500px at 0% 0%, rgba(255, 170, 190, .18), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(255, 170, 190, .16), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(255, 170, 190, .16), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(255, 170, 190, .18), transparent 60%),
    linear-gradient(180deg, #fff5f8 0%, #ffffff 100%);
  --page-bg-size: auto, auto, auto, auto, auto;
  --page-bg-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* розовый с мягкой виньеткой */
body[data-bg="rose-vignette"] {
  --page-bg-color: #fff5f8;
  --page-bg-img:
    radial-gradient(ellipse at center, transparent 58%, rgba(255, 150, 170, .18) 100%),
    linear-gradient(180deg, #fff1f6 0%, #fff7fa 100%);
  --page-bg-size: auto, auto;
  --page-bg-repeat: no-repeat, no-repeat;
}

/* розовый + очень деликатное «зерно» */
body[data-bg="rose-grain"] {
  --page-bg-color: #fff7f9;
  --page-bg-img:
    linear-gradient(180deg, #fff0f5 0%, #ffe5ee 52%, #fff8fb 100%),
    radial-gradient(rgba(0, 0, 0, .025) 1px, transparent 1.35px);
  --page-bg-size: auto, 9px 9px;
  --page-bg-repeat: no-repeat, repeat;
}

/* розовый + заметнее «зерно» */
body[data-bg="rose-grain-strong"] {
  --page-bg-color: #fff1f5;
  --page-bg-img:
    linear-gradient(180deg, #ffe6ee 0%, #ffd2e1 52%, #fff3f7 100%),
    radial-gradient(rgba(0, 0, 0, .04) 1px, transparent 1.35px);
  --page-bg-size: auto, 8px 8px;
  --page-bg-repeat: no-repeat, repeat;
}

/* «розовая бумага» (подложка + точки) */
body[data-bg="rose-paper"] {
  --page-bg-color: #fff6f5;
  --page-bg-img:
    radial-gradient(1200px 600px at 50% -6%, rgba(255, 140, 170, .12), transparent 62%),
    radial-gradient(1200px 600px at 50% 106%, rgba(255, 140, 170, .12), transparent 62%),
    radial-gradient(rgba(0, 0, 0, .022) 1px, transparent 1.4px);
  --page-bg-size: auto, auto, 10px 10px;
  --page-bg-repeat: no-repeat, no-repeat, repeat;
}

/* матовый розовый (почти плоский тон) */
body[data-bg="rose-matte"] {
  --page-bg-color: #fff1f4;
  --page-bg-img: linear-gradient(180deg, #ffe9ef 0%, #ffe9ef 100%);
  --page-bg-repeat: no-repeat;
}

/* холодный розовый туман */
body[data-bg="rose-mist"] {
  --page-bg-color: #fef7fb;
  --page-bg-img:
    linear-gradient(180deg, #fff1f7 0%, #f7f0f6 55%, #fff8fb 100%),
    radial-gradient(600px 300px at 50% 0%, rgba(255, 170, 200, .12), transparent 65%);
  --page-bg-size: auto, auto;
  --page-bg-repeat: no-repeat, no-repeat;
}

/* === ROSE GRADIENT SET === */

/* 1) Очень мягкий вертикальный */
body[data-bg="rose-grad-soft"] {
  --page-bg-color: #fff7f9;
  --page-bg-img: linear-gradient(180deg, #fff1f6 0%, #ffe6ee 52%, #ffffff 100%);
  --page-bg-repeat: no-repeat;
}

/* 2) «Закат» по диагонали (теплее) */
body[data-bg="rose-grad-sunset"] {
  --page-bg-color: #fff5f8;
  --page-bg-img: linear-gradient(135deg, #ffe7ef 0%, #ffd3e1 45%, #fff3f7 100%);
  --page-bg-repeat: no-repeat;
}

/* 3) Розовый → лаванда (чуть прохладнее) */
body[data-bg="rose-grad-lavender"] {
  --page-bg-color: #faf7ff;
  --page-bg-img: linear-gradient(180deg, #ffeaf2 0%, #f2eaff 55%, #ffffff 100%);
  --page-bg-repeat: no-repeat;
}

/* 4) Перламутровый центр (радиальный свет из середины) */
body[data-bg="rose-grad-pearl"] {
  --page-bg-color: #fff6f8;
  --page-bg-img:
    radial-gradient(800px 480px at 50% 35%, rgba(255, 160, 185, .16), transparent 62%),
    linear-gradient(180deg, #fff1f6 0%, #fff7fa 100%);
  --page-bg-size: auto, auto;
  --page-bg-repeat: no-repeat, no-repeat;
}

/* 5) Угловой «глоу» (сверху и снизу) */
body[data-bg="rose-grad-corners"] {
  --page-bg-color: #fff7f9;
  --page-bg-img:
    radial-gradient(1200px 520px at 50% -6%, rgba(255, 140, 170, .12), transparent 60%),
    radial-gradient(1200px 520px at 50% 106%, rgba(255, 140, 170, .12), transparent 60%),
    linear-gradient(180deg, #fff3f7 0%, #ffffff 100%);
  --page-bg-size: auto, auto, auto;
  --page-bg-repeat: no-repeat, no-repeat, no-repeat;
}

/* 6) Розовый → персик (натуральное тепло) */
body[data-bg="rose-grad-peach"] {
  --page-bg-color: #fff4f0;
  --page-bg-img: linear-gradient(180deg, #ffe9ef 0%, #ffe1d9 52%, #fff6f2 100%);
  --page-bg-repeat: no-repeat;
}

/* === ROSE: top → bottom (light → richer) === */

/* базовый, нежный */
body[data-bg="rose-vert"] {
  --page-bg-color: #fff7fa;
  --page-bg-img: linear-gradient(180deg, #fff1f6 0%, #ffe6ee 55%, #ffd6e4 100%);
  --page-bg-repeat: no-repeat;
}

/* чуть выразительнее */
body[data-bg="rose-vert-plus"] {
  --page-bg-color: #fff6f8;
  --page-bg-img: linear-gradient(180deg, #ffedf3 0%, #ffdfe9 58%, #ffcadb 100%);
  --page-bg-repeat: no-repeat;
}

/* самый насыщенный из мягких */
body[data-bg="rose-vert-strong"] {
  --page-bg-color: #fff4f7;
  --page-bg-img: linear-gradient(180deg, #ffe9f1 0%, #ffd4e2 60%, #ffbcd4 100%);
  --page-bg-repeat: no-repeat;
}

/* === Rose-vert: палитра === */
body[data-bg="rose-vert"] {
  --rose-1: #fff1f6;
  /* верх градиента */
  --rose-2: #ffe6ee;
  /* середина */
  --rose-3: #ffd6e4;
  /* низ */
  --rose-5: #ff9cbc;
  /* акцент */
  --rose-6: #ff7aa6;
  /* активный (глубже) */
}

/* === Чипы: тон-в-тон к rose-vert === */
body[data-bg="rose-vert"][data-ui="chips-tonal"] {
  /* базовые переменные из твоей системы чипов */
  --chip-bg: color-mix(in srgb, var(--rose-2) 75%, #fff);
  --chip-border: color-mix(in srgb, var(--rose-3) 60%, #fff);
  --chip-shadow: 0 10px 26px rgba(255, 170, 190, .20);

  /* hover/active */
  --chip-hover-bg: color-mix(in srgb, var(--rose-3) 60%, #fff);
  --chip-hover-ink: #111;

  --chip-bg-active: var(--rose-6);
  --chip-ink-active: #fff;
}

/* применяем hover-цвет внутри rose-vert */
body[data-bg="rose-vert"][data-ui="chips-tonal"] .filter-wrapper li a:hover {
  background: var(--chip-hover-bg);
  color: var(--chip-hover-ink);
}

/* лёгкий тон-в-тон для рамки карточки-героя */
body[data-bg="rose-vert"] #header.header-one .header-thumb {
  border-color: color-mix(in srgb, var(--rose-2) 55%, #fff);
  box-shadow: 0 18px 44px rgba(255, 160, 190, .18);
}

/* === GLASS CHIPS (стеклянные чипы под rose-vert) === */
body[data-bg="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a {
  background: color-mix(in srgb, var(--rose-1) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--rose-3) 55%, transparent);
  -webkit-backdrop-filter: saturate(130%) blur(10px);
  backdrop-filter: saturate(130%) blur(10px);
  box-shadow: none;
  color: #222;
}

/* hover */
body[data-bg="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a:hover {
  background: color-mix(in srgb, var(--rose-2) 60%, rgba(255, 255, 255, .08));
  border-color: color-mix(in srgb, var(--rose-3) 70%, transparent);
}

/* active / выбранный фильтр */
body[data-bg="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a.is-checked,
body[data-bg="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a.active,
body[data-bg="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a[aria-pressed="true"] {
  background: color-mix(in srgb, var(--rose-6) 88%, rgba(255, 255, 255, .06));
  color: #fff;
  border-color: color-mix(in srgb, var(--rose-6) 70%, transparent);
  box-shadow: none;
}

/* focus для клавиатуры */
body[data-bg="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--rose-6) 65%, #fff);
  outline-offset: 2px;
}

/* Fallback без backdrop-filter (старые браузеры) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-bg="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a {
    background: color-mix(in srgb, var(--rose-2) 75%, #fff);
  }
}


/* GHOST: прозрачная, розовая обводка */
body[data-ui~="btn-ghost"] .btn-more {
  background: transparent;
  color: #111;
  border: 2px solid color-mix(in srgb, var(--rose-6) 55%, #fff);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .04),
    0 10px 24px rgba(255, 160, 190, .14);
  padding: 12px 22px;
  /* чуть шире — опрятнее */
}

body[data-ui~="btn-ghost"] .btn-more:hover {
  background: color-mix(in srgb, var(--rose-2) 40%, #fff);
  /* лёгкий розовый залив */
  border-color: none;
  box-shadow: none;
}

body[data-ui~="btn-ghost"] .btn-more:active {
  transform: translateY(1px) scale(.99);
}

body[data-ui~="btn-ghost"] .btn-more:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rose-6) 60%, #fff);
  outline-offset: 2px;
}

/* Опционально: более выразительный ореол */
body[data-ui~="btn-ghost-strong"] .btn-more {
  box-shadow: 0 0 0 6px rgba(255, 160, 190, .14),
    0 14px 32px rgba(255, 160, 190, .24);
}

/* Фолбэк, если нет color-mix */
@supports not (background: color-mix(in srgb, #fff, #000)) {
  body[data-ui~="btn-ghost"] .btn-more {
    border-color: #ff8fb1;
  }
}

/* === Preloader (единый) === */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: opacity 1.2s ease;
  will-change: opacity;
}

/* когда JS добавит .is-done — слой плавно исчезает и перестаёт ловить клики */
.preloader.is-done {
  opacity: 0;
  pointer-events: none;
}

/* на фазе исчезновения останавливаем пульс логотипа, чтобы не «дёргался» */
.preloader.is-done .loader-logo {
  animation: none;
}

/* мягкий «пульс» логотипа */
@keyframes loaderPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .98;
  }

  50% {
    transform: scale(1.02);
    opacity: 1;
  }
}

/* логотип */
.preloader .loader-logo {
  display: block;
  width: auto;
  height: var(--pre-logo-h-desktop);
  opacity: .96;
  animation: loaderPulse 1.35s ease-in-out infinite;
  /* можно оставить твой drop-shadow из файла: */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .12));
}

@media (max-width:600px) {
  .preloader .loader-logo {
    height: var(--pre-logo-h-mobile);
  }
}

/* уважение reduce motion */
@media (prefers-reduced-motion: reduce) {
  .preloader .loader-logo {
    animation: none;
  }
}

/* мягкий ореол под логотипом */
body[data-ui~="preload-glow"] .preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(220px 80px at 50% 52%,
      color-mix(in srgb, #fff 80%, var(--page-bg-color)) 0%,
      transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

/* стеклянная вуаль отдельным слоем */
body[data-ui~="preload-glass"] .preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, calc(var(--pre-glass-alpha)*.9)) 0%,
      rgba(255, 255, 255, calc(var(--pre-glass-alpha)*.6)) 100%);
  backdrop-filter: blur(var(--pre-glass-blur)) saturate(110%);
  -webkit-backdrop-filter: blur(var(--pre-glass-blur)) saturate(110%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .38),
    inset 0 8px 20px rgba(255, 255, 255, .18),
    0 8px 30px rgba(255, 120, 150, .10);
}

/* свечение пусть остаётся на ::before — оно у тебя уже есть, просто усилим переменными */
body[data-ui~="preload-glow"] .preloader::before {
  background:
    radial-gradient(circle at 50% var(--pre-glow-y),
      rgba(255, 255, 255, var(--pre-glow-alpha)) 0%,
      rgba(255, 200, 220, calc(var(--pre-glow-alpha)*.7)) 30%,
      rgba(255, 200, 220, 0) var(--pre-glow-size));
  mix-blend-mode: screen;
  opacity: 1;
  filter: blur(24px);
  /* можно оставить твой blur, если нравился */
}

/* Логотип всегда поверх оверлеев прелоадера */
.preloader .loader-logo {
  position: relative;
  z-index: 3;
}

/* Слои прелоадера ниже логотипа */
body[data-ui~="preload-glow"] .preloader::before {
  z-index: 0;
}

body[data-ui~="preload-glass"] .preloader::after {
  z-index: 1;
}

/* === HERO CARD: GLASS — полировка === */
body[data-card="glass"] #header .header-thumb {
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(22px) saturate(110%);
  backdrop-filter: blur(22px) saturate(110%);

  padding: clamp(18px, 2.2vw, 26px) clamp(32px, 4vw, 56px);
  border: none;

  /* soft / squircle */
  border-radius: clamp(18px, 1.8vw, 26px);
  overflow: hidden;


  /* мягче и чище */
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16), 0 1px 0 rgba(255, 255, 255, .08) inset;

  max-width: 760px;
  margin: 0 auto;
  position: relative;
}

/* Лёгкий блик по стеклу */
body[data-card="glass"] #header .header-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 110% at 22% 12%, rgba(255, 255, 255, .04), transparent 55%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Hover-лифт (только для устройств с курсором) */
@media (hover:hover) {
  body[data-card="glass"] #header .header-thumb {
    transition: transform .18s ease, box-shadow .18s ease;
  }

  body[data-card="glass"] #header .header-thumb:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  }
}

/* Мобайл: одинаковый blur для webkit/standard + чуть плотнее стекло */
@media (max-width: 767px) {
  body[data-card="glass"] #header .header-thumb {
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    padding: 16px 22px;
    border-radius: 20px;
  }
}

/* --- Easter egg: heart rain --- */
@keyframes heartFall {
  0% {
    transform: translateY(-12vh) translateX(0) rotate(-12deg);
    opacity: 0;
  }

  12% {
    opacity: .9;
  }

  100% {
    transform: translateY(110vh) translateX(6vw) rotate(20deg);
    opacity: .95;
  }
}

.heart-drop {
  position: fixed;
  top: -10vh;
  left: 0;
  pointer-events: none;
  color: var(--rose-6, #ff7aa6);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  z-index: 100000;
  animation-name: heartFall;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: forwards;
}

#contact-heart {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .heart-drop {
    display: none !important;
  }
}

/* === Contact: confetti hearts (на отправке формы) === */
.heart-cf {
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: heartFly 900ms ease-out forwards;
  z-index: 99999;
  /* чтобы сердечки были поверх всего */
}

@keyframes heartFly {
  to {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9);
    opacity: 0;
  }
}

/* === Logo long-press: sparkles + camera flash === */
.sparkle {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(.9) rotate(var(--rot, 0deg));
  will-change: transform, opacity, filter;
  pointer-events: none;
  font-size: var(--fs, 18px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, .55), 0 0 18px rgba(255, 170, 200, .35);
  animation: sparkleFly 800ms ease-out forwards;
  z-index: 100002;
}

@keyframes sparkleFly {
  from {
    opacity: .96;
    transform: translate(-50%, -50%) scale(.8) rotate(var(--rot, 0deg));
  }

  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(var(--rotEnd, 0deg));
  }
}

/* «Вспышка» поверх страницы */
.flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100001;
  background: radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, .96) 0%,
      rgba(255, 255, 255, .45) 45%,
      rgba(255, 255, 255, 0) 70%);
  animation: cameraFlash 480ms ease-out forwards;
}

@keyframes cameraFlash {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Уважаем "меньше анимаций": отключаем салют, оставим только лёгкий пульс логотипа из JS */
@media (prefers-reduced-motion: reduce) {

  .sparkle,
  .flash-overlay {
    animation: none !important;
  }
}

/* БАЗОВАЯ КАРТОЧКА — аккуратная наклейка без зубчиков */
.price-card {
  position: relative;
  padding: 24px 24px 26px;
  margin-bottom: 28px;

  background: #ffffff;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--rose-3, #ffd6e4) 40%, #fff);

  box-shadow:
    0 10px 26px rgba(0, 0, 0, .04),
    0 0 0 1px rgba(255, 255, 255, .7);

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

/* Мягкий ореол под карточкой */
.price-card::before {
  content: "";
  position: absolute;
  inset: -10px -14px -16px;
  border-radius: inherit;
  z-index: -1;

  background: rgba(255, 255, 255, .7);
  box-shadow: 0 22px 46px rgba(255, 160, 190, .22);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Лёгкий подъём при hover (только на десктопе) */
@media (hover:hover) {
  .price-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 16px 38px rgba(0, 0, 0, .06),
      0 0 0 1px rgba(255, 255, 255, .9);
  }

  .price-card:hover::before {
    opacity: 1;
    transform: translateY(0);
  }
}

.price-card h3 {
  margin: 0 0 6px;
  letter-spacing: .5px;
  text-transform: none;
  color: #111;
}

.price-card .price {
  margin: 4px 0 12px;
  font-weight: 700;
  font-size: 20px;
  color: #111;
}

.price-card .feat {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.price-card .feat li {
  margin: 6px 0;
  color: #555;
}

/* CTA — “ghost pill” как на кнопке отправки формы */
.price-card .btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--rose-6, #ff7aa6) 55%, #fff);
  background: transparent;
  color: #111;
  font-weight: 600;
  letter-spacing: .3px;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .06s;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .04), 0 10px 24px rgba(255, 160, 190, .14);
}

.price-card .btn-book:hover {
  background: color-mix(in srgb, var(--rose-2, #ffe6ee) 40%, #fff);
  border-color: color-mix(in srgb, var(--rose-6, #ff7aa6) 68%, #fff);
  box-shadow: 0 12px 28px rgba(255, 160, 190, .22);
}

.price-card .btn-book:active {
  transform: translateY(1px) scale(.99);
}

.price-card .btn-book:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rose-6, #ff7aa6) 60%, #fff);
  outline-offset: 2px;
}

/* === Pricing layout — аккуратный центр === */

/* Обёртка секции цен */
.pricing-section {
  position: relative;
  padding: 40px 0 80px;
}

/* Сетка карточек */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* по умолчанию одна колонка */
  gap: 26px;
  max-width: 900px;
  /* ширина блока с ценами */
  margin: 0 auto 40px;
  /* по центру страницы */
  padding: 0 16px;
  /* небольшие поля слева/справа */
}

/* на больших экранах — две колонки, ровно по центру */
@media (min-width: 900px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* колонкам ничего особенного не нужно, просто держим отступы */
.pricing-grid .price-col {
  padding: 0;
}

/* декоративные линии, если они у тебя остались — можно пока отключить */
.pricing-decor {
  display: none;
}


/* на больших — контент Love Story можно чуть «растянуть» по горизонтали */
@media (min-width: 992px) {
  .price-col--wide .price-card {
    display: flex;
    flex-direction: column;
  }
}

/* Блок доп.опций */
.addons {
  margin-top: 10px;
}

.addons h4 {
  text-transform: none;
  letter-spacing: .5px;
  color: #111;
  margin: 14px 0 6px;
}

.addons ul {
  margin: 0 0 6px;
  padding-left: 18px;
}

.addons .note {
  font-size: 14px;
  color: #666;
}

#contact #message.is-highlighted {
  box-shadow: 0 0 0 3px rgba(255, 120, 150, .18);
  border-color: #111112;
}

/* === RU: базовый текст на кириллическом Source Sans Pro === */
html[lang="ru"] body,
html[lang="ru"] p,
html[lang="ru"] input,
html[lang="ru"] textarea,
html[lang="ru"] button {
  font-family: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Вторая строка заголовка — чуть меньше и плотнее */
html[lang="ru"] .header-one .header-thumb h1 .line2 {
  font-size: .92em;
  letter-spacing: .004em;
}

@media (max-width:700px) {
  body.page-pricing #header.header-one .header-thumb {
    padding-top: 48px !important;
  }
}

/* RU — About & Pricing: всегда шрифт Motter, без привязки к hero-index-style */
html[lang^="ru"] body.page-about #header .header-thumb h1,
html[lang^="ru"] body.page-pricing #header .header-thumb h1 {
  font-family:
    "MotterFixed",
    "MotterFixed Fallback",
    "Source Sans Pro",
    system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400;
}

/* RU — Главная: TAN Moonlight для геро-блока (если нужно) */
html[lang^="ru"] body.page-home #header .header-thumb h1 {
  font-family:
    "TAN Moonlight",
    "TAN Moonlight Fallback",
    system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400;
}

/* === ROSE-VERT (спокойнее) ===================================== */
/* 1) базовый спокойный */
body[data-bg="rose-vert-calm"] {
  --page-bg-color: #fff8fa;
  --page-bg-img: linear-gradient(180deg, #fff4f7 0%, #ffedf3 56%, #ffe9f1 100%);
  --page-bg-repeat: no-repeat;

  /* палитра (чуть светлее и мягче) */
  --rose-1: #fff4f7;
  --rose-2: #ffedf3;
  --rose-3: #ffe2ea;
  --rose-6: #ff88ab;
  /* акцент тише, чем #ff7aa6 */
}

/* 2) ещё тише — почти тон бумаги */
body[data-bg="rose-vert-whisper"] {
  --page-bg-color: #fffbfc;
  --page-bg-img: linear-gradient(180deg, #fff7f9 0%, #fff3f6 55%, #fff0f4 100%);
  --page-bg-repeat: no-repeat;

  --rose-1: #fff7f9;
  --rose-2: #fff0f4;
  --rose-3: #ffe7ee;
  --rose-6: #ff95b6;
}

/* 3) тёплый, с лёгким персиком (натуральнее) */
body[data-bg="rose-vert-peach"] {
  --page-bg-color: #fff6f3;
  --page-bg-img: linear-gradient(180deg, #ffeff4 0%, #ffe7ec 52%, #fff4ef 100%);
  --page-bg-repeat: no-repeat;

  --rose-1: #ffeff4;
  --rose-2: #ffe7ec;
  --rose-3: #ffdfe4;
  --rose-6: #ff8faa;
}

/* === Подхватываем компоненты для любых rose-vert* =============== */
/* (чтобы существующие стили для rose-vert работали и на calm/whisper/peach) */
body[data-bg^="rose-vert"] #header.header-one .header-thumb {
  border-color: color-mix(in srgb, var(--rose-2, #ffe6ee) 55%, #fff);
  box-shadow: 0 18px 44px rgba(255, 160, 190, .18);
}

/* стеклянные «чипсы» фильтра */
body[data-bg^="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a {
  background: color-mix(in srgb, var(--rose-1, #fff1f6) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--rose-3, #ffd6e4) 55%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: #222;
}

body[data-bg^="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a:hover {
  background: color-mix(in srgb, var(--rose-2, #ffe6ee) 60%, rgba(255, 255, 255, .08));
  border-color: color-mix(in srgb, var(--rose-3, #ffd6e4) 70%, transparent);
}

body[data-bg^="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a.is-checked,
body[data-bg^="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a.active,
body[data-bg^="rose-vert"][data-ui~="chips-glass"] .filter-wrapper li a[aria-pressed="true"] {
  background: color-mix(in srgb, var(--rose-6, #ff7aa6) 88%, rgba(255, 255, 255, .06));
  color: #fff;
  border-color: color-mix(in srgb, var(--rose-6, #ff7aa6) 70%, transparent);
  box-shadow: none;
}

/* «ghost pill» кнопки (кнопка «Показать ещё», submit и т.п.) */
body[data-bg^="rose-vert"][data-ui~="btn-ghost"] .btn-more,
body[data-bg^="rose-vert"] #contact input[type='submit'] {
  border-color: color-mix(in srgb, var(--rose-6, #ff7aa6) 55%, #fff);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .04), 0 10px 24px rgba(255, 160, 190, .14);
}

body[data-bg^="rose-vert"][data-ui~="btn-ghost"] .btn-more:hover,
body[data-bg^="rose-vert"] #contact input[type='submit']:hover {
  background: color-mix(in srgb, var(--rose-2, #ffe6ee) 40%, #fff);
  border-color: color-mix(in srgb, var(--rose-6, #ff7aa6) 68%, #fff);
  box-shadow: 0 12px 28px rgba(255, 160, 190, .22);
}

/* Фолбэк на старые браузеры без color-mix */
@supports not (background: color-mix(in srgb, #fff, #000)) {

  body[data-bg^="rose-vert"] #contact input[type='submit'],
  body[data-bg^="rose-vert"][data-ui~="btn-ghost"] .btn-more {
    border-color: #ff8fb1;
  }
}

/* === ROSE-VERT — ещё спокойнее ================================ */

/* 1) ultra — едва заметный розовый градиент */
body[data-bg="rose-vert-ultra"] {
  --page-bg-color: #fffcfd;
  --page-bg-img: linear-gradient(180deg, #fff9fb 0%, #fff6f8 54%, #fff3f6 100%);
  --page-bg-repeat: no-repeat;

  --rose-1: #fff6f8;
  --rose-2: #fff3f6;
  --rose-3: #ffebf1;
  --rose-6: #ff98b7;
  /* мягкий акцент */
}

/* 2) ultra-matte — почти белый, без градиента */
body[data-bg="rose-vert-ultra-matte"] {
  --page-bg-color: #fffbfc;
  --page-bg-img: none;

  --rose-1: #fff6f8;
  --rose-2: #fff2f5;
  --rose-3: #ffeaf0;
  --rose-6: #ff9db9;
}

/* 3) ultra-grain — ultra + очень деликатное «зерно» */
body[data-bg="rose-vert-ultra-grain"] {
  --page-bg-color: #fffbfc;
  --page-bg-img:
    linear-gradient(180deg, #fff8fa 0%, #fff5f7 55%, #fff2f5 100%),
    radial-gradient(rgba(0, 0, 0, .018) 1px, transparent 1.3px);
  --page-bg-size: auto, 8px 8px;
  --page-bg-repeat: no-repeat, repeat;

  --rose-1: #fff6f8;
  --rose-2: #fff2f5;
  --rose-3: #ffeaf0;
  --rose-6: #ff9db9;
}


/* сжимаем высоту геро-блока до «контентной» */
body.page-pricing .header-one {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 100px !important;
  /* место под навбар */
  padding-bottom: 24px !important;
}

.header-one.no-hero {
  height: auto !important;
  min-height: 0 !important;
}

/* уже было правило для pricing — можно оставить, либо подправить: */
body.page-pricing #header.header-one .header-thumb {
  /* оставь стекло (data-card="glass") или раскомментируй «белую наклейку» */
  /*  background:#fff;
    border:2px solid #fff;
    box-shadow:0 12px 34px rgba(0,0,0,.12);
*/
  padding-top: 24px !important;
  padding-bottom: 22px !important;
}

/* pricing-ru: чуть шире поля и не обрезать контент по радиусу */
html[lang^="ru"] body.page-pricing #header .header-thumb {
  padding-left: 24px !important;
  padding-right: 24px !important;
  overflow: visible;
  /* перекрывает стеклянное overflow:hidden */
}

/* аккуратнее кернинг, чтобы буквы не «упирались» в радиус */
html[lang^="ru"] body.page-pricing #header .header-thumb h1 {
  letter-spacing: .002em;
}

/* очень узкие экраны: немного уменьшить кегль */
@media (max-width:380px) {
  html[lang^="ru"] body.page-pricing #header .header-thumb h1 {
    font-size: clamp(24px, 6.2vw, 40px);
  }
}

/* About: уменьшить расстояние между подписью и первым абзацем — для всех языков */
@media (min-width: 992px) {
  #about .about-signature--text {
    margin-bottom: 4px;
  }

  #about .about-signature--text+p {
    margin-top: -50px !important;
  }
}

/* === CARD SHAPE: BUBBLE ==================================== */
body[data-card-shape="bubble"] .price-card {
  border-radius: 32px;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--rose-3, #ffd6e4) 40%, #fff);
  box-shadow:
    0 18px 42px rgba(255, 160, 190, .22),
    0 0 0 1px rgba(255, 255, 255, .9);
  padding: 26px 26px 28px;
}

body[data-card-shape="bubble"] .price-card::before {
  content: "";
  position: absolute;
  inset: -16px -22px -24px;
  border-radius: inherit;
  background:
    radial-gradient(130% 100% at 12% 0%, rgba(255, 190, 210, .18), transparent 60%),
    radial-gradient(140% 120% at 100% 110%, rgba(255, 210, 230, .18), transparent 60%);
  z-index: -1;
  opacity: .9;
}

/* чуть компактнее текст внутри */
body[data-card-shape="bubble"] .price-card h3 {
  margin-bottom: 4px;
}

body[data-card-shape="bubble"] .price-card .price {
  margin: 4px 0 10px;
}

/* === SIMPLE PRICING LIST (без карточек) ===================== */

/* Заголовок секции */
.pricing-simple .pricing-kicker {
  text-transform: none;
  letter-spacing: .04em;
  font-size: 22px;
  margin: 0 0 6px;
  color: #111;
}

/* Подзаголовок */
.pricing-simple .pricing-intro {
  margin: 0 0 26px;
  color: #555;
  max-width: 640px;
}

/* Блоки категорий (Portraits & Love Story / Family & Other…) */
.pricing-block {
  margin: 28px 0 20px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.pricing-block-title {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #b49ea8;
  margin: 0 0 10px;
}

/* Одна строка-пакет */
.pricing-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0 14px;
  border-top: 1px solid rgba(0, 0, 0, .04);
}

/* нижняя линия только у последней строки блока */
.pricing-block .pricing-row:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, .04);
}

/* Левая колонка — название + описание */
.pr-left {
  flex: 1 1 auto;
  min-width: 0;
}

/* Правая колонка — цена + кнопка */
.pr-right {
  flex: 0 0 auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
}

/* Название пакета */
.pr-name {
  font-weight: 600;
  font-size: 16px;
  color: #111;
  margin-bottom: 4px;
}

/* Описание */
.pr-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* Цена */
.pr-price {
  font-weight: 700;
  font-size: 15px;
  color: #111;
}

/* Кнопка в строке – та же «пилюля», что и на форме */
.pr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rose-6, #ff7aa6) 55%, #fff);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  text-decoration: none;
  background: #fff;
  color: #111;
  box-shadow: 0 4px 14px rgba(255, 160, 190, .18);
  transition: background-color .2s, box-shadow .2s, transform .06s;
}

.pr-cta:hover {
  background: color-mix(in srgb, var(--rose-2, #ffe6ee) 40%, #fff);
  box-shadow: 0 8px 24px rgba(255, 160, 190, .24);
}

.pr-cta:active {
  transform: translateY(1px) scale(.99);
}

/* Мобилка: всё в колонку */
@media (max-width: 700px) {
  .pricing-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .pr-right {
    align-items: flex-start;
    text-align: left;
    white-space: normal;
  }
}

/* === PRICING: DOCUMENT / NOTION STYLE (EN) ===================== */

body.page-pricing[data-layout="doc"] .pricing-grid {
  max-width: 820px;
  margin: 0 auto 48px;
  padding: 0 16px;
}

/* Заголовки блоков (Portraits & Love Story, и т.п.) */
body.page-pricing[data-layout="doc"] .pricing-doc-title {
  margin: 32px 0 8px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a8a0a3;
}

/* Сбрасываем «карточный» стиль */
body.page-pricing[data-layout="doc"] .price-card {
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 14px 0 18px;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* Последнему можно убрать линию, если захочешь */
body.page-pricing[data-layout="doc"] .price-card:last-of-type {
  border-bottom-color: transparent;
}

/* Строка: слева текст, справа цена + кнопка */
body.page-pricing[data-layout="doc"] .pricing-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* Чуть мягкий подсвет для hero-пакета */
body.page-pricing[data-layout="doc"] .pricing-row--highlight {
  background: rgba(255, 240, 249, .6);
  border-radius: 14px;
  padding: 16px 18px 18px;
}

/* Левая часть (текст) */
body.page-pricing[data-layout="doc"] .pricing-row-main {
  flex: 1 1 auto;
}

/* Правая часть (цена + кнопка) */
body.page-pricing[data-layout="doc"] .pricing-row-side {
  flex: 0 0 auto;
  text-align: right;
  min-width: 160px;
}

/* Название пакета */
body.page-pricing[data-layout="doc"] .pricing-row h3 {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Краткое описание одной строкой */
body.page-pricing[data-layout="doc"] .pricing-row-lead {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
}

/* Список деталей под lead */
body.page-pricing[data-layout="doc"] .pricing-row-list {
  margin: 0 0 2px 1.1em;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #777;
}

/* Цена */
body.page-pricing[data-layout="doc"] .pricing-row-price {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 14px;
}

/* Маленький лейбл «Most booked» */
body.page-pricing[data-layout="doc"] .pricing-row-label {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff7aa6;
}

/* Кнопка — чуть компактнее */
body.page-pricing[data-layout="doc"] .price-card .btn-book {
  font-size: 13px;
  padding: 8px 16px;
}

/* Мобильный вид: всё в одну колонку */
@media (max-width: 768px) {
  body.page-pricing[data-layout="doc"] .pricing-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  body.page-pricing[data-layout="doc"] .pricing-row-side {
    text-align: left;
    min-width: 0;
  }

  body.page-pricing[data-layout="doc"] .price-card .btn-book {
    margin-top: 2px;
  }
}

/* === PRICING RU: gallery + price (горизонтальные карточки) === */

.pricing-gallery .pricing-gallery-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 10px;
}

.pricing-gallery .pricing-item {
  display: flex;
  gap: 18px;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

.pricing-gallery .pricing-item:first-child {
  border-top: none;
}

.pricing-gallery .pricing-item-thumb {
  flex: 0 0 180px;
  max-width: 180px;
  border-radius: 18px;
  overflow: hidden;
}

.pricing-gallery .pricing-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pricing-gallery .pricing-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.pricing-gallery .pricing-item-title {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: none;
  color: #111;
}

.pricing-gallery .pricing-item-lead {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

.pricing-gallery .pricing-item-list {
  margin: 0 0 6px 1.1em;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #777;
}

.pricing-gallery .pricing-item-list li {
  margin: 2px 0;
}

.pricing-gallery .pricing-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 4px;
}

.pricing-gallery .pricing-item-price {
  font-weight: 700;
  font-size: 14px;
  color: #111;
}

/* чуть шире карточка для свадеб/событий */
.pricing-gallery .pricing-item--wide {
  border-top: 1px solid rgba(0, 0, 0, .08);
}

/* мобилка: картинка сверху, текст снизу */
@media (max-width: 768px) {
  .pricing-gallery .pricing-item {
    flex-direction: column;
  }

  .pricing-gallery .pricing-item-thumb {
    max-width: 100%;
    width: 100%;
  }

  .pricing-gallery .pricing-item-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* === Pricing letter (FI) — kirjemäinen asettelu === */
.pricing-letter-body p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

.pricing-letter-body strong {
  font-weight: 600;
  color: #111;
}

.pricing-letter-body em {
  font-style: italic;
}

.pricing-letter-note {
  font-size: 13px;
  color: #777;
  margin-top: 8px;
}


/* Кнопка-пилюля, как на форме/прайсе */
.btn-book-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--rose-6, #ff7aa6) 55%, #fff);
  background: transparent;
  color: #111;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .04),
    0 10px 24px rgba(255, 160, 190, .14);
  transition: background-color .2s, border-color .2s,
    box-shadow .2s, transform .06s;
}

.btn-book-letter:hover {
  background: color-mix(in srgb, var(--rose-2, #ffe6ee) 40%, #fff);
  border-color: color-mix(in srgb, var(--rose-6, #ff7aa6) 68%, #fff);
  box-shadow: 0 12px 28px rgba(255, 160, 190, .22);
}

.btn-book-letter:active {
  transform: translateY(1px) scale(.99);
}

.btn-book-letter:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rose-6, #ff7aa6) 60%, #fff);
  outline-offset: 2px;
}

/* Мобилка: чуть крупнее текст */
@media (max-width: 700px) {
  .pricing-letter-body p {
    font-size: 14px;
  }
}

/* Pricing: кликабельные названия + цены в тексте */
.pricing-link {
  font-weight: 600;
  /* чуть жирнее */
  color: #333333;
  /* темнее, чем обычный текст (#777) */
  text-decoration: none;
  /* без подчёркивания */
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .2s ease, opacity .2s ease;
}

/* Наведение / фокус */
.pricing-link:hover,
.pricing-link:focus-visible {
  color: #111111;
  /* ещё чуть темнее */
  opacity: 0.95;
}

.pricing-letter-cta {
  /* пусть блок занимает всю ширину контейнера */
  max-width: none;
  margin: 26px 0 0;
  text-align: center;
  /* оставляем для кнопки */
  padding-top: 0;
  border: none;
  position: static;
}

/* текст внутри — слева */
.pricing-letter-cta p {
  text-align: left;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

.pricing-letter-cta p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

/* Кнопка под письмом — можно чуть компактнее */
.btn-book-letter {
  margin-top: 4px;
  font-size: 14px;
  padding: 10px 20px;
}

/* === PRICING HERO (коллаж + надпись) ================== */

.pricing-hero {
  max-width: 1040px;
  margin: 0 auto 56px;
}

.pricing-hero-collage img {
  display: block;
  width: 100%;
  border-radius: 32px;
}

/* Надпись под коллажем */
.pricing-hero-title {
  text-align: center;
  margin-top: 50px;
}

.pricing-hero-title h1,
.pricing-hero-title p {
  font-family: "TAN Moonlight", "MotterFixed",
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.pricing-hero-title h1 {
  margin: 0 0 4px;
  font-size: 32px;
}

.pricing-hero-title p {
  margin: 0;
  font-size: 18px;
  color: rgba(0, 0, 0, .6);
}

.pricing-hero-heart {
  margin-top: 10px;
  font-size: 20px;
}

/* Мобилка */
@media (max-width: 768px) {
  .pricing-hero {
    margin-bottom: 40px;
  }

  .pricing-hero-title h1 {
    font-size: 24px;
    letter-spacing: 0.14em;
  }

  .pricing-hero-title p {
    font-size: 14px;
    letter-spacing: 0.14em;
  }
}

/* Главный слоган под фото на index */
.index-hero-text {
  padding: 32px 0 16px;
  /* вместо 1rem */
  margin-top: 0;
  /* было -59px */
  text-align: center;
}

.index-hero-title {
  font-family: "TAN Moonlight", "TAN Moonlight Fallback",
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.index-hero-title h1,
.index-hero-title p {
  font-family: inherit;
}

.index-hero-title h1 {
  font-family:
    "TAN Moonlight",
    "TAN Moonlight Fallback",
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 2.2rem;
  /* как в “новом” блоке */
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.index-hero-title p {
  font-family: "TAN Moonlight", "TAN Moonlight Fallback", system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.1rem;
  /* как в “новом” блоке */
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
}

/* Fix: шрифт второй строки под коллажем на pricing-ru */
html[lang^="ru"] body.page-pricing .pricing-hero-title p {
  font-family: "TAN Moonlight", "MotterFixed", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* (опционально) сердечко тем же шрифтом */
html[lang^="ru"] body.page-pricing .pricing-hero-heart {
  font-family: "TAN Moonlight", "MotterFixed", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* === PRICING HERO full-width на странице цен === */

body.page-pricing #header .container {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

body.page-pricing .pricing-hero {
  max-width: none;
  margin: 0 auto 56px;
}

body.page-pricing .pricing-hero-collage img {
  width: 100%;
  display: block;
  /* если хочешь без скругления – раскомментируй: */
  /* border-radius: 0; */
}

/* Pricing RU — опустить строку "простые пакеты..." ниже */
html[lang^="ru"] body.page-pricing .pricing-hero-title p {
  margin-top: 1.9rem;
  /* подбери 2.0–3.5rem по вкусу */
}

/* === ABOUT: заголовок на розовом фоне, без капсулы === */

/* Новый заголовок над блоком About */
.about-page-title {
  text-align: center;
  margin: -10px 0 50px;
  /* отступ сверху и снизу */
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #111;
  font-family:
    "TAN Moonlight",
    "TAN Moonlight Fallback",
    system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

/* === ABOUT FI: простой заголовок над страницей === */

.page-title-simple {
  padding: 32px 0 0;
  text-align: center;
}

.page-title-simple .container {
  max-width: 960px;
  margin: 0 auto;
}

.page-title-heading {
  font-family:
    "TAN Moonlight",
    "TAN Moonlight Fallback",
    system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 42px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  color: #111;
}

/* чуть меньше на телефоне */
@media (max-width: 700px) {
  .page-title-simple {
    padding: 24px 0 0;
  }

  .page-title-heading {
    font-size: 30px;
    letter-spacing: 0.16em;
  }
}

/* на этой странице уменьшим верхний отступ у блока about,
   чтобы Minusta и текст были ближе друг к другу */
.page-title--aboutfi+#about {
  padding-top: 2.5rem;
}

/* === ABOUT-FI: заголовок Minusta поверх фото === */

.header-aboutfi {
  position: relative;
}

/* лёгкое затемнение, чтобы текст был читаем */
.header-aboutfi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

/* обёртка, которая кладёт заголовок поверх фото */
.header-aboutfi .header-title-wrap {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-start;
  /* текст ближе к верху */
  justify-content: center;
  padding-top: 80px;
  /* отступ от меню, можешь подправить */
}

/* сам заголовок Minusta */
.hero-title-aboutfi {
  font-family:
    "TAN Moonlight",
    "TAN Moonlight Fallback",
    system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 60px);
  letter-spacing: 0.08em;
  text-transform: none;
  color: #ffffff;
  margin: 0;
}

/* === ABOUT RU: заголовок "Об авторе" под фото === */

.page-about-heading {
  text-align: center;
  font-family: "MotterFixed", "MotterFixed Fallback",
    "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 32px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 32px 0 32px;
  color: #111;
}


/* === FINAL HEADER: статичное меню + языки столбиком === */

/* Бургер и полноэкранное меню полностью отключаем */
.navicon,
.circle,
.list-menu {
  display: none !important;
}

/* Шапка */
.navbar {
  background: transparent;
  height: 94px;
  max-height: 94px;
  margin: 0;
  display: flex;
  align-items: center;
}

.navbar .container {
  width: 100%;
  padding: var(--nav-top-desktop) 24px 0;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ПРАВАЯ ЧАСТЬ: меню + языки */
.header-right {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  /* расстояние между главным меню и языками */
  margin-left: auto;
}

/* ПРАВАЯ ЧАСТЬ: меню + языки */
.header-right {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-left: auto;
}

/* Кнопка мобильного меню: по умолчанию скрыта (на десктопе её нет вообще) */
.mobile-nav-toggle {
  display: none;
}

/* ГЛАВНОЕ МЕНЮ — в одну линию */
.main-menu {
  display: flex;
  gap: 24px;
  list-style: none;
  /* без точек */
  margin: 0;
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.main-menu li {
  margin: 0;
}

/* Пункты меню: линия рисуется из точки курсора */
.main-menu a {
  position: relative;
  text-decoration: none;
  color: #111;
  padding-bottom: 4px;
  transition: color .18s ease;
  --ux: 50%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.main-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* линия может растянуться на всю ширину */
  bottom: 0;
  height: 1.2px;
  border-radius: 999px;
  background-color: #111;
  /* БЕЗ градиента, просто чёрная линия */

  transform-origin: var(--ux, 50%) 50%;
  transform: scaleX(0);
  /* старт — точка */
  opacity: 0;

  transition:
    transform .26s ease-out,
    opacity .18s ease-out;
}

.main-menu a:hover::after,
.main-menu a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
  /* линия вырастает из точки курсора */
}

.main-menu a.is-current::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ЯЗЫКОВОЕ МЕНЮ — СТОЛБИК СПРАВА, БЕЗ ТОЧЕК */
.lang-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  list-style: none;
  /* <<< убираем точки */
  margin: 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Больше воздуха между основным меню и языками на широких экранах */
@media (min-width: 900px) {
  .lang-menu {
    margin-left: 20px;
    /* можно 40–80, подбери по вкусу */

  }
}

/* Двигаем только меню языков правее (только на десктопе) */
@media (min-width: 900px) {
  .lang-menu {
    position: relative;
    /* даёт возможность сдвинуть */
    left: 20px;
    /* сдвиг вправо, поменяй на 30 / 50 / 60 по вкусу */
  }
}

.lang-menu li {
  margin: 0;
}

/* Языки: линия рисуется из точки курсора, как в главном меню */
.lang-menu a,
.lang-menu .is-current-lang {
  position: relative;
  text-decoration: none;
  color: #111;
  opacity: 0.8;
  padding-bottom: 3px;
  /* чуть больше места под линию */
  --ux: 50%;
  /* по умолчанию центр */
}

/* Общая линия для ссылок и для текущего языка */
.lang-menu a::after,
.lang-menu .is-current-lang::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.2px;
  border-radius: 999px;
  background-color: #111;
  /* без градиента, чёрная линия */

  transform-origin: var(--ux, 50%) 50%;
  transform: scaleX(0);
  opacity: 0;

  transition:
    transform .26s ease-out,
    opacity .18s ease-out;
}

/* hover / focus по ссылкам-языкам */
.lang-menu a:hover,
.lang-menu a:focus-visible {
  opacity: 1;
}

.lang-menu a:hover::after,
.lang-menu a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
  /* линия вырастает из точки курсора */
}

/* Текущий язык всегда с полной линией */
.lang-menu .is-current-lang {
  opacity: 1;
  cursor: default;
}

.lang-menu .is-current-lang::after {
  opacity: 1;
  transform: scaleX(1);
}

/* АДАПТАЦИЯ ПОД УЗКИЕ ЭКРАНЫ */
@media (max-width: 800px) {
  .navbar .container {
    padding: 0 12px;
  }

  .header-row {
    flex-wrap: wrap;
    align-items: flex-start;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .header-right {
    margin-top: 55px;
    gap: 16px;
  }

  .main-menu {
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 16px;
    font-size: 11px;
    letter-spacing: 0.15em;
  }

  /* Включаем кнопку ТОЛЬКО на мобильных */
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 0 3px;

    background: none;
    border: none;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-bottom: 1px solid #111;
    cursor: pointer;
  }
}

/* === HEADER TWEAK: сдвигаем меню левее и опускаем ниже === */

/* 1. Сдвинуть правый блок (меню + языки) левее */
.navbar .container {
  padding-left: 24px;
  /* можно не трогать, если логотип ок */
  padding-right: 90px;
  /* УВЕЛИЧИВАЕМ, чтобы всё ушло левее */
}

/* 2. Опустить ГЛАВНОЕ меню чуть ниже */
.main-menu {
  margin-top: 40px;
  /* подбери от 4 до 14px по вкусу */
}

/* Если захочешь опустить и языковое меню – раскомментируй: */

.lang-menu {
  margin-top: 2px;
}

/* === LANG MENU: одинаковый размер EN / FI / RU === */
.lang-menu a,
.lang-menu .is-current-lang {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  line-height: 1;
  color: #111;
}

/* Чуть сдвинуть строку FI влево относительно EN и RU */
.lang-menu li:nth-child(2) a,
.lang-menu li:nth-child(2) .is-current-lang {
  transform: none;
}

/* Мягкая жирность цен и названий пакетов на странице цен */
.page-pricing .pricing-letter strong {
  font-weight: 501;
  /* было ~700, теперь легче */
  letter-spacing: 0.03em;
  /* можно убрать, если не нужно */
}

html[lang="ru"] .index-hero-text p {
  font-family:
    "TAN Moonlight",
    "TAN Moonlight Fallback",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Helvetica Neue",
    Arial,
    sans-serif;
}

/* убрать затемнение, если есть */
.page-home-header::before {
  display: none;
}

/* SUPER-ЖИРНЫЙ HERO НА ГЛАВНОЙ (и вообще) */
.index-hero-photo {
  max-width: none;
  margin: 0 auto 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.index-hero-photo img {
  display: block;
  width: 100%;
  height: clamp(480px, 92vh, 1100px);
  object-fit: cover;
}

/* ===== Поднять капсулу с фото на главной ===== */

#header.page-home-header .container {
  width: 100%;
  max-width: none;
  /* ширина секции под фото */
  padding-top: 0 !important;
  padding-left: 0;
  /* чтобы не прилипало к краю */
  padding-right: 0;
}

#header.page-home-header .index-hero-photo {
  margin-top: 0 !important;
}

/* Главная: окончательно переопределяем высоту хедера */
body.page-home #header.header-one.page-home-header {
  height: auto !important;
  min-height: 30vh !important;
  /* герой на 80% экрана */
  padding-top: 120px !important;
  /* отступ от меню */
  padding-bottom: 80px !important;
  /* воздух снизу */
}

/* === HOME: фото сразу под меню (для всех языков) === */

/* 1. Убираем верхние отступы у хедера с карточкой-фото */
#header.header-one.page-home-header {
  padding-top: 70px !important;
  margin-top: 0 !important;
}

/* 2. Карточка-фото тоже без отступа сверху */
#header.header-one.page-home-header .index-hero-photo {
  margin-top: 0 !important;
}

/* 3. Чуть ниже шапка, чтобы меньше «съедала» высоту */
@media (min-width: 768px) {
  .navbar {
    height: 80px !important;
    max-height: 80px !important;
  }
}

/* по умолчанию без отступа */
.nav-container {
  margin-bottom: 0;
}

/* а вот на ВСЕХ, кроме главной, даём отступ */
body:not(.page-index-ru) .nav-container {
  margin-bottom: 40px;
}

/* index-ru: сделать такой же отступ меню, как на остальных */
body.page-index-ru .nav-container {
  margin-bottom: 40px;
}

/* Тонкая настройка кадра для hero на главной */
.page-home-header .hero-bg img {
  object-fit: cover;
  object-position: center 55%;
  /* вертикальный сдвиг: 0% — верх, 100% — низ */
}

/* === HERO на главной (перекрывает старые правила) === */

.page-home-header {
  position: relative;
  /* высота секции: регулируй под себя */
  min-height: clamp(420px, 70vh, 650px);
}

/* картинка — как фон на всю секцию */
.page-home-header .hero-bg {
  position: absolute;
  inset: 0;
  /* top/right/bottom/left: 0 */
  margin: 0;
}

/* сама секция */
.page-home-header {
  position: relative;
  min-height: clamp(420px, 70vh, 650px);
}

/* картинка как фон героя */
.page-home-header .hero-bg {
  position: absolute;
  inset: 0;
}

.page-home-header .hero-bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* заполняет всё, без полос */
  object-position: center 58%;
  /* фокус: центр по горизонтали, чуть ниже центра по вертикали */
}

/* HOME HERO — финальный контроль размера */
#header.header-one.page-home-header {
  height: auto !important;
  min-height: 60vh !important;
  /* ← тут регулируем ЖИР */
  padding-top: 70px !important;
  padding-bottom: 60px !important;
}

/* MOBILE: всегда скрываем пункт текущей страницы в главном меню,
   потому что у нас уже есть отдельная кнопка HOME */
@media (max-width: 800px) {
  .main-menu li:has(> a.is-current) {
    display: none;
  }
}

/* === MOBILE: логотип слева, языки НАД HOME, меню ПОД HOME, без прыжков === */
@media (max-width: 800px) {

  .navbar {
    height: 70px;
    max-height: 70px;
  }

  .navbar .container {
    position: relative;
    padding: 8px 16px;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .header-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* ЛОГОТИП слева */
  .brand {
    margin: 45px 0 0;
    margin-left: -50px;
    display: flex;
    align-items: center;
  }

  /* ПРАВАЯ часть: HOME + выпадающие меню */
  .header-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Кнопка HOME – всегда на месте */
  .mobile-nav-toggle {
    display: inline-flex;
  }

  /* ОБЩИЕ настройки выпадающих блоков (языки + меню) */
  .navbar .lang-menu,
  .navbar .main-menu {
    position: absolute;
    right: 0;
    left: auto;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;

    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .22s ease, transform .22s ease;
  }

  /* ЯЗЫКИ — строкой НАД HOME */
  .navbar .lang-menu {
    bottom: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    gap: 18px;
    justify-content: flex-end;
  }

  /* ГЛАВНОЕ МЕНЮ — горизонтально ПОД HOME */
  .navbar .main-menu {
    top: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* Когда меню открыто – показываем оба блока */
  body.menu-open .navbar .lang-menu,
  body.menu-open .navbar .main-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Размеры шрифтов */
  .navbar .main-menu a {
    font-size: 13px;
    letter-spacing: 0.14em;
  }

  .navbar .lang-menu a,
  .navbar .lang-menu .is-current-lang {
    font-size: 11px;
  }
}

/* Форсим горизонтальное меню на мобиле (на всякий случай) */
@media (max-width: 800px) {
  .navbar .main-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
  }

  .navbar .main-menu li {
    display: inline-block;
    margin: 0;
  }
}

/* === FIX: главное меню в одну строку под HOME (mobile) === */
@media (max-width: 800px) {

  /* справа всё в столбик:
     1 — языки, 2 — HOME, 3 — меню */
  .header-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  /* главное меню — только горизонтально, без переноса */
  .navbar .main-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* одна строка */
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    margin-top: 35px;
  }

  .navbar .main-menu li {
    display: inline-flex;
    margin: 0;
  }

  .navbar .main-menu a {
    font-size: 11px;
    /* чуть меньше, чтобы точно влезло */
    letter-spacing: 0.12em;
    white-space: nowrap;
    /* не даём словам ломаться по буквам */
  }
}

/* ==== PRICING: показать коллаж целиком, без обрезки ==== */

/* Секция с коллажем на странице цен */
body.page-pricing #header.header-pricing {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  padding-top: var(--hero-gap-desktop) !important;
  /* место под меню */
  padding-bottom: 0 !important;
}

/* Перекрываем глобальные правила hero-bg */
body.page-pricing #header.header-pricing .hero-bg,
body.page-pricing #header.header-pricing .hero-bg img {
  position: static !important;
  /* больше не absolute */
  inset: auto !important;
  width: 100%;
  height: auto;
  display: block;
}

/* Картинка — как обычное фото, без обрезки по бокам */
@media (min-width: 900px) {
  body.page-pricing #header.header-pricing .hero-bg img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    object-position: center center;
  }
}

/* Убираем затемняющий оверлей из .header-one на этой странице */
body.page-pricing .header-one::before {
  display: none;
}

/* ==== INDEX: герой как обычное фото, без обрезки ==== */

/* сама секция героя на главной */
#header.header-one.page-home-header {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  padding-top: var(--hero-gap-desktop) !important;
  /* место под меню */
  padding-bottom: 0 !important;
}

/* hero-bg больше НЕ absolute, а обычный блок */
#header.header-one.page-home-header .hero-bg,
#header.header-one.page-home-header .hero-bg img {
  position: static !important;
  inset: auto !important;
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 900px) {
  #header.header-one.page-home-header .hero-bg img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    object-position: center center;
  }
}

/* ==== ABOUT: герой как обычное фото, без обрезки ==== */

/* 1. Любая about-страница: хедер не фиксированной высоты */
body[class*="page-about"] #header {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  padding-top: var(--hero-gap-desktop) !important;
  /* место под меню */
  padding-bottom: 0 !important;
}

/* 2. hero-bg ведёт себя как обычный блок, а не фон */
body[class*="page-about"] #header .hero-bg,
body[class*="page-about"] #header .hero-bg img {
  position: static !important;
  inset: auto !important;
  width: 100%;
  height: auto;
  display: block;
}

/* 3. Картинка целиком, без обрезки */
@media (min-width: 900px) {
  body[class*="page-about"] #header .hero-bg img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    object-position: center center;
  }
}

/* === Общая высота героев (DESKTOP) === */
@media (min-width: 900px) {

  /* главная */
  #header.header-one.page-home-header .hero-bg img,
  /* страница цен */
  body.page-pricing #header.header-pricing .hero-bg img,
  /* все about-страницы */
  body[class*="page-about"] #header .hero-bg img {
    max-height: 500px;
    /* ← ВОТ ЭТИМ ЧИСЛОМ ТЫ РЕГУЛИРУЕШЬ РАЗМЕР */
  }
}

/* === Единый стиль больших заголовков (index / about / pricing) === */
.index-hero-title h1,
.page-title-heading,
.pricing-hero-title h1 {
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  /* общий размер */
  letter-spacing: 0.10em;
  /* одинаковый tracking */
  text-transform: none;
}

/* === Единый стиль маленьких подзаголовков === */
.index-hero-title p,
.pricing-hero-title p {
  font-weight: 400;
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}