/* ============================================================
   Viktoriia English v2 — pastel clay world
   Palette & radii live in :root. Everything rounded.
   ============================================================ */

:root{
  --cream:        #FBF6EF;
  --cream-2:      #F6EEE3;
  --sand:         #F0E4D4;
  --nude:         #E9D5C3;
  --nude-deep:    #E0C3AC;
  --caramel:      #C9A88A;
  --caramel-deep: #B18E6E;
  --clay:         #A9785C;
  /* Тёмная пара для ЧИТАЕМОСТИ: белый текст на --caramel давал контраст 2.19:1
     (норма WCAG AA — 4.5:1), «60+» и «₴» на --caramel — 2.17:1 и почти пропадали.
     --clay-deep = светлый конец градиентов кнопок (5.44:1 с белым текстом),
     --clay-night = тёмный конец (7.68:1). Считано по формуле WCAG 2.1. */
  --clay-deep:    #8A5F45;
  --clay-night:   #6E4A35;
  --peach:        #F4CDBD;
  --sage:         #C7D2BE;
  --rose:         #EBC3C0;
  --ink:          #4B4038;
  --ink-soft:     #7A6C5F;
  --white:        #FFFDFA;
  --card:         #FFFCF7;

  --r-xs: 14px; --r-sm: 20px; --r-md: 28px; --r-lg: 38px; --r-xl: 52px; --r-pill: 999px;

  --sh-sm: 0 6px 18px -10px rgba(120,86,58,.28);
  --sh-md: 0 20px 45px -22px rgba(120,86,58,.35);
  --sh-lg: 0 40px 80px -32px rgba(120,86,58,.40);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.7);

  --maxw: 1160px;
  --ease: cubic-bezier(.22,.68,.32,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; line-height:1.12; font-weight:800; letter-spacing:-.02em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

/* Клавиатурная навигация: в стилях не было НИ ОДНОГО :focus — идя по сайту с Tab,
   человек не видел, где он сейчас. :focus-visible (а не :focus) — чтобы обводка
   не вспыхивала от обычного клика мышкой. Радиус обводке НЕ задаём: браузер сам
   повторяет border-radius элемента, а жёсткие 4px «сплющили» бы пилюли кнопок. */
:focus-visible{
  outline:3px solid var(--clay-deep);
  outline-offset:3px;
}

/* ---------- background wash + 3D canvas ---------- */
.bg-wash{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-wash span{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.bg-wash span:nth-child(1){ width:56vw; height:56vw; background:#FDEFE3; top:-18vw; right:-14vw; }
.bg-wash span:nth-child(2){ width:48vw; height:48vw; background:#F3E9DC; bottom:-16vw; left:-12vw; }

#world{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }

/* ---------- journey rail ---------- */
.rail{
  position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:16px; padding:14px 0;
}
.rail-track{
  position:absolute; top:0; bottom:0; width:3px; border-radius:2px;
  background:rgba(201,168,138,.25); overflow:hidden;
}
.rail-fill{
  position:absolute; top:0; left:0; right:0; height:0%;
  background:linear-gradient(var(--caramel),var(--clay)); border-radius:2px;
  transition:height .15s linear;
}
.rail-dot{
  position:relative; z-index:1; width:12px; height:12px; border-radius:50%;
  background:var(--white); border:2.5px solid var(--caramel);
  transition:.3s var(--ease);
}
.rail-dot:hover{ transform:scale(1.3); }
.rail-dot.on{ background:var(--clay); border-color:var(--clay); transform:scale(1.35); box-shadow:0 0 0 5px rgba(169,120,92,.18); }

/* ---------- header ---------- */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:50; transition:.4s var(--ease); }
.site-header.scrolled{
  background:rgba(251,246,239,.72);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:var(--sh-sm);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px; }
.logo{ display:flex; align-items:center; gap:12px; }
.logo-mark{
  width:44px; height:44px; border-radius:var(--r-sm);
  display:grid; place-items:center; font-weight:900; font-size:22px; color:var(--white);
  background:linear-gradient(140deg,var(--clay-deep),var(--clay-night));
  box-shadow:var(--sh-sm),var(--sh-inset);
}
.logo-text{ display:flex; flex-direction:column; line-height:1; font-weight:800; font-size:19px; }
.logo-sub{ font-family:"Caveat",cursive; font-weight:600; font-size:16px; color:var(--clay); letter-spacing:.02em; }

.main-nav{ display:flex; gap:6px; }
.main-nav a{
  padding:10px 16px; border-radius:var(--r-pill); font-weight:600; color:var(--ink-soft);
  transition:.25s var(--ease);
}
.main-nav a:hover{ color:var(--ink); background:rgba(201,168,138,.16); }

.header-right{ display:flex; align-items:center; gap:14px; }
.lang-switch{ display:flex; padding:5px; gap:2px; background:rgba(255,255,255,.6); border:1px solid rgba(201,168,138,.35); border-radius:var(--r-pill); box-shadow:var(--sh-inset); }
.lang-btn{
  position:relative; /* для расширителя тач-зоны ниже */
  border:none; background:transparent; color:var(--ink-soft); font-weight:800; font-size:13px;
  padding:7px 12px; border-radius:var(--r-pill); transition:.25s var(--ease); letter-spacing:.03em;
}
/* Пилюля UA/EN была всего 44x32px — палец мимо. Саму пилюлю не раздуваем
   (иначе поедет шапка), а невидимым слоем добиваем зону нажатия до 44x44. */
.lang-btn::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); height:44px;
}
.lang-btn:hover{ color:var(--ink); }
.lang-btn.is-active{ background:linear-gradient(140deg,var(--clay-deep),var(--clay-night)); color:var(--white); box-shadow:var(--sh-sm); }

.burger{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; border:none; background:rgba(255,255,255,.6); border-radius:var(--r-sm); align-items:center; justify-content:center; }
.burger span{ width:20px; height:2.5px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------- buttons ----------
   Градиент кнопок раньше начинался с --caramel: белая надпись на нём читалась
   как 2.19:1. Теперь оба конца тёмные — худшая точка градиента даёт 5.44:1. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:var(--r-pill); font-weight:800; font-size:16px;
  transition:.28s var(--ease); border:2px solid transparent; will-change:transform;
}
.btn-primary{ background:linear-gradient(140deg,var(--clay-deep),var(--clay-night)); color:var(--white); box-shadow:var(--sh-md); }
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:var(--sh-lg); }
.btn-ghost{ background:rgba(255,255,255,.7); color:var(--ink); border-color:rgba(201,168,138,.5); box-shadow:var(--sh-sm); }
.btn-ghost:hover{ transform:translateY(-3px); background:var(--white); }

/* ---------- sections ---------- */
main{ position:relative; z-index:2; }
.sec{
  min-height:100vh; display:flex; align-items:center;
  padding:110px 0 90px; position:relative;
}
.sec-slim{ min-height:64vh; }
section[id]{ scroll-margin-top:80px; }
.container{ perspective:1000px; }

.kicker{ display:inline-block; font-family:"Caveat",cursive; font-weight:700; font-size:24px; color:var(--clay); margin-bottom:6px; }
.section-title{ font-size:clamp(30px,5vw,52px); margin-bottom:16px; }
.section-lead{ font-size:clamp(16px,2vw,19px); color:var(--ink-soft); max-width:600px; margin-bottom:44px; }

/* ---------- glass ---------- */
.glass{
  background:rgba(255,252,247,.78);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--sh-md),var(--sh-inset);
}
.contact-card-wrap.glass, .price-hero.glass, .stats-inner.glass{
  background:rgba(255,252,247,.66);
  backdrop-filter:blur(12px) saturate(1.05);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);
}

/* ---------- split-letter headings ---------- */
[data-split] .w{ display:inline-block; white-space:nowrap; }
[data-split] .ch{
  display:inline-block; opacity:0;
  transform:translateY(1.05em) rotate(7deg);
  transition:transform .7s var(--ease), opacity .45s ease;
  transition-delay:calc(var(--i)*28ms);
}
[data-split].in .ch{ opacity:1; transform:none; }

/* ---------- hero ---------- */
.hero{ user-select:none; cursor:grab; }
.hero.grabbing{ cursor:grabbing; }
.hero-inner{ width:100%; }
.hero-text{ max-width:640px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px; margin-bottom:22px;
  background:rgba(255,255,255,.7); border:1px solid rgba(201,168,138,.4); border-radius:var(--r-pill);
  font-weight:700; font-size:14px; color:var(--ink-soft); box-shadow:var(--sh-inset);
}
.eyebrow-dot{ width:9px; height:9px; border-radius:50%; background:var(--clay); box-shadow:0 0 0 4px rgba(169,120,92,.2); animation:pulse 2s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(169,120,92,0); } }
/* На 320px заголовок обрезался: «по-справжньому» — одно длинное слово, а нижняя
   граница clamp() (38px) не давала ему ужаться. Опустили пол до 34px и разрешили
   переносить слово (в разметке ещё был неразрывный дефис U+2011 — заменён обычным). */
.hero-title{ font-size:clamp(34px,6.4vw,72px); font-weight:900; margin-bottom:22px; overflow-wrap:break-word; }
.hero-title .accent{
  background:linear-gradient(120deg,var(--clay),var(--caramel),var(--clay));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 5s ease-in-out infinite;
}
@keyframes shimmer{ 0%,100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }
.hero-sub{ font-size:clamp(17px,2.2vw,21px); color:var(--ink-soft); max-width:540px; margin-bottom:34px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
.hero-trust{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.avatars{ display:flex; }
.avatars span{ width:40px; height:40px; border-radius:50%; margin-left:-12px; border:3px solid var(--cream); background:linear-gradient(140deg,var(--peach),var(--nude)); }
.avatars span:first-child{ margin-left:0; }
.avatars span:nth-child(2){ background:linear-gradient(140deg,var(--sage),var(--nude-deep)); }
.avatars span:nth-child(3){ background:linear-gradient(140deg,var(--rose),var(--caramel)); }
.avatars span:nth-child(4){ background:linear-gradient(140deg,var(--nude),var(--clay)); }
.hero-trust p{ font-size:14px; color:var(--ink-soft); max-width:260px; font-weight:600; }

.drag-hint{
  display:inline-flex; align-items:center; gap:9px; padding:9px 16px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.55);
  border:1px dashed rgba(169,120,92,.45); color:var(--ink-soft);
  font-weight:700; font-size:13.5px;
}
.drag-hint svg{ width:17px; height:17px; color:var(--clay); animation:spin-slow 6s linear infinite; }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
/* «Потягніть світ мишкою» на телефоне — враньё: мышки там нет. Раньше подсказку
   на сенсорных экранах просто прятали; теперь показываем вариант про палец.
   Переключает ЧИСТО CSS, а не скрипт: оба span'а переводятся своими ключами,
   поэтому смена языка (UA/EN) не может показать не тот вариант. */
.drag-hint .drag-touch{ display:none; }
@media (hover:none), (max-width:720px){
  .drag-hint .drag-mouse{ display:none; }
  .drag-hint .drag-touch{ display:inline; }
}
/* Подсказка стояла впритык к «Гортайте» внизу героя (перекрытие ~5px на 320/360px) —
   разводим их по вертикали на всех узких экранах. */
@media (max-width:720px){ .drag-hint{ margin-bottom:18px; } }

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--ink-soft); letter-spacing:.04em;
}
.scroll-hint svg{ width:22px; height:22px; animation:bounce 1.8s infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }

/* ---------- cards ---------- */
.card{
  border-radius:var(--r-lg); padding:34px 30px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  transform-style:preserve-3d;
}
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.icon-round{
  width:62px; height:62px; border-radius:var(--r-md); display:grid; place-items:center;
  background:linear-gradient(140deg,var(--peach),var(--nude));
  color:var(--clay); margin-bottom:20px; box-shadow:var(--sh-sm);
}
.icon-round svg{ width:28px; height:28px; }
.card h3{ font-size:20px; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:15.5px; }
.card:nth-child(2) .icon-round{ background:linear-gradient(140deg,var(--sage),var(--nude)); }
.card:nth-child(3) .icon-round{ background:linear-gradient(140deg,var(--rose),var(--nude)); }

/* ---------- stats ---------- */
.stats-inner{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  border-radius:var(--r-xl); padding:46px 30px;
}
.stat{ text-align:center; }
.stat-row{ display:inline-flex; align-items:baseline; }
.stat-num{ font-size:clamp(36px,5vw,54px); font-weight:900; color:var(--clay); letter-spacing:-.03em; }
/* «+» и «%» были на --caramel (2.17:1) и терялись: «60+» читалось как «60». */
.stat-plus{ font-size:clamp(28px,4vw,42px); font-weight:900; color:var(--clay-deep); }
.stat p{ color:var(--ink-soft); font-weight:700; font-size:14.5px; margin-top:4px; }

/* ---------- pricing ---------- */
.price-hero{
  display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:center;
  border-radius:var(--r-xl); padding:clamp(34px,4.5vw,56px);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  transform-style:preserve-3d;
}
.price-left h3{ font-size:clamp(22px,3vw,30px); margin-bottom:8px; }
.price-dur{
  display:inline-block; padding:6px 14px; border-radius:var(--r-pill);
  background:rgba(201,168,138,.16); color:var(--clay); font-weight:800; font-size:13.5px;
  margin-bottom:22px;
}
.price-value{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.price-amt{ font-size:clamp(44px,6vw,66px); font-weight:900; color:var(--clay); line-height:1; letter-spacing:-.03em; }
/* «₴» на --caramel почти не был виден рядом с суммой (2.17:1) — теперь 5.39:1. */
.price-cur{ font-size:clamp(26px,3.4vw,36px); font-weight:900; color:var(--clay-deep); }
.price-per{ font-size:15px; font-weight:700; color:var(--ink-soft); }
.price-note{ color:var(--ink-soft); font-size:14.5px; margin-bottom:26px; max-width:420px; }

.price-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
.price-list li{
  position:relative; padding:16px 18px 16px 52px; font-weight:700; font-size:15.5px; color:var(--ink);
  background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-md); box-shadow:var(--sh-sm);
}
.price-list li::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:10px;
  background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%234B4038' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.price-list li:nth-child(2)::before{ background-color:var(--peach); }
.price-list li:nth-child(3)::before{ background-color:var(--rose); }
.price-list li:nth-child(4)::before{ background-color:var(--nude-deep); }

/* ---------- reviews ---------- */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review-card{
  border-radius:var(--r-lg); padding:32px 28px; margin:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); transform-style:preserve-3d;
}
.stars{ color:var(--clay-deep); font-size:19px; letter-spacing:3px; margin-bottom:14px; } /* было --caramel: 2.17:1 */
.review-card blockquote{ margin:0 0 20px; font-size:16px; color:var(--ink); line-height:1.6; }
.review-card figcaption{ display:flex; align-items:center; gap:12px; font-weight:700; color:var(--ink-soft); font-size:14.5px; }
.review-ava{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--white);
  background:linear-gradient(140deg,var(--clay-deep),var(--clay-night)); font-weight:900;
}

/* ---------- contact ---------- */
.contact-card-wrap{
  border-radius:var(--r-xl); padding:clamp(36px,5vw,64px);
  text-align:center; width:100%;
}
.contact-card-wrap .section-lead{ margin-inline:auto; }
.contact-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:680px; margin:8px auto 0; }
.contact-link{
  display:flex; align-items:center; gap:16px; text-align:left; padding:20px 22px;
  background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-sm),var(--sh-inset);
  border:1px solid rgba(255,255,255,.8); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  transform-style:preserve-3d;
  /* Без min-width:0 grid/flex-элемент не даёт себя сжать уже «самого длинного слова»
     (тут это почта и ник в инстаграме) — на 320px карточки вылезали из белой
     подложки на 58px. Теперь колонка сжимается, а адрес переносится. */
  min-width:0;
}
.contact-link .icon-round{ margin:0; width:52px; height:52px; flex:none; }
.contact-link .icon-round svg{ width:24px; height:24px; }
.contact-info{ min-width:0; } /* то же самое уровнем ниже: это flex-элемент внутри ссылки */
.contact-info b{ display:block; font-size:16px; }
.contact-info small{ display:block; color:var(--ink-soft); font-size:13px; overflow-wrap:anywhere; }
.contact-link:nth-child(2) .icon-round{ background:linear-gradient(140deg,var(--sage),var(--nude)); }
.contact-link:nth-child(3) .icon-round{ background:linear-gradient(140deg,var(--rose),var(--nude)); }
.contact-link:nth-child(4) .icon-round{ background:linear-gradient(140deg,var(--nude),var(--caramel)); }

/* ---------- footer ---------- */
.site-footer{ position:relative; z-index:2; padding:56px 0 40px; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.footer-note{ color:var(--ink-soft); font-weight:600; }
.footer-copy{ color:var(--ink-soft); font-size:13px; opacity:.8; }

/* ---------- floating CTA ---------- */
.floating-cta{
  position:fixed; bottom:24px; right:24px; z-index:60;
  display:inline-flex; align-items:center; gap:9px; padding:15px 22px;
  background:linear-gradient(140deg,var(--clay-deep),var(--clay-night)); color:var(--white);
  border-radius:var(--r-pill); font-weight:800; box-shadow:var(--sh-lg);
  transform:translateY(120px); opacity:0; transition:.4s var(--ease);
}
.floating-cta.show{ transform:translateY(0); opacity:1; }
.floating-cta:hover{ transform:translateY(-4px) scale(1.03); }
.floating-cta svg{ width:20px; height:20px; }

/* ---------- reveal ---------- */
.reveal{
  opacity:0; transform:translateY(38px) rotateX(7deg);
  transform-origin:top center;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
.feature-grid .reveal:nth-child(2){ transition-delay:.12s; }
.feature-grid .reveal:nth-child(3){ transition-delay:.24s; }
.reviews-grid .reveal:nth-child(2){ transition-delay:.12s; }
.reviews-grid .reveal:nth-child(3){ transition-delay:.24s; }
.hero .reveal:nth-child(2){ transition-delay:.08s; }
.hero .reveal:nth-child(3){ transition-delay:.16s; }
.hero .reveal:nth-child(4){ transition-delay:.24s; }
.hero .reveal:nth-child(5){ transition-delay:.32s; }
.hero .reveal:nth-child(6){ transition-delay:.4s; }

/* Карточки .card/.price-hero/.review-card носят и класс .reveal. Специфичность у
   обоих одинаковая, а .reveal идёт НИЖЕ по файлу — значит его transition (0.8s,
   без box-shadow) перебивал «быстрый» набор карточек: наклон от мышки тянулся за
   курсором 0.8s вместо 0.3s, тень не анимировалась вовсе.
   Возвращаем карточкам их transition, но только под курсором — так появление
   (те самые 0.8s) остаётся нетронутым, а наклон снова живой. */
.card.reveal:hover,
.price-hero.reveal:hover,
.review-card.reveal:hover{
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .feature-grid,.reviews-grid{ grid-template-columns:1fr; }
  .stats-inner{ grid-template-columns:repeat(2,1fr); }
  .price-hero{ grid-template-columns:1fr; gap:28px; }
  .contact-grid{ grid-template-columns:1fr; }
  .rail{ display:none; }
  .burger{ display:flex; }
  .main-nav{
    position:absolute; top:76px; left:16px; right:16px; flex-direction:column; gap:4px;
    background:rgba(251,246,239,.96); backdrop-filter:blur(14px); padding:14px;
    border-radius:var(--r-md); box-shadow:var(--sh-lg);
    opacity:0; transform:translateY(-14px) scale(.98); pointer-events:none; transition:.3s var(--ease);
  }
  .main-nav.open{ opacity:1; transform:none; pointer-events:auto; }
  .main-nav a{ padding:13px 16px; }
}
/* ---------- телефон и планшет: текст героя над 3D-миром ----------
   Беда, ради которой этот блок: на 390px 3D-стопка книг ложилась ровно на строку
   «Понад 60 дітей уже займаються…». Текст цвета --ink-soft оказывался на коричневой
   обложке — контраст ~1.5:1, читать нельзя. На 768px то же самое делала звезда,
   стоявшая ровно за хвостом слова «люблять» в заголовке (замер: 1.26:1).
   Почему починено именно так. На узком экране колонка текста занимает почти всю
   ширину — увести мир «в сторону» некуда. А на невысоких экранах блок текста
   перерастает окно, тогда как холст мира — fixed, ровно в окно: любое «просто
   сдвинуть сцену вниз» рано или поздно снова упрётся в текст. Поэтому текст
   получает собственную поверхность — то же матовое стекло, что у карточек
   «Вартість» и «Контакти», — и читаемость перестаёт зависеть от того, где сейчас
   проплывает книжка. Стопку книг в scene.js дополнительно увели вниз, чтобы под
   самой важной строкой не висело бурое пятно.
   Порогов ДВА, и второй неочевиден. 3D-мир масштабируется по ВЫСОТЕ окна (размер
   предмета на экране = высота_окна / 7.64 на мировую единицу), а колонка текста —
   по ШИРИНЕ. Поэтому мир наезжает на текст в двух случаях:
     · окно узкое  — текст занимает почти всю ширину (порог --maxw, 1160px:
       шире этого .container уже не растёт и текст стоит на месте);
     · окно низкое — мир сжимается к центру, прямо на колонку текста.
   Замерено ДО починки (контраст под самими буквами, норма WCAG AA — 4.5:1):
     768x1024  — заголовок 1.26:1 (звезда за хвостом слова «люблять»);
     940x760   — заголовок 1.63:1;
     1180x720  — заголовок 1.48:1, подзаголовок 1.40:1;
     1280x720  — заголовок 1.36:1, подзаголовок 1.34:1;  ← обычный ноутбук!
     1280x800  — чисто: декор уходит правее колонки текста.
   Отсюда второе условие — max-height:900px. На большом мониторе (окно выше 900px
   и шире 1160px) стекла нет и герой выглядит ровно так, как выглядел. */
@media (max-width:1160px), (max-height:900px){
  .hero-text{
    position:relative; z-index:3;           /* свой слой поверх холста (#world, z-index:1) */
    padding:26px 20px 24px;
    border-radius:var(--r-lg);
    background:rgba(255,252,247,.82);
    -webkit-backdrop-filter:blur(12px) saturate(1.05);
    backdrop-filter:blur(12px) saturate(1.05);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:var(--sh-md),var(--sh-inset);
  }
  /* Цвета здесь не «на глаз», а посчитаны по WCAG 2.1 для ХУДШЕГО случая —
     когда прямо под стеклом стоит самый тёмный предмет мира (глина #A9785C).
     Фон под текстом получается #EFE4DB:
       --ink-soft (#7A6C5F) — 4.07:1, ниже нормы AA (4.5:1) → не годится;
       --ink      (#4B4038) — 8.0:1  → с запасом.
     Поэтому на узких экранах мелкий текст героя переводим на --ink. На чистом
     кремовом участке карточки те же строки дают 11:1 — хуже не стало нигде. */
  .hero-sub, .hero-trust p, .drag-hint{ color:var(--ink); }
  /* Карточка съела по 20px с каждой стороны — снимаем ограничение ширины,
     иначе строка «Понад 60 дітей…» рвётся на четыре куска. */
  .hero-trust{ gap:12px; }
  .hero-trust p{ max-width:none; }
}

@media (max-width:560px){
  .stats-inner{ grid-template-columns:1fr 1fr; padding:34px 18px; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .floating-cta span{ display:none; }
  .floating-cta{ padding:16px; }
  .sec{ padding:100px 0 70px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001s !important; }
  .reveal,[data-split] .ch{ opacity:1; transform:none; }
}