/* obnovi.site — облик «Спокойный» (v2). Ботаническая акварель на бумаге, движение как рост. */
:root {
  --paper: #F2EEE1;
  --paper-2: #F7F4EA;
  --mist: #E7ECE2;
  --ink: #1D2A23;
  --graphite: #56615A;
  --forest: #1F5E3A;
  --leaf: #2E9E4F;
  --sage: #9DB39C;
  --light: #F1E3B8;
  --line: #D9DBCE;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;
  --bar-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.65 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body::after { /* зерно бумаги */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .35  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img { max-width: 100%; display: block; }
p, dd { text-wrap: pretty; }
a { color: inherit; }
em { font-style: italic; }
h1, h2, h3 { font-weight: 500; }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--max); margin: 0 auto; }
.dot { display: inline-block; width: 12px; height: 12px; flex: none; background: var(--leaf); border-radius: 0 100% 0 100%; transform: rotate(-12deg); }

/* ---------- Знак ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.tree { width: 42px; height: 42px; flex: none; overflow: visible; }
.brand__name { font: 800 21px/1 var(--sans); letter-spacing: -.01em; color: #0F172A; }
.brand__name span { color: var(--leaf); }
.tree .lf { transform-box: view-box; transform-origin: 0 0; }

/* ---------- Шапка ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 0 var(--gutter);
  transition: background .8s var(--ease), box-shadow .8s var(--ease), backdrop-filter .8s var(--ease);
}
.bar.is-scrolled { background: rgba(242, 238, 225, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.bar__in { max-width: var(--max); margin: 0 auto; height: var(--bar-h); display: flex; align-items: center; gap: 36px; transition: height .8s var(--ease); }
.bar.is-scrolled .bar__in { height: 66px; }
.bar__nav { display: flex; gap: 28px; margin-left: auto; }
.bar__nav a, .bar__tel {
  font: 500 15px/1 var(--sans); color: var(--graphite); text-decoration: none; padding-bottom: 5px;
  background: linear-gradient(var(--leaf), var(--leaf)) 0 100% / 0 1px no-repeat;
  transition: color .5s var(--ease), background-size .7s var(--ease);
}
.bar__nav a:hover, .bar__tel:hover { color: var(--ink); background-size: 100% 1px; }
.bar__tel { font-weight: 600; color: var(--ink); white-space: nowrap; }
.bar__call { display: none; width: 36px; height: 36px; border-radius: 50%; place-items: center; background: var(--forest); color: #fff; flex: none; }
.bar__call svg { width: 17px; height: 17px; fill: currentColor; }

/* компактный переключатель: три кружка-образца облика */
.mini { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(157, 179, 156, .45); }
.mini__b {
  position: relative; width: 24px; height: 24px; border-radius: 50%; display: block;
  box-shadow: inset 0 0 0 1px rgba(29, 42, 35, .15);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.mini__b--solid { background: linear-gradient(135deg, #F6F5F0 50%, #0F172A 50%); }
.mini__b--calm { background: linear-gradient(135deg, #F2EEE1 50%, #2E9E4F 50%); }
.mini__b--bold { background: linear-gradient(135deg, #2B2BFF 50%, #D7FF3C 50%); }
.mini__b:hover { transform: translateY(-2px); }
.mini__b[aria-current="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--forest); }
.mini__b::after { /* подпись при наведении */
  content: attr(title); position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px);
  font: 500 12px/1 var(--sans); color: var(--ink); background: var(--paper-2); padding: 6px 9px; border-radius: 8px;
  box-shadow: 0 6px 18px -8px rgba(29, 42, 35, .35); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.mini__b:hover::after, .mini__b:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mini--foot .mini__b::after { top: auto; bottom: calc(100% + 10px); }

/* ---------- Сквозной стебель ---------- */
main { position: relative; }
.stem { display: none; }
@media (min-width: 1280px) {
  .stem {
    display: block; position: absolute; z-index: 1; pointer-events: none;
    left: calc((100% - var(--max)) / 2 - 44px); top: calc(100vh + 120px); bottom: 150px; width: 2px;
  }
  .stem::after { /* конец стебля: лист у финальной ветки */
    content: ""; position: absolute; left: -8px; bottom: -6px; width: 18px; height: 18px;
    background: var(--leaf); border-radius: 0 100% 0 100%; transform: rotate(-45deg) scale(var(--end, 1));
    box-shadow: 0 0 0 5px var(--paper); transition: transform 1s var(--ease);
  }
  .stem span {
    position: absolute; inset: 0; border-radius: 2px;
    background: linear-gradient(to bottom, rgba(157, 179, 156, 0), var(--sage) 120px, var(--sage) calc(100% - 60px), rgba(157, 179, 156, 0));
    transform-origin: top; transform: scaleY(var(--grow, 1));
  }
  .num::before { /* узел стебля у каждого раздела */
    content: ""; position: absolute; left: calc(-44px - 8px); top: 50%; width: 18px; height: 18px; margin-top: -9px;
    background: var(--leaf); border-radius: 0 100% 0 100%; transform: rotate(-45deg);
    box-shadow: 0 0 0 5px var(--paper);
    transition: transform 1.1s var(--ease) .2s;
  }
  .how .num::before { box-shadow: 0 0 0 5px #EDEBDD; }
  .anim .reveal:not(.is-in) .num::before { transform: rotate(-45deg) scale(0); }
}

/* ---------- Первый экран ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--bar-h) + 24px) var(--gutter) 64px; overflow: hidden; isolation: isolate; background: var(--paper);
}
.hero__art {
  position: absolute; z-index: -2; right: -3vw; top: 50%; width: 52vw; aspect-ratio: 1096 / 760; margin-top: -13vw;
  -webkit-mask: linear-gradient(to right, transparent, #000 12%), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, transparent, #000 12%), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
.hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__art-dry { filter: grayscale(1) contrast(.95) brightness(1.03); }
.hero__light {
  position: absolute; z-index: -1; pointer-events: none; width: 70vmax; height: 70vmax; left: -22vmax; top: -30vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(241, 227, 184, .75), rgba(241, 227, 184, 0));
}
.hero__halo {
  position: absolute; z-index: -1; pointer-events: none; opacity: 0; left: 0; top: 0;
  width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 250, 228, .7), rgba(255, 250, 228, 0));
  transition: opacity 1.2s var(--ease);
}
.hero.is-lit .hero__halo { opacity: 1; }
.hero__body { position: relative; max-width: var(--max); width: 100%; margin: 0 auto; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 15px/1 var(--sans); color: var(--forest); }
.hero__title { margin: 26px 0 26px; max-width: 900px; font: 500 clamp(44px, 5.1vw, 74px)/1.04 var(--serif); letter-spacing: -.015em; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > * { display: inline-block; }
.hero__title em { color: var(--forest); }
.hero__lead { max-width: 560px; margin: 0 0 26px; font-size: 19px; line-height: 1.6; color: var(--ink); }

/* три кнопки облика — каждая набрана шрифтом своего облика */
.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 176px)); gap: 12px; margin: 0 0 30px; }
.look {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 104px; padding: 14px 16px 16px; border-radius: 20px; text-decoration: none;
  border: 1.5px solid transparent; top: 0;
  transition: top .7s var(--ease), box-shadow .7s var(--ease), border-color .7s var(--ease);
}
.look:hover { top: -4px; box-shadow: 0 22px 34px -22px rgba(29, 42, 35, .55); }
.look:active { top: 1px; transition-duration: .15s; }
/* наведение: из-под кнопки по бумаге растекается акварельная клякса цвета облика */
.look__bloom {
  position: absolute; z-index: -1; left: 50%; top: 54%; width: 158%; aspect-ratio: 1.3; pointer-events: none;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  /* мокрое пятно: светлая середина, пигмент скапливается у неровной каймы */
  background:
    radial-gradient(closest-side, transparent 58%, var(--bloom) 66%, transparent 71%),
    radial-gradient(closest-side, var(--bloom2) 0%, var(--bloom2) 50%, transparent 70%);
  filter: url(#wet) blur(3px); opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(-8deg);
  transition: opacity 1.4s var(--ease), transform 1.8s var(--ease);
}
.look:hover .look__bloom, .look:focus-visible .look__bloom { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
.look--solid { --bloom: rgba(15, 23, 42, .22); --bloom2: rgba(120, 134, 154, .18); }
.look--calm { --bloom: rgba(46, 158, 79, .3); --bloom2: rgba(241, 227, 184, .6); }
.look--bold { --bloom: rgba(43, 43, 255, .5); --bloom2: rgba(215, 255, 60, .38); }
.look__sw { display: flex; gap: 5px; }
.look__sw i { width: 14px; height: 14px; border-radius: 50%; }
.look__name { font-size: 20px; line-height: 1.1; }
.look--solid { background: #F6F5F0; color: #0F172A; border-color: #0F172A; border-radius: 4px; }
.look--solid .look__name { font: 500 17px/1.1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; }
.look--solid .look__sw i { border-radius: 0; width: 12px; height: 12px; }
.look--solid .look__sw i:nth-child(1) { background: #0F172A; }
.look--solid .look__sw i:nth-child(2) { background: #DAD8CF; }
.look--solid .look__sw i:nth-child(3) { background: #2E9E4F; }
.look--calm { background: rgba(255, 255, 255, .55); color: var(--forest); border-color: rgba(157, 179, 156, .6); }
.look--calm .look__name { font: 600 italic 26px/1 var(--serif); }
.look--calm .look__sw i:nth-child(1) { background: var(--light); }
.look--calm .look__sw i:nth-child(2) { background: var(--sage); }
.look--calm .look__sw i:nth-child(3) { background: var(--leaf); border-radius: 0 100% 0 100%; }
.look--bold { background: #2B2BFF; color: #D7FF3C; border-radius: 26px 26px 26px 6px; }
.look--bold .look__name { font: 700 16px/1.1 'Unbounded', var(--sans); }
.look--bold .look__sw i:nth-child(1) { background: #D7FF3C; }
.look--bold .look__sw i:nth-child(2) { background: #FF5A36; }
.look--bold .look__sw i:nth-child(3) { background: #FFF6E6; }
.look[aria-current="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--forest); }
.look[aria-current="true"]::after { /* отметка текущего облика */
  content: ""; position: absolute; right: 14px; top: 14px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--forest); box-shadow: 0 0 0 4px rgba(31, 94, 58, .16);
}

.hero__link {
  display: inline-flex; align-items: center; gap: 12px; font: 600 16px/1.4 var(--sans); color: var(--forest);
  text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(var(--sage), var(--sage)) 30px 100% / calc(100% - 30px) 1px no-repeat;
  transition: color .5s var(--ease);
}
.hero__link:hover { color: var(--leaf); }

/* ---------- Разделы ---------- */
.sec { position: relative; padding: 120px var(--gutter); }
.num { position: relative; margin: 0 0 18px; font: 500 italic 26px/1 var(--serif); color: var(--forest); }
.h2 { margin: 0 0 28px; font: 500 clamp(40px, 4.6vw, 66px)/1.04 var(--serif); letter-spacing: -.01em; }
.h2 em { color: var(--forest); }

/* пришла ссылка */
.linkb { padding-top: 90px; }
.linkb__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px 72px; align-items: center; }
.linkb__lead { margin: 0; font-size: 19px; max-width: 540px; }
.linkb__art { margin: 0; }
.linkb__pic { position: relative; }
.linkb__pic img { width: 100%; height: auto; }
.linkb__live { position: absolute; inset: 0; }
.linkb__dry { filter: grayscale(1); }
.facts { grid-column: 1 / -1; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.fact { padding: 28px 30px 30px; border-radius: 26px; background: rgba(255, 255, 255, .45); border: 1px solid rgba(157, 179, 156, .35); }
.fact dt { margin: 0 0 10px; font: 600 28px/1.12 var(--serif); color: var(--ink); }
.fact dd { margin: 0; color: var(--graphite); }
.fact b { color: var(--forest); font-weight: 600; }
.nowrap { white-space: nowrap; }

/* как это работает */
.how {
  -webkit-mask: linear-gradient(to bottom, transparent, #000 110px, #000 calc(100% - 110px), transparent);
  mask: linear-gradient(to bottom, transparent, #000 110px, #000 calc(100% - 110px), transparent);
  background: linear-gradient(rgba(242, 238, 225, .42), rgba(242, 238, 225, .42)), #EDEBDD url("../img/wash.webp") center / cover no-repeat; }
.how__intro { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 48px; margin-bottom: 64px; }
.how__intro .num { grid-column: 1 / -1; }
.how__intro .h2 { margin: 0; }
.terms { grid-column: 1 / -1; margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: center; }
.terms__help { grid-column: 1 / 3; }
.terms__pay { grid-column: 3 / 5; }
.terms__help { display: flex; align-items: center; gap: 14px; margin: 0; font: 500 italic 27px/1.3 var(--serif); color: var(--forest); }
/* оплата после работ — главное условие для осторожного человека: выделено тёмным листом */
.terms__pay {
  position: relative; display: flex; align-items: center; gap: 20px; margin: 0; padding: 26px 32px; border-radius: 26px;
  background: rgba(255, 255, 255, .62); border: 1.5px solid var(--forest); color: var(--graphite); font-size: 18px; line-height: 1.5;
  box-shadow: 0 22px 40px -32px rgba(31, 94, 58, .7);
}
.terms__pay b { display: block; font: 600 30px/1.15 var(--serif); color: var(--forest); margin-bottom: 4px; }
.terms__mark { flex: none; width: 34px; height: 34px; border-radius: 0 100% 0 100%; background: var(--leaf); transform: rotate(-12deg); }
.how__note { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; max-width: 460px; font: 500 italic 26px/1.3 var(--serif); color: var(--forest); }
.steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.steps::before { /* стебель шагов растёт слева направо */
  content: ""; position: absolute; left: 0; right: 0; top: 94px; height: 2px; border-radius: 2px;
  background: var(--sage); transform-origin: left; transform: scaleX(var(--grow, 1));
}
.step { position: relative; padding-top: 126px; }
.step__num {
  position: absolute; left: 0; top: 0; font: 500 italic 76px/1 var(--serif); color: var(--forest); font-variant-numeric: lining-nums;
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.step__leaf {
  position: absolute; left: 4px; top: 87px; width: 16px; height: 16px; border-radius: 0 100% 0 100%;
  background: var(--leaf); transform: rotate(-45deg); box-shadow: 0 0 0 5px rgba(237, 234, 222, .95);
  transition: transform 1.1s var(--ease) .25s;
}
.step h3 { margin: 0 0 12px; font: 600 30px/1.1 var(--serif); }
.step p { margin: 0; color: #4B564F; }

/* подходы */
.appr { padding-bottom: 90px; }
.appr__head { max-width: 760px; margin-bottom: 40px; }
.cards { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 0; align-items: start; }
.cards__fork { position: relative; align-self: stretch; }
.cards__fork::before { content: ""; position: absolute; left: 50%; top: 40px; bottom: 10px; width: 2px; margin-left: -1px; background: linear-gradient(to bottom, transparent, var(--sage) 20%, var(--sage) 80%, transparent); }
.cards__fork span { position: absolute; left: 50%; top: 45%; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--leaf); border-radius: 0 100% 0 100%; transform: rotate(-45deg); box-shadow: 0 0 0 6px var(--paper); }
.card { position: relative; }
.card__art { position: relative; height: 380px; margin-bottom: 18px; }
.card__art img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; transform-origin: 50% 100%; }
.card__now { transform: translateX(-50%); transition: transform 1.4s var(--ease); }
.card__was { /* «было» — исходная веточка карандашом */
  filter: grayscale(1) contrast(1.35) brightness(1.08); opacity: .42; height: 82% !important; transform: translateX(-104%) rotate(-10deg);
  transition: opacity 1.2s var(--ease);
}
.card--2 .card__was { transform: translateX(-100%) rotate(-12deg); }
.card--1 .card__was { transform: translateX(-112%); opacity: .5; height: 100% !important; }
.card--1 .card__now { left: 52%; }
.card--3 .card__was { opacity: .3; transform: translateX(-104%) rotate(-14deg); }
.card--3 .card__now { height: 86%; }
.card:hover .card__was { opacity: .18; }
.card__now { -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat; mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat; }
.card:hover .card__now, .anim .card.is-in:hover .card__now { animation: sway 3.4s ease-in-out infinite; -webkit-mask-position: 0 0; mask-position: 0 0; }
.card__title { font-size: 52px !important; margin: 0 0 14px; font: 600 38px/1.05 var(--serif); }
.card__text { margin: 0; color: var(--graphite); max-width: 470px; font-size: 18px; }

/* контакты */
.contacts { padding-bottom: 80px; overflow: hidden; }
.contacts__box { display: grid; grid-template-columns: .8fr 1.45fr; gap: 40px 72px; align-items: center; }
.contacts__art { grid-column: 1 / -1; position: relative; width: 100%; aspect-ratio: 1400 / 158; margin-top: 30px; }
.contacts__art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.contacts__dry { filter: grayscale(1) contrast(1.1); }
.contacts__live { -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat; mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat; }
.contacts__lead {
  margin: 10px 0 0; padding: 6px 0 6px 24px; border-left: 3px solid var(--leaf); max-width: 480px;
  font: 700 21px/1.4 var(--sans); color: var(--ink);
}
.contacts__lead em { display: block; margin-top: 8px; font: 500 italic 32px/1.2 var(--serif); color: var(--forest); }
.contacts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contacts__list a {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 58px 24px 26px; border-radius: 24px;
  text-decoration: none; background: rgba(255, 255, 255, .5); border: 1px solid rgba(157, 179, 156, .4);
  font: 600 17px/1.3 var(--sans); overflow-wrap: anywhere; transition: background .7s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease);
}
.contacts__list a:hover { background: var(--mist); transform: translateY(-3px); box-shadow: 0 20px 34px -26px rgba(31, 94, 58, .5); }
.contacts__list small { font: 500 14px/1 var(--sans); color: var(--forest); }
.arrow { position: absolute; right: 24px; top: 50%; width: 20px; height: 20px; margin-top: -10px; }
.arrow::before, .arrow::after { content: ""; position: absolute; transition: all .9s var(--ease); }
.arrow::before { /* контур листа наливается цветом при наведении */
  inset: 3px; border: 1.6px solid #7F958A; border-radius: 0 100% 0 100%; transform: rotate(-12deg);
}
.arrow::after { display: none; }
.contacts__list a:hover .arrow::before { background: var(--leaf); border-color: var(--leaf); transform: rotate(-12deg) scale(1.1); }

/* подвал — финал: знак распускается при входе */
.foot { position: relative; z-index: 2; padding: 0 var(--gutter) 56px; }
.foot__in { max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line); padding-top: 80px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.foot__mark .tree { width: 170px; height: 170px; }
.foot__name { margin: 18px 0 10px; }
.foot__name .brand__name { font-size: 26px; }
.foot__say { margin: 0 0 28px; font: 500 italic 26px/1.2 var(--serif); color: var(--graphite); }
.foot__small { margin: 28px 0 0; color: var(--graphite); font-size: 14px; }
.foot__links { margin: 0 0 28px; }
.foot__links a { font: 500 16px/1 var(--sans); color: var(--ink); text-decoration: none; padding-bottom: 5px;
  background: linear-gradient(var(--leaf), var(--leaf)) 0 100% / 100% 1px no-repeat; transition: color .5s var(--ease); }
.foot__links a:hover { color: var(--forest); }

/* ---------- Движение ---------- */
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes sway { 0%, 100% { transform: translateX(-50%) rotate(0); } 30% { transform: translateX(-50%) rotate(2deg); } 70% { transform: translateX(-50%) rotate(-1.6deg); } }
@keyframes wet-sweep { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes grow-leaf { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rise-line { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ink-to-leaf { from { color: #7C857F; } to { color: var(--forest); } }

/* вступление — только после obnoviLook.ready (класс .go на <html>) */
.anim:not(.go) .rise, .anim:not(.go) .hero__art, .anim:not(.go) .bar .tree .lf { animation-play-state: paused; }
.anim .hero__light { animation: breathe 9s ease-in-out infinite; }
.anim .hero__art-dry { animation: fade 1.4s var(--ease) both; }
.anim .hero__art-live {
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 250% 100% no-repeat;
  mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 250% 100% no-repeat;
}
.anim.go .hero__art-live { animation: wet-sweep 3.2s cubic-bezier(.45, .05, .3, 1) .5s both; }
.anim .rise { opacity: 0; }
.anim.go .rise { animation: rise 1.2s var(--ease) var(--d, 0s) both; }
.anim.go .hero__title .rise { animation: rise-line 1.3s var(--ease) var(--d) both; }
.anim .hero__title em.rise { color: #7C857F; }
.anim.go .hero__title em.rise { animation: rise-line 1.3s var(--ease) var(--d) both, ink-to-leaf 1.6s var(--ease) 2.6s both; }
.anim .hero__title .rise { opacity: 1; transform: translateY(105%); }
.anim .bar .tree .lf { transform: scale(0); }
.anim.go .bar .tree .lf { animation: grow-leaf .9s var(--ease) calc(.9s + var(--i) * 28ms) both; }

.anim .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.3s var(--ease) var(--rd, 0s), transform 1.3s var(--ease) var(--rd, 0s); }
.anim .reveal.is-in { opacity: 1; transform: none; }
.anim .step__leaf { transform: rotate(-45deg) scale(0); }
.anim .step.is-in .step__leaf { transform: rotate(-45deg) scale(1); }
.anim .step__num { opacity: 0; transform: translateY(10px); }
.anim .step.is-in .step__num { opacity: 1; transform: none; }
.anim .steps { --grow: 0; }
.anim .steps::before, .anim .stem span { transition: transform .4s linear; }
.anim .stem { --grow: 0; }
.anim .linkb__live { -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 250% 100% no-repeat; mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 250% 100% no-repeat; }
.anim .linkb__art.is-in .linkb__live { animation: wet-sweep 3s cubic-bezier(.45, .05, .3, 1) .5s both; }
.anim .card__now { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.anim .contacts__live { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.anim .contacts__art.is-in .contacts__live { animation: wet-sweep 2.6s cubic-bezier(.45, .05, .3, 1) .6s both; }
.anim .card.is-in .card__now { animation: wet-sweep 2.4s cubic-bezier(.45, .05, .3, 1) calc(.4s + var(--rd, 0s)) both; }
.anim .foot .tree .lf { transform: scale(0); transition: transform 1s var(--ease) calc(.3s + var(--i) * 35ms); }
.anim .foot.is-in .tree .lf { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1180px) {
  .bar__nav { gap: 22px; }
  .bar__nav a[href="#how"], .bar__nav a[href="#approaches"] { display: none; }
}
/* на телефоне от меню разделов остаётся только Блог: разделы этой страницы листаются, а блог — отдельный адрес */
@media (max-width: 760px) {
  .bar__nav a:not(.bar__blog) { display: none; }
  /* зона нажатия ~40px при шапке 64px: поля внутри ссылки, отрицательные поля возвращают раскладку */
  .bar__nav .bar__blog { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; margin: 0 -4px; color: var(--ink); font-weight: 600;
    background-position: 4px calc(50% + 11px); }
  .bar__nav .bar__blog:hover { background-size: calc(100% - 8px) 1px; }
}
/* узкий телефон: «Блог» добавил в шапку ~46px — знак и мини-переключатель чуть сжимаются, чтобы всё влезло с 360px */
@media (max-width: 420px) {
  .brand { gap: 8px; }
  .brand .brand__name { font-size: 17px; }
  .bar__nav a { font-size: 14px; }
  .mini { gap: 4px; padding: 3px; }
  .mini .mini__b { width: 20px; height: 20px; }
}
@media (max-width: 960px) {
  .linkb__grid, .how__grid, .contacts__box { grid-template-columns: 1fr; gap: 36px; }
  .how__intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 48px; }
  .steps { grid-template-columns: 1fr; gap: 0; padding-left: 118px; }
  .steps::before { left: 88px; right: auto; top: 14px; bottom: 20px; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--grow, 1)); }
  .step { padding: 0 0 48px; }
  .step:last-child { padding-bottom: 0; }
  .step__num { left: -128px; top: -16px; width: 64px; text-align: right; font-size: 68px; }
  .step__leaf { left: -38px; top: 11px; }
  .facts { grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
  .cards { grid-template-columns: 1fr; gap: 0; }
  .cards__fork { height: 120px; }
  .cards__fork::before { top: 0; bottom: 0; }
  .cards__fork span { top: 50%; }
  .terms { grid-template-columns: 1fr; margin-top: 48px; gap: 24px; }
  .terms__help, .terms__pay { grid-column: 1; }
}
@media (max-width: 760px) {
  :root { --bar-h: 64px; }
  body { font-size: 16px; }
  .bar__in { gap: 12px; }
  .bar.is-scrolled .bar__in { height: 58px; }
  .tree { width: 36px; height: 36px; }
  .brand__name { font-size: 19px; }
  .bar__tel { display: none; }
  .bar__call { display: grid; }
  .num { display: none; }
  .contacts__art { margin-top: 18px; aspect-ratio: auto; height: 104px; }
  .contacts__art img { object-fit: cover; object-position: 100% 50%; }
  .contacts__art { -webkit-mask: linear-gradient(to right, transparent, #000 22%); mask: linear-gradient(to right, transparent, #000 22%); }
  .mini__b { width: 22px; height: 22px; }
  .hero { min-height: auto; align-items: flex-start; padding-top: calc(var(--bar-h) + 200px); padding-bottom: 32px; }
  .hero__art { top: calc(var(--bar-h) - 6px); margin-top: 0; width: 88vw; right: -8vw; height: auto; }
  .eyebrow { font-size: 14px; }
  .hero__title { font-size: 39px; margin: 18px 0 16px; line-height: 1.04; }
  .hero__title .line { display: inline; }
  .hero__title .line > * { display: inline; }
  .anim .hero__title .rise { transform: none; opacity: 0; }
  .anim.go .hero__title .rise { animation-name: rise; }
  .anim.go .hero__title em.rise { animation: rise 1.2s var(--ease) var(--d) both, ink-to-leaf 1.6s var(--ease) 2.6s both; }
  .hero__lead { font-size: 16px; margin-bottom: 18px; }
  .looks { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
  .look { min-height: 84px; padding: 11px 10px 12px; gap: 12px; border-radius: 16px; }
  .look--solid { border-radius: 4px; }
  .look--bold { border-radius: 20px 20px 20px 5px; }
  .look__sw i { width: 10px; height: 10px; }
  .look--solid .look__sw i { width: 9px; height: 9px; }
  .look--solid .look__name { font-size: 13px; letter-spacing: 0; }
  .look--calm .look__name { font-size: 19px; }
  .look--bold .look__name { font-size: 12px; }
  .look[aria-current="true"]::after { right: 10px; top: 10px; width: 7px; height: 7px; }
  .hero__link { font-size: 15px; }
  .sec { padding: 88px var(--gutter); }
  .h2 { font-size: 40px; }
  .linkb__lead { font-size: 17px; }
  .fact { padding: 22px 22px 24px; border-radius: 22px; }
  .fact dt { font-size: 25px; }
  .steps { padding-left: 76px; }
  .steps::before { left: 54px; }
  .step__num { left: -82px; width: 36px; font-size: 48px; top: -8px; }
  .step__leaf { left: -30px; top: 9px; }
  .step h3 { font-size: 27px; }
  .how__note { font-size: 23px; align-items: flex-start; }
  .how__note .dot { margin-top: 8px; }
  .card__art { height: 250px; }
  .card__title { font-size: 38px !important; }
  .terms__help { font-size: 23px; align-items: flex-start; }
  .terms__help .dot { margin-top: 9px; }
  .terms__pay { padding: 22px 22px; align-items: flex-start; font-size: 16px; }
  .terms__pay b { font-size: 25px; }
  .terms__mark { width: 24px; height: 24px; margin-top: 4px; }
  .contacts__lead em { font-size: 26px; }
  .contacts__lead { font-size: 18px; }
  .contacts__list { grid-template-columns: 1fr; }
  .foot__mark .tree { width: 130px; height: 130px; }
  .foot__in { padding-top: 60px; }
}