/* =====================================================================
   TREFFIKESKUS — СТИЛИ САЙТА
   ---------------------------------------------------------------------
   Файл разделён на разделы. Чтобы быстро найти нужное место,
   нажмите Ctrl+F (на Mac Cmd+F) и введите номер раздела, например «РАЗДЕЛ 1».

   РАЗДЕЛ 1. НАСТРОЙКИ: цвета, шрифты, скругления, размеры  ← меняйте здесь
   РАЗДЕЛ 2. Общие правила страницы
   РАЗДЕЛ 3. Кнопки
   РАЗДЕЛ 4. Шапка (название, номер, «стена» надписей)
   РАЗДЕЛ 5. Красные сердечки в шапке
   РАЗДЕЛ 6. Блок над анкетами
   РАЗДЕЛ 7. Анкеты девушек
   РАЗДЕЛ 8. Розовые сердечки у фотографий
   РАЗДЕЛ 9. Вставки между рядами («Linjoilla 24/7» и т. п.)
   РАЗДЕЛ 10. Текст о сервисе и вопросы-ответы
   РАЗДЕЛ 11. Три пункта с иконками
   РАЗДЕЛ 12. Футер
   РАЗДЕЛ 13. Окно «Oletko täysi-ikäinen?»
   РАЗДЕЛ 14. Страницы условий и конфиденциальности
   РАЗДЕЛ 15. Мобильная версия и планшеты
   ===================================================================== */


/* =====================================================================
   РАЗДЕЛ 1. НАСТРОЙКИ
   Поменяйте значение здесь — и оно поменяется на всём сайте сразу.
   Цвета записаны в формате #RRGGBB. Подобрать цвет: google «color picker».
   ===================================================================== */
:root {
  /* --- Фоны --- */
  --color-bg:          #2A0F16;  /* основной фон сайта (бордовый) */
  --color-bg-card:     #331219;  /* фон карточек анкет и окна 18+ */
  --color-bg-dark:     #1A080D;  /* тёмные полосы-вставки и футер */

  /* --- Линии и рамки --- */
  --color-line:        #55232F;  /* тонкие разделительные линии */
  --color-card-border: #4A1C27;  /* рамка вокруг карточки анкеты */

  /* --- Текст --- */
  --color-text:        #F3E6DA;  /* основной текст (кремовый) */
  --color-text-soft:   #D4C2B6;  /* второстепенный текст (цена, подписи) */
  --color-text-faded:  #A39089;  /* «серый хвост» свёрнутого текста анкеты */

  /* --- Акцент: заголовки, кнопки, розовые сердечки --- */
  --color-accent:       #E3A9B5; /* пыльно-розовый */
  --color-accent-hover: #F1C7CF; /* при наведении мыши */
  --color-on-accent:    #2A0F16; /* текст на розовой кнопке */

  /* --- Красные сердечки в шапке --- */
  --color-heart-red:   #D7263D;

  /* --- Цвета рукописных надписей в шапке и во вставках --- */
  --color-wall-red:    #E5384F;
  --color-wall-coral:  #F0795A;
  --color-wall-pink:   #E35D9E;
  --color-wall-light:  #F3A6B8;
  --color-wall-purple: #C9479B;
  --color-sticker:     #D6338A;  /* розовая наклейка «TUHMIA TARINOITA» */

  /* --- Шрифты --- */
  --font-title:  'Cormorant Garamond', Georgia, serif;   /* заголовки */
  --font-body:   'Jost', system-ui, sans-serif;          /* обычный текст */
  --font-hand:   'Caveat', cursive;                      /* рукописные надписи */
  --font-marker: 'Permanent Marker', cursive;            /* надписи «маркером» */

  /* --- Скругления --- */
  --radius-button: 999px;                  /* кнопки-«таблетки» */
  --radius-card:   120px 120px 20px 20px;  /* карточка анкеты (арка сверху) */
  --radius-photo:  100px 100px 16px 16px;  /* фото в анкете (арка) */
  --radius-box:    48px 48px 48px 0;       /* крупные блоки */

  /* --- Размеры --- */
  --page-width:    1200px;  /* максимальная ширина содержимого */
  --button-height: 56px;    /* высота кнопок звонка */
  --photo-width:   200px;   /* ширина фото в анкете */
  --photo-height:  250px;   /* высота фото в анкете */
  --text-size:     19px;    /* размер обычного текста */
}


/* =====================================================================
   РАЗДЕЛ 2. Общие правила страницы
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-size);
  line-height: 1.6;
}

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

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }

/* Ограничитель ширины содержимого */
.container {
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Скрытый текст, который читают только программы для незрячих и Google */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

h1, h2, h3 { font-weight: 400; margin: 0; }


/* =====================================================================
   РАЗДЕЛ 3. Кнопки
   ===================================================================== */
.btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--button-height);
  padding: 0 26px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 0;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.btn-call:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.btn-call svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Большая кнопка в шапке */
.btn-call--big {
  min-height: 68px;
  padding: 12px 36px;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  letter-spacing: 0.04em;
}
.btn-call--big svg { width: 26px; height: 26px; }

/* Кнопка «Lue lisää» */
.btn-more {
  background: none;
  border: 0;
  padding: 10px 4px;
  min-height: 44px;
  font: inherit;
  font-size: 17px;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.btn-more:hover { color: var(--color-accent-hover); }


/* =====================================================================
   РАЗДЕЛ 4. Шапка
   ===================================================================== */
.site-header {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  border-bottom: 1px solid var(--color-line);
}

.header-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.logo {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.slogans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.2;
}

.header-content .btn-call--big { margin-top: 8px; }

.price-note { font-size: 16px; color: var(--color-text-soft); }

/* «Стена» рукописных надписей вокруг названия */
.wall { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wall-word { position: absolute; white-space: nowrap; line-height: 1; }
.wall-word svg { display: block; margin-top: 4px; }
.font-marker { font-family: var(--font-marker); }
.font-hand   { font-family: var(--font-hand); font-weight: 700; }

/* Положение и вид каждой надписи. Меняйте left/right/top/bottom (в процентах),
   font-size (размер) и rotate (наклон в градусах). */
.w-sex      { left: 3%;   top: 5%;  font-size: 72px; color: var(--color-wall-red);    transform: rotate(-8deg); }
.w-erot     { left: 2.5%; top: 30%; font-size: 32px; color: var(--color-wall-coral);  transform: rotate(-4deg);
              width: 230px; white-space: normal; line-height: 1.05; }
.w-vanh     { left: 4%;   top: 52%; font-size: 36px; color: var(--color-wall-pink);   transform: rotate(3deg); }
.w-odottaa  { left: 6%;   top: 78%; font-size: 28px; color: var(--color-wall-purple); transform: rotate(-3deg); }
.w-ilta     { left: 22%;  top: 6%;  font-size: 24px; color: var(--color-wall-light);  transform: rotate(-4deg); }
.w-toiveet  { left: 24%;  bottom: 4%; font-size: 24px; color: var(--color-wall-light); transform: rotate(2deg); }
.w-24h      { right: 3%;  top: 7%;  font-size: 40px; color: var(--color-wall-red);    transform: rotate(4deg); }
.w-rohkeaa  { right: 2.5%; top: 34%; font-size: 36px; color: var(--color-wall-coral); transform: rotate(-5deg); }
.w-tuhmia   { right: 6%;  top: 54%; font-size: 24px; color: var(--color-bg);
              background: var(--color-sticker); padding: 8px 14px; transform: rotate(4deg); }
.w-ujo      { right: 9%;  top: 75%; font-size: 30px; color: var(--color-wall-light);  transform: rotate(-2deg); }
.w-nimeton  { right: 25%; bottom: 5%; font-size: 24px; color: var(--color-wall-purple); transform: rotate(-3deg); }


/* =====================================================================
   РАЗДЕЛ 5. Красные сердечки в шапке
   Скорость: animation-duration (секунды). Чем меньше — тем быстрее.
   ===================================================================== */
.big-hearts { position: absolute; inset: 0; pointer-events: none; z-index: 0; color: var(--color-heart-red); }
.big-heart  { position: absolute; bottom: -90px; opacity: 0; animation: heart-float 3s linear infinite; }
.big-heart path { transform-box: fill-box; transform-origin: center; animation: heart-beat 1s ease-in-out infinite; }
.big-heart:nth-child(even) path { animation-duration: 1.3s; }

.big-heart:nth-child(1)  { left: 4%;    bottom: -60px; width: 60px; height: 60px; animation-duration: 3s;   animation-delay: 0s; }
.big-heart:nth-child(2)  { left: 13%;   bottom: 20%;   width: 40px; height: 40px; animation-duration: 2.6s; animation-delay: .5s; }
.big-heart:nth-child(3)  { left: 1.5%;  bottom: 45%;   width: 32px; height: 32px; animation-duration: 2.8s; animation-delay: 1.1s; }
.big-heart:nth-child(4)  { left: 19%;   bottom: 0;     width: 30px; height: 30px; animation-duration: 3.2s; animation-delay: 1.6s; }
.big-heart:nth-child(5)  { left: 8%;    bottom: 35%;   width: 46px; height: 46px; animation-duration: 2.7s; animation-delay: 2.1s; }
.big-heart:nth-child(6)  { left: 16%;   bottom: 55%;   width: 26px; height: 26px; animation-duration: 2.5s; animation-delay: .9s; }
.big-heart:nth-child(7)  { right: 4%;   bottom: -60px; width: 58px; height: 58px; animation-duration: 3.1s; animation-delay: .3s; }
.big-heart:nth-child(8)  { right: 13%;  bottom: 18%;   width: 42px; height: 42px; animation-duration: 2.7s; animation-delay: .8s; }
.big-heart:nth-child(9)  { right: 1.5%; bottom: 48%;   width: 30px; height: 30px; animation-duration: 2.6s; animation-delay: 1.4s; }
.big-heart:nth-child(10) { right: 19%;  bottom: 2%;    width: 28px; height: 28px; animation-duration: 3s;   animation-delay: 1.9s; }
.big-heart:nth-child(11) { right: 8%;   bottom: 32%;   width: 48px; height: 48px; animation-duration: 2.8s; animation-delay: 2.4s; }
.big-heart:nth-child(12) { right: 16%;  bottom: 58%;   width: 24px; height: 24px; animation-duration: 2.5s; animation-delay: 1.2s; }

@keyframes heart-float {
  0%   { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0; }
  10%  { opacity: .95; }
  25%  { transform: translate(14px, -65px) rotate(12deg) scale(1); }
  50%  { transform: translate(-14px, -130px) rotate(-12deg) scale(1.08); }
  75%  { transform: translate(12px, -195px) rotate(10deg) scale(1.05); opacity: .7; }
  100% { transform: translate(-6px, -260px) rotate(-4deg) scale(1.15); opacity: 0; }
}
@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.18); }
  30% { transform: scale(.94); }
  45% { transform: scale(1.1); }
  60% { transform: scale(1); }
}


/* =====================================================================
   РАЗДЕЛ 6. Блок над анкетами
   ===================================================================== */
.intro { padding-top: 48px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 12px; }
.intro h1 {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  color: var(--color-accent);
}
.intro h1 small {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.intro p { margin: 0; font-size: 16px; color: var(--color-text-soft); max-width: 46ch; }


/* =====================================================================
   РАЗДЕЛ 7. Анкеты девушек
   ===================================================================== */
.profiles { padding-bottom: 56px; }

.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 48px 32px;
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 22px 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
}

.profile-photo { position: relative; width: var(--photo-width); height: var(--photo-height); }
.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-photo);
}

.profile h3 { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-title); }
.profile-number { font-size: 22px; color: var(--color-text-soft); }
.profile-name   { font-size: 36px; line-height: 1.1; color: var(--color-accent); }

.profile-hint { font-size: 17px; }
.profile-price { font-size: 15px; color: var(--color-text-soft); margin-top: -10px; }

/* Текст анкеты. В свёрнутом виде видно 4 строки, нижние плавно сереют. */
.profile-text-wrap { width: 100%; text-align: left; margin-top: 4px; }
.profile-text { margin: 0; font-size: 18px; }
.profile-text.is-collapsed {
  max-height: calc(1.6em * 4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .35) 100%);
          mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .35) 100%);
}


/* =====================================================================
   РАЗДЕЛ 8. Розовые сердечки у фотографий
   ===================================================================== */
.photo-hearts { position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; color: var(--color-accent); }
.photo-heart  { position: absolute; bottom: -4px; width: 18px; height: 18px; opacity: 0; animation: photo-heart-rise 3.6s linear infinite; }
.photo-heart:nth-child(1) { left: -22px; animation-delay: 0s; }
.photo-heart:nth-child(2) { left: 8px;   width: 14px; height: 14px; animation-delay: .6s; }
.photo-heart:nth-child(3) { left: 176px; animation-delay: 1.3s; }
.photo-heart:nth-child(4) { left: 204px; width: 13px; height: 13px; animation-delay: 1.9s; }
.photo-heart:nth-child(5) { left: 92px;  width: 16px; height: 16px; animation-delay: 2.6s; }
.photo-heart:nth-child(6) { left: -6px;  width: 12px; height: 12px; animation-delay: 3.1s; }
.profile:nth-child(3n+2) .photo-heart { animation-duration: 4.2s; }
.profile:nth-child(3n)   .photo-heart { animation-duration: 3.2s; }

@keyframes photo-heart-rise {
  0%   { transform: translate(0, 0) rotate(0) scale(.5); opacity: 0; }
  10%  { opacity: .9; }
  20%  { transform: translate(12px, -54px) rotate(12deg) scale(.85); }
  40%  { transform: translate(-12px, -108px) rotate(-12deg) scale(1); }
  60%  { transform: translate(12px, -162px) rotate(12deg) scale(1.05); opacity: .8; }
  80%  { transform: translate(-10px, -216px) rotate(-10deg) scale(1.1); opacity: .5; }
  100% { transform: translate(6px, -270px) rotate(6deg) scale(1.15); opacity: 0; }
}


/* =====================================================================
   РАЗДЕЛ 9. Вставки между рядами
   ===================================================================== */
.band {
  margin-bottom: 56px;
  padding: 28px 24px;
  background: var(--color-bg-dark);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.band-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: baseline;
  justify-content: center;
  text-align: center;
}
.band-title { font-family: var(--font-title); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; color: var(--color-accent); }
.band-text  { font-family: var(--font-title); font-style: italic; font-size: 24px; color: var(--color-text-soft); }
.band-tag   { display: inline-block; font-family: var(--font-hand); font-weight: 700; font-size: 34px; line-height: 1;
              color: var(--color-wall-coral); transform: rotate(-4deg); }


/* =====================================================================
   РАЗДЕЛ 10. Текст о сервисе и вопросы-ответы
   ===================================================================== */
.about { padding-top: 24px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 48px 64px; }
.about-text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.about-text p { margin: 0; font-size: 18px; }
.faq { flex: 1 1 420px; min-width: 0; }

.section-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--color-accent);
}
.faq .section-title { margin-bottom: 8px; }

.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  min-height: 44px;
  font-size: 19px;
  font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-title); font-size: 32px; line-height: .8; color: var(--color-accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; color: var(--color-text-soft); font-size: 17px; }


/* =====================================================================
   РАЗДЕЛ 11. Три пункта с иконками
   ===================================================================== */
.features { padding-top: 16px; padding-bottom: 80px; display: flex; flex-wrap: wrap; gap: 28px 56px; }
.feature {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--color-line);
  padding-top: 20px;
}
.feature-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 500;
}
.feature-icon svg { width: 26px; height: 26px; }
.feature h3 { font-family: var(--font-title); font-size: 28px; color: var(--color-accent); }
.feature p  { margin: 0; color: var(--color-text-soft); font-size: 17px; }


/* =====================================================================
   РАЗДЕЛ 12. Футер
   ===================================================================== */
.site-footer { background: var(--color-bg-dark); padding: 48px 0 64px; }
.footer-inner { display: flex; flex-direction: column; gap: 10px; font-size: 16px; color: var(--color-text-soft); }
.footer-logo  { font-family: var(--font-title); font-size: 28px; letter-spacing: 0.12em; color: var(--color-accent); margin-bottom: 6px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 6px; }


/* =====================================================================
   РАЗДЕЛ 13. Окно «Oletko täysi-ikäinen?»
   Окно видно, пока посетитель не нажмёт «Olen yli 18». Ответ
   запоминается на 30 дней (настраивается в js/main.js).
   ===================================================================== */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 6, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
html.age-ok .age-gate { display: none; }
/* Прокрутка блокируется только на главной, пока открыто окно 18+ */
html:not(.age-ok) body.has-age-gate { overflow: hidden; }

.age-card {
  width: 100%;
  max-width: 440px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
  border-radius: 160px 160px 24px 24px;
  padding: 52px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.age-badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 30px;
  color: var(--color-accent);
}
.age-logo  { font-family: var(--font-title); font-size: 22px; letter-spacing: 0.12em; color: var(--color-text-soft); }
.age-card h2 { font-family: var(--font-title); font-size: 38px; line-height: 1.1; }
.age-card p  { margin: 0; font-size: 17px; color: var(--color-text-soft); }
.age-card .btn-call { width: 100%; margin-top: 4px; }
.age-leave { display: inline-flex; align-items: center; min-height: 48px; font-size: 17px; color: var(--color-text-soft); }


/* =====================================================================
   РАЗДЕЛ 14. Страницы условий и конфиденциальности
   ===================================================================== */
.doc-header { border-bottom: 1px solid var(--color-line); padding: 20px 0; }
.doc-header .container { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.doc-logo { font-family: var(--font-title); font-size: 28px; font-weight: 500; letter-spacing: 0.12em; color: var(--color-accent); text-decoration: none; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-button);
  color: var(--color-text);
  text-decoration: none;
  font-size: 17px;
}

.doc { max-width: 820px; margin: 0 auto; padding: 48px 24px 88px; display: flex; flex-direction: column; gap: 32px; font-size: 18px; line-height: 1.65; }
.doc h1 { font-family: var(--font-title); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.05; color: var(--color-accent); }
.doc h2 { margin-bottom: 10px; font-family: var(--font-title); font-weight: 500; font-size: 30px; line-height: 1.15; color: var(--color-accent); }
.doc p  { margin: 0 0 12px; }
.doc ul { margin: 0 0 12px; padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc-date { font-size: 16px; color: var(--color-text-soft); }
.doc-top { display: flex; flex-direction: column; gap: 10px; }


/* =====================================================================
   РАЗДЕЛ 15. Мобильная версия и планшеты
   ===================================================================== */

/* Планшеты: прячем часть надписей, чтобы не наезжали на название */
@media (max-width: 1100px) {
  .w-erot, .w-odottaa, .w-ilta, .w-rohkeaa { display: none; }
}

/* Телефоны */
@media (max-width: 640px) {
  .site-header { padding: 104px 16px; }

  .wall-word { display: none; }
  .w-sex, .w-24h, .w-vanh, .w-tuhmia { display: block; }
  .w-sex    { left: 16px;  top: 16px;  font-size: 40px; }
  .w-24h    { right: 14px; top: 26px;  font-size: 21px; }
  .w-vanh   { left: 14px;  top: auto;  bottom: 18px; font-size: 22px; }
  .w-vanh svg { width: 100px; }
  .w-tuhmia { right: 14px; top: auto;  bottom: 26px; font-size: 14px; }

  .big-hearts { opacity: .6; }
  .big-heart:nth-child(even) { display: none; }
  .big-heart:nth-child(n) { width: 34px; height: 34px; }

  /* Всё по центру */
  .intro, .feature, .footer-inner { align-items: center; text-align: center; }
  .footer-links { justify-content: center; }
}

/* Если в телефоне включено «уменьшить движение» — без анимации */
@media (prefers-reduced-motion: reduce) {
  .big-heart, .photo-heart { display: none; }
}