/* Студия массажа и йоги «Энергия тела» — фирменный стиль в вебе.
   Палитра и шрифты: Бренд/Руфия/СТИЛЬ.md и ВИЗУАЛЬНАЯ-СИСТЕМА.md */

:root{
  --молочный:#FFF9F5;
  --светлый:#EEE8F5;
  --сиреневый:#B8A4D4;
  --акцент:#693D87;
  --глубокий:#3E244F;
  --приглушённый:#786A7D;
  --приглушённый-контраст:#6E6072;
  --линия:#D8CCE4;

  --загол:"Manrope","Avenir Next","Segoe UI",system-ui,sans-serif;
  --текст:"PT Sans","Manrope",Arial,sans-serif;

  --поле:clamp(1.25rem,5vw,2.5rem);
  --ширина:1180px;
  --мягко:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--молочный);
  color:var(--глубокий);
  font-family:var(--текст);
  font-size:clamp(1rem,.97rem + .3vw,1.1rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
picture{display:block}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
a{color:var(--акцент)}

h1,h2,h3{font-family:var(--загол);margin:0;letter-spacing:-.025em;line-height:1.06;font-weight:800}
h1{font-size:clamp(2.6rem,1.6rem + 4.6vw,4.75rem);line-height:1}
h2{font-size:clamp(1.8rem,1.25rem + 2.6vw,3.05rem);margin-bottom:.7em}
h3{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);font-weight:700;letter-spacing:-.015em}

:focus-visible{outline:3px solid var(--акцент);outline-offset:3px;border-radius:6px}

.skip{
  position:absolute;left:0;top:0;z-index:200;
  transform:translateY(-250%);transition:transform .2s var(--мягко);
  background:var(--глубокий);color:#fff;padding:.9rem 1.3rem;border-radius:0 0 14px 0;
  font-family:var(--загол);font-weight:700;text-decoration:none;
}
.skip:focus{transform:none}

.полоса{width:min(100% - var(--поле)*2,var(--ширина));margin-inline:auto;position:relative}

.надзаголовок{
  font-family:var(--загол);font-weight:800;
  font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--акцент);margin:0 0 1.1rem;
}
.лид{font-size:clamp(1.08rem,1rem + .55vw,1.4rem);line-height:1.5;color:var(--глубокий)}
.мелко{font-size:.9rem;color:var(--приглушённый);margin:0}

/* ── Фирменные линии-потоки ───────────────────────────── */
.поток{position:absolute;pointer-events:none;fill:none;stroke:var(--сиреневый);stroke-width:3;stroke-linecap:round;opacity:.5}
.поток__вторая{stroke-width:2;opacity:.55;stroke:var(--акцент)}
.поток--первый{width:min(100%,720px);right:0;top:-2.5rem;z-index:0}
.поток--йога{width:min(70%,520px);right:2%;left:auto;top:-1rem;opacity:.32}
.поток--дети{width:min(86%,640px);left:-6%;top:1.5rem;opacity:.26;z-index:0}

/* ── Кнопки ───────────────────────────────────────────── */
.кнопки{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 1.1rem}
.кнопка{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--загол);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  padding:.95rem 1.6rem;border-radius:999px;text-decoration:none;
  transition:background .25s var(--мягко),color .25s var(--мягко),transform .18s var(--мягко),border-color .25s var(--мягко);
}
.кнопка svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.кнопка:active{transform:translateY(1px)}
.кнопка--главная{background:var(--глубокий);color:#fff}
.кнопка--главная:hover{background:var(--акцент)}
.кнопка--вторая{background:transparent;color:var(--акцент);border:2px solid var(--линия)}
.кнопка--вторая:hover{border-color:var(--акцент);background:var(--светлый)}
.кнопка--светлая{background:var(--молочный);color:var(--глубокий)}
.кнопка--светлая:hover{background:#fff}
.кнопка--контур{background:transparent;color:var(--светлый);border:2px solid rgba(238,232,245,.45)}
.кнопка--контур:hover{border-color:var(--светлый);background:rgba(238,232,245,.12)}

/* ── Шапка ────────────────────────────────────────────── */
.шапка{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--поле);
  background:rgba(255,249,245,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(216,204,228,.55);
}
.шапка__марка{display:flex;flex-direction:column;text-decoration:none;color:var(--глубокий);line-height:1.15}
.шапка__имя{font-family:var(--загол);font-weight:800;font-size:1.06rem;letter-spacing:-.02em}
.шапка__род{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--приглушённый)}
.шапка__телефон{
  font-family:var(--загол);font-weight:700;font-size:1rem;color:var(--акцент);
  text-decoration:none;white-space:nowrap;
}
.шапка__телефон:hover{color:var(--глубокий)}
@media (max-width:559px){.шапка__телефон{display:none}}

/* ── 1. Первый экран ──────────────────────────────────── */
.первый{
  position:relative;overflow-x:clip;
  padding:clamp(2.5rem,7vw,5rem) var(--поле) clamp(3rem,7vw,5.5rem);
  width:min(100%,calc(var(--ширина) + var(--поле)*2));margin-inline:auto;
}
.первый__текст{position:relative;z-index:1;max-width:34rem}
.первый h1{margin-bottom:.9rem;text-wrap:balance}
.первый .лид{margin-bottom:1.8rem;color:var(--приглушённый)}
.первый__фото{margin:2.25rem 0 0;position:relative;z-index:1}
.первый__фото img{
  width:100%;border-radius:28px;
  box-shadow:0 26px 60px -34px rgba(62,36,79,.55);
  border:6px solid var(--молочный);
}

@media (min-width:900px){
  .первый{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(2rem,4vw,4rem);align-items:center}
  .первый__текст{max-width:none}
  .первый__фото{margin:0}
  .первый__фото img{border-radius:36px}
}

/* ── 2. Узнавание ─────────────────────────────────────── */
.узнавание{background:var(--светлый);padding:clamp(3rem,8vw,5.5rem) 0}
.узнавание h2{max-width:16ch;text-wrap:balance}
.приметы{margin:0 0 2.25rem;display:grid;gap:.15rem;max-width:44rem}
.приметы li{
  position:relative;padding:.85rem 0 .85rem 2.4rem;
  border-bottom:1px solid rgba(216,204,228,.85);
  font-size:clamp(1.02rem,.98rem + .35vw,1.18rem);
}
.приметы li:last-child{border-bottom:0}
.приметы li::before{
  content:"";position:absolute;left:0;top:1.55em;
  width:1.4rem;height:2px;border-radius:2px;background:var(--акцент);
}
.вывод{
  font-family:var(--загол);font-weight:700;
  font-size:clamp(1.2rem,1.05rem + .8vw,1.7rem);line-height:1.35;
  letter-spacing:-.02em;margin:0;max-width:32ch;
}

/* ── 3. Как проходит сеанс ────────────────────────────── */
.сеанс{padding:clamp(3.25rem,8vw,6rem) 0}
.сеанс__сетка{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media (min-width:920px){
  .сеанс__сетка{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
}
.шаги{counter-reset:ш;display:grid;gap:1.5rem;max-width:38rem}
.шаги li{position:relative;padding-left:3.4rem}
.шаги li::before{
  counter-increment:ш;content:counter(ш);
  position:absolute;left:0;top:-.1rem;
  width:2.4rem;height:2.4rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--светлый);color:var(--акцент);
  font-family:var(--загол);font-weight:800;font-size:1rem;
}
.шаги h3{margin:.15rem 0 .3rem}
.шаги p{margin:0;color:var(--приглушённый)}

.фотоокно{margin:0}
.фотоокно img{
  width:100%;border-radius:28px;object-fit:cover;
  box-shadow:0 22px 52px -32px rgba(62,36,79,.5);
}
.фотоокно--портрет img{border-radius:32px}

.цитата{
  margin:1.75rem 0 0;padding:1.5rem 1.6rem;
  background:var(--светлый);border-radius:24px;
  border-left:5px solid var(--акцент);
}
.цитата p{margin:0 0 .8rem;font-size:1.02rem;line-height:1.6}
.цитата footer{font-family:var(--загол);font-weight:800;font-size:.92rem;color:var(--акцент)}
.цитата footer::before{content:"— "}

/* ── 4. Виды массажа ──────────────────────────────────── */
.услуги{padding:clamp(3.25rem,8vw,6rem) 0;background:var(--молочный)}
.список-услуг{display:grid;gap:.9rem}
.услуга{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"photo text" "photo price";
  align-items:center;gap:.2rem 1rem;
  padding:.7rem;border-radius:20px;
  background:#fff;border:1px solid rgba(216,204,228,.7);
  transition:border-color .25s var(--мягко),transform .25s var(--мягко),box-shadow .25s var(--мягко);
}
.услуга:hover{border-color:var(--сиреневый);transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(62,36,79,.45)}
.услуга picture{grid-area:photo}
.услуга img{width:5.25rem;height:5.25rem;object-fit:cover;border-radius:14px}
.услуга__текст{min-width:0;grid-area:text;align-self:end}
.услуга h3{margin:0 0 .15rem;text-wrap:balance;overflow-wrap:break-word}
.услуга__время{margin:0;font-size:.86rem;color:var(--приглушённый);line-height:1.35}
.услуга__цена{
  margin:0;font-family:var(--загол);font-weight:800;
  font-size:clamp(1.05rem,1rem + .45vw,1.35rem);
  color:var(--акцент);white-space:nowrap;
  grid-area:price;align-self:start;
}

@media (min-width:760px){
  .список-услуг{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
  .услуга{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:none;align-items:start;padding:.75rem .75rem 1.1rem;gap:.85rem}
  .услуга picture,.услуга__текст,.услуга__цена{grid-area:auto}
  .услуга img{width:100%;height:auto;aspect-ratio:4/3;border-radius:16px}
  .услуга__текст{padding:0 .35rem}
  .услуга__цена{padding:0 .35rem}
}
@media (min-width:1060px){
  .список-услуг{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
}

.подсказка{
  margin-top:2.25rem;padding:1.6rem;border-radius:24px;
  background:var(--светлый);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
}
.подсказка p{
  margin:0;font-family:var(--загол);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.02rem,.98rem + .4vw,1.22rem);max-width:32ch;
}

/* ── 5. О Руфии ───────────────────────────────────────── */
.про{background:var(--светлый);padding:clamp(3.25rem,8vw,6rem) 0}
.про__сетка{display:grid;gap:clamp(1.75rem,4vw,3rem);margin-bottom:clamp(2.5rem,6vw,4rem)}
.про__сетка .фотоокно img{object-fit:contain}
@media (min-width:860px){
  .про__сетка{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);align-items:center}
}
.про__текст p{color:var(--глубокий)}
.оговорка{
  margin-top:1.4rem;padding:1.05rem 1.2rem;
  background:var(--молочный);border-radius:18px;
  font-size:.95rem;line-height:1.55;color:var(--приглушённый);
}
.оговорка strong{color:var(--глубокий)}

.дипломы__титул{margin:0 0 1.4rem;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);font-weight:800}
.дипломы{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(9.5rem,10.5rem);
  gap:.9rem;overflow-x:auto;padding-bottom:1rem;margin-bottom:.6rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--сиреневый) transparent;
}
.дипломы li{scroll-snap-align:start}
.дипломы button{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  font:inherit;color:inherit;text-align:left;
}
.дипломы img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;
  border:4px solid var(--молочный);
  box-shadow:0 12px 26px -20px rgba(62,36,79,.6);
  transition:transform .25s var(--мягко);
}
.дипломы button:hover img{transform:translateY(-3px)}
.дипломы span{display:block;margin-top:.55rem;font-size:.82rem;line-height:1.35;color:var(--приглушённый)}
@media (min-width:900px){
  .дипломы{grid-auto-flow:row;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible}
}

/* ── 6. Йога ──────────────────────────────────────────── */
.йога{padding:clamp(3rem,7vw,5rem) 0;position:relative;overflow:hidden}
.йога__сетка{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (min-width:860px){
  .йога__сетка{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
}
.йога__сетка .фотоокно img{aspect-ratio:3/2;object-fit:cover;border-radius:26px}
.йога__текст{position:relative;z-index:1;max-width:34rem}
.йога .лид{color:var(--глубокий);margin-bottom:.9rem}
.йога p:last-child{color:var(--приглушённый);margin:0}

/* ── 7. Аэройога для взрослых ─────────────────────────── */
.взрослые{padding:clamp(3rem,7vw,5rem) 0;background:var(--молочный)}
.взрослые__карта{
  background:linear-gradient(160deg,var(--светлый) 0%,#F6F1FA 100%);
  border-radius:32px;padding:clamp(1.5rem,4vw,3rem);
}
.взрослые__верх{display:grid;gap:clamp(1.5rem,4vw,2.75rem);align-items:center}
@media (min-width:860px){
  .взрослые__верх{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
}
.взрослые__фото{margin:0}
.взрослые__фото img{
  width:100%;border-radius:24px;object-fit:cover;
  box-shadow:0 24px 55px -34px rgba(62,36,79,.6);
}
@media (min-width:860px){
  .взрослые__фото img{border-radius:96px 28px 28px 28px}
}
.взрослые__текст{max-width:34rem}
.взрослые__текст h2{margin-bottom:.5em}
.взрослые .лид{color:var(--глубокий);margin-bottom:1em}
.взрослые__текст p:not(.лид):not(.надзаголовок){color:var(--приглушённый-контраст)}
.взрослые__текст p:last-child{margin-bottom:0}

.взрослые__низ{display:grid;gap:1rem;margin-top:clamp(1.75rem,4vw,2.5rem)}
@media (min-width:760px){
  .взрослые__низ{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.25rem}
}

/* В трёх узких колонках подпись ставим над значением — иначе строки рвутся */
.взрослые__низ .условия__список > div{grid-template-columns:minmax(0,1fr)}

.сборы{
  background:#fff;border:1px solid rgba(216,204,228,.8);
  border-radius:24px;padding:clamp(1.35rem,3.5vw,1.9rem);
}
.сборы h3{margin:0 0 1.15rem}
.сборы__список{display:grid;gap:.7rem;margin:0 0 1.1rem}
.сборы__список li{position:relative;padding-left:1.8rem;line-height:1.45}
.сборы__список li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:.55rem;height:.55rem;border-radius:50%;
  background:var(--акцент);box-shadow:0 0 0 4px rgba(105,61,135,.14);
}
.сборы__мелко{margin:0;font-size:.9rem;line-height:1.5;color:var(--приглушённый-контраст)}

/* ── 8. Аэройога для детей ────────────────────────────── */
.дети{
  position:relative;overflow:hidden;
  padding:clamp(3.25rem,8vw,5.5rem) 0;
  background:linear-gradient(180deg,var(--молочный) 0%,#F8F3FB 46%,var(--светлый) 100%);
}
.дети .полоса{z-index:1}

.дети__верх{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media (min-width:860px){
  .дети__верх{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
}
.дети__текст{max-width:36rem}
.дети__текст h2{margin-bottom:.55em}
.дети .лид{color:var(--глубокий);margin-bottom:1em}
.дети__текст p:not(.лид):not(.надзаголовок){color:var(--приглушённый-контраст)}
.дети__текст p:last-child{margin-bottom:0}

.дети__фото{margin:0}
.дети__фото img{
  width:100%;border-radius:28px;object-fit:cover;
  box-shadow:0 26px 60px -34px rgba(62,36,79,.6);
}
@media (min-width:860px){
  .дети__фото img{border-radius:32px 32px 104px 32px}
}

.дети__низ{display:grid;gap:1rem;margin-top:clamp(2rem,5vw,3rem)}
@media (min-width:760px){
  .дети__низ{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:1.25rem}
}

.условия{
  background:#fff;border:1px solid rgba(216,204,228,.8);
  border-radius:24px;padding:clamp(1.35rem,3.5vw,1.9rem);
}
.условия h3{margin:0 0 1.15rem}
.условия__список{margin:0;display:grid;gap:.9rem}
.условия__список > div{
  display:grid;grid-template-columns:6.5rem minmax(0,1fr);
  gap:.2rem 1rem;align-items:baseline;
  padding-bottom:.9rem;border-bottom:1px solid rgba(216,204,228,.55);
}
.условия__список > div:last-child{padding-bottom:0;border-bottom:0}
.условия dt{
  font-family:var(--загол);font-weight:800;font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--акцент);
}
.условия dd{margin:0;line-height:1.45}
.условия__цена{
  font-family:var(--загол);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem);color:var(--глубокий);
}
@media (max-width:439px){
  .условия__список > div{grid-template-columns:minmax(0,1fr)}
}

.абонемент{
  background:var(--глубокий);color:var(--светлый);
  border-radius:24px;padding:clamp(1.5rem,3.5vw,2rem);
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 26px 55px -34px rgba(62,36,79,.9);
}
.абонемент__метка{
  margin:0 0 .85rem;font-family:var(--загол);font-weight:800;
  font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--сиреневый);
}
.абонемент h3{
  margin:0 0 .75rem;color:#fff;text-wrap:balance;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);
}
.абонемент__состав{margin:0 0 1.15rem;color:rgba(238,232,245,.82);line-height:1.5}
.абонемент__цена{
  margin:0;font-family:var(--загол);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2.05rem,1.4rem + 2.6vw,3rem);color:#fff;
}

.дети__зов{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem 1.25rem;text-align:center;
}
.дети__зов p{
  margin:0;font-family:var(--загол);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.02rem,.98rem + .4vw,1.22rem);max-width:34ch;
}

/* ── 9. Где найти ─────────────────────────────────────── */
.места{padding:clamp(3rem,7vw,5rem) 0;background:var(--светлый)}
.адреса{display:grid;gap:1rem;margin:0 0 1.75rem;max-width:44rem}
.адреса li{
  position:relative;padding:1.1rem 1.2rem 1.1rem 3rem;
  background:var(--молочный);border-radius:20px;
}
.адреса li::before{
  content:"";position:absolute;left:1.2rem;top:1.65rem;
  width:.7rem;height:.7rem;border-radius:50%;
  background:var(--акцент);box-shadow:0 0 0 5px rgba(105,61,135,.15);
}
.адрес__город{display:block;font-family:var(--загол);font-weight:800;font-size:1.08rem;letter-spacing:-.015em}
.адрес__точка{display:block;color:var(--приглушённый);font-size:.98rem}
.адрес__метка{
  display:inline-block;margin-top:.6rem;padding:.22rem .7rem .28rem;
  border-radius:999px;background:var(--светлый);color:var(--акцент);
  font-family:var(--загол);font-weight:800;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.места p:last-child{margin:0;color:var(--приглушённый-контраст)}

/* ── 10. Частые вопросы ───────────────────────────────── */
.вопросы{padding:clamp(3rem,7vw,5rem) 0;background:var(--молочный)}
.вопросы__список{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
}
.вопросы__список li{
  background:#fff;border:1px solid rgba(216,204,228,.8);
  border-radius:24px;padding:clamp(1.35rem,3.5vw,1.75rem);
}
.вопросы__список h3{margin:0 0 .6rem;text-wrap:balance;color:var(--глубокий)}
.вопросы__список p{margin:0;line-height:1.55;color:var(--приглушённый-контраст)}

/* ── 11. Запись ───────────────────────────────────────── */
.запись{
  background:var(--глубокий);color:var(--светлый);
  padding:clamp(3.25rem,8vw,5.5rem) 0 clamp(3.25rem,8vw,5.5rem);
  text-align:center;
}
.запись h2{color:#fff}
.запись .надзаголовок{color:var(--сиреневый)}
.запись .лид{color:rgba(238,232,245,.85);margin-bottom:1.5rem}
.запись .кнопки{justify-content:center;margin-bottom:1.1rem}
.телефон-крупно{
  display:inline-block;margin:0 0 1.75rem;
  font-family:var(--загол);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.9rem,1.1rem + 3.6vw,3.4rem);
  color:#fff;text-decoration:none;line-height:1;
  border-bottom:3px solid rgba(184,164,212,.5);padding-bottom:.12em;
  transition:border-color .25s var(--мягко);
}
.телефон-крупно:hover{border-color:var(--сиреневый)}
.запись .мелко{color:rgba(238,232,245,.62)}

/* ── Подвал ───────────────────────────────────────────── */
.подвал{background:var(--глубокий);color:rgba(238,232,245,.75);padding:0 0 clamp(2rem,5vw,3rem);font-size:.9rem}
.подвал__сетка{border-top:1px solid rgba(238,232,245,.16);padding-top:1.75rem;display:grid;gap:.4rem}
.подвал p{margin:0}
.подвал a{color:var(--светлый)}
.подвал__марка{font-family:var(--загол);font-weight:700;color:#fff}
.подвал__сноска{margin-top:.6rem;font-size:.82rem;color:rgba(238,232,245,.5);max-width:52ch}

/* ── Липкая кнопка на телефоне ────────────────────────── */
.липкая{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1rem calc(.95rem + env(safe-area-inset-bottom));
  background:var(--глубокий);color:#fff;text-decoration:none;
  font-family:var(--загол);font-weight:700;font-size:1.02rem;
  box-shadow:0 -10px 28px -18px rgba(62,36,79,.9);
}
.липкая svg{width:1.15em;height:1.15em;fill:currentColor}
@media (max-width:899px){
  .липкая{display:flex}
  body{padding-bottom:4.25rem}
}

/* ── Просмотр диплома крупно ──────────────────────────── */
.крупно{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;padding:1.25rem;
  background:rgba(62,36,79,.92);backdrop-filter:blur(6px);
}
.крупно[hidden]{display:none}
.крупно img{max-width:100%;max-height:88vh;border-radius:18px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.крупно__закрыть{
  position:absolute;top:1rem;right:1rem;
  width:2.9rem;height:2.9rem;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,249,245,.16);color:#fff;font-size:1.15rem;line-height:1;
}
.крупно__закрыть:hover{background:rgba(255,249,245,.3)}

/* ── Появление ────────────────────────────────────────── */
/* Содержимое видно всегда. Прячем его только когда скрипт подтвердил,
   что умеет показать обратно — иначе при сбое JS человек увидит пустые экраны. */
.есть-анимация [data-появление]{opacity:0;transform:translateY(14px);animation:всплыть .8s var(--мягко) forwards}
.есть-анимация [data-появление="1"]{animation-delay:.05s}
.есть-анимация [data-появление="2"]{animation-delay:.15s}
.есть-анимация [data-появление="3"]{animation-delay:.28s}
.есть-анимация [data-появление="4"]{animation-delay:.4s}
.есть-анимация [data-появление="5"]{animation-delay:.52s}
@keyframes всплыть{to{opacity:1;transform:none}}

.есть-анимация .явление{opacity:0;transform:translateY(16px);transition:opacity .7s var(--мягко),transform .7s var(--мягко)}
.есть-анимация .явление.видно{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-появление],.явление{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .услуга:hover,.дипломы button:hover img{transform:none}
}