/* ===== Tokens (из Figma) ===== */
:root {
  --bg: #efeeec;
  --card: #ffffff;
  --green: #5b8061;        /* основной текст */
  --green-2: #5e7f64;      /* крупные заголовки / lead */
  --btn-bg: #edf3ea;       /* контакты */
  --cta-bg: rgba(164, 196, 149, 0.2);
  --blur: 14px;            /* Figma background blur 28 = CSS blur(14px) */
  --radius-card: 36px;
  --radius-btn: 20px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--green);
  font-family: var(--font);
  font-size: 16px;
  line-height: 19px; /* Inter 16/19, 14/17, 19/23, 20/24 — как в Figma */
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
em { font-style: italic; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.dotted {
  text-decoration: underline dotted;
  text-underline-position: from-font;
}
.link { display: inline; padding: 0; }

/* ===== Page / card ===== */
.page {
  max-width: 393px;
  margin: 0 auto;
  padding: 30px 17px 36px 16px;
}

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 32px 0 16px;
  overflow: hidden;
}

/* базовый горизонтальный отступ текста */
.intro, .lead, .about, .h2, .approach__text, .also, .prices, .write {
  padding-left: 24px;
  padding-right: 24px;
}

.intro {
  font-size: 16px;
  line-height: 19px;
  color: var(--green);
}

.lead {
  margin-top: 52px;
  font-size: 19px;
  line-height: 23px;
  color: var(--green-2);
  max-width: calc(298px + 48px);
}

.about {
  margin-top: 43px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.about__text {
  font-size: 14px;
  line-height: 17px;
  max-width: 180px;
}
.about__photo {
  width: 114px;
  height: 114px;
  object-fit: cover;
  flex-shrink: 0;
}

.h2 {
  font-weight: 400;
  font-size: 19px;
  line-height: 23px;
  color: var(--green-2);
}
.h2--focus { margin-top: 52px; }
.h2--approach { margin-top: 52px; }
.h2--online { margin-top: 41px; }

/* ===== Accordion ===== */
.accordion { margin-top: 34px; }

.acc { border-bottom: 1px solid var(--bg); }
.acc:first-child { border-top: 1px solid var(--bg); }

.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  text-align: left;
}
.acc__title {
  font-size: 16px;
  max-width: 256px;
}
.acc__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.acc__icon img {
  width: 20px;
  height: 20px;
  transition: transform .3s var(--ease);
}
.acc__head[aria-expanded="true"] .acc__icon img { transform: rotate(45deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.acc__panel.is-open { grid-template-rows: 1fr; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.acc__inner { overflow: hidden; }
.acc__inner p {
  padding: 0 24px 24px;
  font-size: 14px;
  line-height: 17px;
  color: var(--green);
  max-width: calc(256px + 48px);
}

/* ===== Approach ===== */
.approach__text {
  margin-top: 34px;
  font-size: 16px;
}
.also {
  margin-top: 44px;
  font-size: 14px;
  line-height: 17px;
}

/* ===== Methods (ОРКТ / ЭФТ / IFS) ===== */
.methods {
  margin-top: 15px;
  padding: 0 28px 0 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 89px;
}
.method {
  position: relative;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 17px;
  flex-shrink: 0;
}
.method--square {
  width: 86px; height: 84px;
  border: 1px solid var(--bg);
  border-radius: 20px;
}
.method--diamond { width: 89px; height: 89px; }
.method__shape {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62.93px; height: 62.93px;
  border: 1px solid var(--bg);
  transform: rotate(45deg);
}
.method--circle { width: 84px; height: 84px; }
.method--circle img { position: absolute; inset: 0; }
.method .dotted { position: relative; }

/* ===== Prices ===== */
.prices {
  margin-top: 29px;
  display: grid;
  grid-template-columns: 163px 1fr;
}
.price__title { font-size: 16px; white-space: nowrap; }
.price__time  { font-size: 14px; line-height: 17px; margin-top: 7px; }
.price__value { font-size: 16px; font-weight: 500; margin-top: 20px; white-space: nowrap; }

/* ===== Contacts ===== */
.write {
  margin-top: 77px;
  display: flex;
  align-items: flex-start;
  gap: 21px; /* как у иконок в футере: 24px иконка + 21px → текст на x=69 */
}
.write__icon { width: 24px; height: 24px; flex-shrink: 0; margin-top: -2.5px; } /* по центру первой строки */
.write__text { font-size: 16px; max-width: 265px; }

.contacts {
  margin: 25px 16px 0;
  display: flex;
  gap: 12px;
}
.contact {
  flex: 1 0 0;
  min-width: 0;
  height: 102px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  font-size: 14px;
  line-height: 17px;
  color: var(--green);
}
.contact--inactive { cursor: default; }

/* ===== Footer ===== */
.footer {
  margin-top: 44px;
  padding: 0 21px 0 24px; /* 40 / 38 от края экрана */
  font-size: 14px;
  line-height: 17px;
}
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__row + .footer__row { margin-top: 18px; }
.footer__link {
  display: flex;
  align-items: center;
  gap: 21px;
}
.footer__insta img { width: 72px; height: 16.16px; }

/* ===== Floating CTA ===== */
.cta {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(328px, calc(100% - 64px));
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 11px 16px;
  border-radius: var(--radius-btn);
  background: var(--cta-bg);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  font-size: 20px;
  line-height: 24px;
  color: var(--green-2);
  z-index: 10;
  transition: opacity .3s ease, visibility .3s;
}
.cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===== Reveal (появление по очереди с баунсом) ===== */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.86);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .45s ease var(--delay, 0s),
    transform .7s var(--bounce) var(--delay, 0s);
}
.reveal:nth-child(1) { --delay: 0s; }
.reveal:nth-child(2) { --delay: .12s; }
.reveal:nth-child(3) { --delay: .24s; }

/* ===== Bottom sheet ===== */
.sheet-root {
  position: fixed;
  inset: 0;
  z-index: 50;
}
.sheet-root[hidden] { display: none; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(239, 238, 236, 0.35);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  opacity: 0;
  transition: opacity .3s ease;
}
.sheet-root.is-open .sheet-backdrop { opacity: 1; }

.sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 393px;
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  color: var(--green);
  font-size: 16px;
  line-height: 19px;
  display: none;
  transform: translate(-50%, 100%);
  transition: transform .42s cubic-bezier(.32, .72, 0, 1);
}
.sheet.is-active { display: block; }
.sheet-root.is-open .sheet.is-active { transform: translate(-50%, 0); }

.sheet__title {
  font-weight: 400;
  font-size: 19px;
  line-height: 23px;
  color: var(--green-2);
  padding-right: 48px;
  margin-bottom: 20px;
}
.sheet p + p { margin-top: 12px; }

.sheet__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}
.sheet__close img { width: 20px; height: 20px; transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .sheet, .sheet-backdrop, .acc__panel, .acc__icon img { transition: none; }
}

/* ===== Document page (информированное согласие) ===== */
.doc {
  position: relative;
  overflow: visible; /* иначе sticky-кнопка не работает */
  padding: 32px 24px calc(16px + 58px + 32px); /* место под кнопку */
  font-size: 16px;
  line-height: 24px;
}
.doc__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.doc .tel--icon { gap: 8px; height: 48px; padding: 0 16px 0 12px; text-decoration: none; }
.doc .tel--icon img { width: 24px; height: 24px; }
.doc .tel {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  margin: 2px 0;
  border: 1px solid var(--bg);
  border-radius: 20px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: underline dotted;
  text-underline-position: from-font;
}
.doc__author {
  display: inline-block;
  font-size: 14px;
  line-height: 17px;
  color: var(--green);
  text-decoration: underline dotted;
  text-underline-position: from-font;
  margin-bottom: 20px;
}
.doc__title {
  font-weight: 400;
  font-size: 19px;
  line-height: 23px;
  color: var(--green-2);
}
.doc__note { margin-top: 24px; font-size: 14px; line-height: 21px; }
.doc__h {
  font-weight: 400;
  font-size: 19px;
  line-height: 23px;
  color: var(--green-2);
  margin-top: 44px;
}
.doc p + p { margin-top: 12px; }
.doc__h + p, .doc__h + .doc__list { margin-top: 16px; }
.doc__list { list-style: none; }
.doc__list li { position: relative; padding-left: 20px; }
.doc__list li + li { margin-top: 10px; }
.doc__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  opacity: .5;
}
.doc__list + p, .doc p + .doc__list { margin-top: 12px; }
.doc__help li + li { margin-top: 16px; }
.doc__help li p + p { margin-top: 8px; }
.doc__phones { display: flex; flex-wrap: wrap; gap: 8px; }
.doc__phones .tel { margin: 0; }

.cta--nav {
  gap: 4px;
  flex-direction: row-reverse; /* «На сайт ↗» */
  position: fixed;
  width: calc(100% - 64px);
  max-width: 328px;
}
.cta--nav.is-docked {
  position: absolute;          /* пристыкована к низу карточки */
  left: 16px;
  right: 16px;
  bottom: 16px;
  width: auto;
  max-width: none;
  transform: none;
}
.cta--back { gap: 8px; flex-direction: row; }         /* «← Назад» */
.cta--back .cta__icon { transform: rotate(225deg); }