@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-400-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-500-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-500-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-600-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-600-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-700-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-700-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/golos-text-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Literata';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-400-italic-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Literata';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-400-italic-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Literata';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-400-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Literata';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-400-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-400-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-600-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-600-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-700-cyrillic-ext.woff2") format("woff2");
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-700-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("https://vykormysh.ru/assets/fonts/literata-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --ink:#123C2E;          /* тёмно-синий, тот же что на страницах видов */
  --ink-deep:#0C2A1F;
  --paper:#FBF8F1;
  --paper-warm:#FFFFFF;
  --line:#DDD5C2;
  --line-dark:rgba(255,255,255,.14);
  --muted:#544636;
  --muted-dark:rgba(232,225,209,.72);
  --accent:#14655C;       /* акцент на светлом */
  --accent-light:#ABE6C9; /* акцент на тёмном */
  --shadow:0 1px 2px rgba(18,60,46,.05), 0 18px 40px -22px rgba(18,60,46,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Golos Text',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
.wrap--wide{max-width:1340px}

/* ── ритм секций: соседние никогда не одного тона ── */
.band{padding-block:clamp(64px,8vw,116px)}
.band--light{background:var(--paper);color:var(--ink)}
.band--white{background:var(--paper-warm);color:var(--ink)}
.band--dark{background:var(--ink);color:#F1EBDD}
.band--dark .lead,.band--dark .note{color:var(--muted-dark)}
.band--dark .kicker{color:var(--accent-light)}

/* ── типографика ── */
.kicker{
  display:block;font-size:.76rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:18px;
}
h1,h2,h3,h4{font-family:'Literata',Georgia,serif;margin:0;text-wrap:balance;font-weight:600}
h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.015em}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.25}
.lead{font-size:clamp(1.05rem,1.35vw,1.22rem);color:var(--muted);max-width:74ch;margin:22px auto 0}
.note{font-size:.88rem;color:var(--muted);line-height:1.55}

/* заголовки секций по центру: текст занимает ширину полосы, пустого поля справа не остаётся */
.head{max-width:none;margin-inline:auto;text-align:center}
.head h2{max-width:22ch;margin-inline:auto}
.head--wide h2{max-width:none}
.head--left{text-align:left;margin-inline:0}
.head--left .lead{margin-inline:0}
.head--left h2{margin-inline:0}

/* ── первый экран: фотография во всю ширину ── */
.hero{
  position:relative;min-height:min(92svh,860px);display:flex;align-items:flex-end;
  background:var(--ink-deep);overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,42,31,.72) 0%,rgba(12,42,31,.34) 32%,rgba(12,42,31,.86) 100%);
}
.hero__body{position:relative;width:100%;padding-block:clamp(48px,7vw,96px);color:#fff}
.hero h1{color:#fff;max-width:18ch}
.hero .lead{color:rgba(255,255,255,.88);max-width:62ch;margin-inline:0}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:999px;border:1px solid transparent;
  font-family:'Golos Text',sans-serif;font-size:1rem;font-weight:600;
  text-decoration:none;cursor:pointer;transition:transform .2s ease,background .2s ease;
}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{transform:translateY(-2px);background:#115A52}
.btn--ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}
.btn--ghost:hover{background:rgba(255,255,255,.18)}
.btn--dark{background:var(--accent-light);color:var(--ink)}
.btn--dark:hover{transform:translateY(-2px)}

/* цифры в первом экране */
.hero__facts{display:flex;flex-wrap:wrap;gap:40px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.2)}
.fact__num{font-family:'Literata',serif;font-size:clamp(1.6rem,2.6vw,2.2rem);color:#fff;line-height:1}
.fact__label{font-size:.84rem;color:rgba(255,255,255,.74);margin-top:6px}

/* ── карточки видов: фотография заполняет карточку ── */
/* виды: карточки в одну строку каруселью, фотография работает фоном карточки */
.species{
  display:flex;gap:22px;margin-top:52px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:18px;scroll-padding-left:24px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.species::-webkit-scrollbar{height:8px}
.species::-webkit-scrollbar-track{background:transparent}
.species::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.species__card{
  position:relative;flex:1 1 300px;min-width:300px;scroll-snap-align:start;
  display:block;text-decoration:none;color:#fff;
  border-radius:20px;overflow:hidden;min-height:470px;isolation:isolate;
  box-shadow:var(--shadow);
}
.species__card img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.species__card:hover img{transform:scale(1.04)}
.species__card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,42,31,.12) 12%,rgba(12,42,31,.62) 42%,rgba(12,42,31,.92) 66%,rgba(12,42,31,.97) 100%);
}
.species__body{position:relative;z-index:1;padding:26px;display:flex;flex-direction:column;height:100%;justify-content:flex-end}
.species__body h3{color:#fff;font-size:1.55rem}
.species__body p{margin:9px 0 0;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.86)}
.species__foot{display:flex;flex-direction:column;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.26)}
/* цена одной строкой: подпись и сумма рядом, не столбиком */
.species__price{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;white-space:nowrap}
.species__price span{font-size:.78rem;color:rgba(255,255,255,.72)}
.species__price strong{font-family:'Literata',serif;font-size:1.2rem}
.species__go{font-size:.86rem;font-weight:600;color:var(--accent-light);white-space:nowrap}
.species__hint{margin-top:14px;font-size:.84rem;color:var(--muted);text-align:center;display:none}

/* ── кадр-разделитель во всю ширину ── */
.strip{position:relative;height:clamp(300px,42vw,520px);overflow:hidden;background:var(--ink-deep)}
.strip img{width:100%;height:100%;object-fit:cover}
.strip__cap{
  position:absolute;left:0;right:0;bottom:0;padding:32px 0;
  background:linear-gradient(180deg,rgba(12,42,31,0),rgba(12,42,31,.8));
  color:#fff;font-family:'Literata',serif;font-size:clamp(1.1rem,2vw,1.6rem);
}

/* ── дорожка процесса ── */
.road{margin-top:56px;position:relative}
.road::before{content:'';position:absolute;left:0;right:0;top:34px;height:1px;background:var(--line-dark)}
.road__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.step__num{
  width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--ink);border:1px solid var(--accent-light);
  font-family:'Literata',serif;font-size:1.4rem;color:var(--accent-light);
}
.step h3{margin-top:22px;font-size:1.12rem;color:#fff}
.step p{margin:10px 0 0;font-size:.92rem;color:var(--muted-dark)}

/* ── сравнение ── */
.compare{margin-top:48px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper-warm)}
.compare__row{display:grid;grid-template-columns:1.1fr 1.3fr 1.3fr;gap:0;border-bottom:1px solid var(--line)}
.compare__row:last-child{border-bottom:0}
.compare__row--head{background:var(--paper);font-weight:600}
.compare__cell{padding:20px 22px;font-size:.94rem}
.compare__cell--own{color:var(--muted)}
.compare__cell--ours{background:rgba(40,138,89,.05);border-left:3px solid var(--accent)}

/* ── простые карточки ── */
.cards{display:grid;gap:24px;margin-top:48px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{padding:30px;border-radius:18px;background:var(--paper-warm);border:1px solid var(--line)}
.band--dark .card{background:rgba(255,255,255,.055);border-color:var(--line-dark)}
.band--dark .card p{color:var(--muted-dark)}
.card h3{margin-bottom:12px}
.card p{margin:0;font-size:.95rem;color:var(--muted)}
.card__price{font-family:'Literata',serif;font-size:2rem;margin:4px 0 14px}

/* ── вопросы ── */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.band--dark .faq{border-color:var(--line-dark)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.band--dark .faq details{border-color:var(--line-dark)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:'Literata',serif;font-size:1.12rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:8px;top:20px;font-size:1.5rem;color:var(--accent)}
.band--dark .faq summary::after{color:var(--accent-light)}
.faq details[open] summary::after{content:'–'}
.faq p{margin:0 0 22px;font-size:.98rem;color:var(--muted);max-width:76ch}
.band--dark .faq p{color:var(--muted-dark)}

/* ── подвал ── */
.foot{background:var(--ink-deep);color:rgba(232,225,209,.8);padding-block:56px;font-size:.9rem}
.foot a{color:var(--accent-light);text-decoration:none}
.foot__row{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center}

/* ── появление при прокрутке ── */
/* контент виден всегда; скрытие включает только скрипт, иначе без JS страница пустая */
.js-anim .rise{opacity:0;transform:translateY(20px);transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.js-anim .rise.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .rise{opacity:1;transform:none;transition:none}
  .species__card{transition:none}
  html{scroll-behavior:auto}
}

/* ── телефон ── */
@media (max-width:1340px){
  .species__hint{display:block}
}

@media (max-width:900px){
  .species{scroll-padding-left:16px;gap:16px}
  .species__card{flex:0 0 282px;min-width:282px;min-height:430px}
  .road__grid{grid-template-columns:1fr;gap:34px}
  .road::before{left:33px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .step{display:grid;grid-template-columns:68px 1fr;gap:18px;align-items:start}
  .step h3{margin-top:0}
  .step__text{grid-column:2}
  .cards--3,.cards--2{grid-template-columns:1fr}
  .compare__row{grid-template-columns:1fr}
  .compare__cell--ours{border-left:0;border-top:3px solid var(--accent)}
  .hero__facts{gap:26px}
}
@media (max-width:420px){
  .wrap{padding-inline:16px}
  body{font-size:16px}
}

html{scroll-padding-top:20px}.species__card{flex:0 0 300px;height:500px}.species__body{justify-content:flex-end}.species__hint{display:block}.band{padding-block:clamp(42px,6vw,86px)}.tech-image{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;margin-bottom:22px}.marquee{background:#123C2E;color:#DEF5EA;overflow:hidden}.marquee-track{display:flex;width:max-content;gap:35px;padding:13px 0;animation:travel 36s linear infinite;font-size:12px;letter-spacing:.1em;text-transform:uppercase}.marquee-track b{color:#ffe1a1}.marquee:hover .marquee-track{animation-play-state:paused}@keyframes travel{to{transform:translateX(-50%)}}a:focus-visible,summary:focus-visible{outline:3px solid #ABE6C9;outline-offset:5px}.compare-link{position:fixed;bottom:15px;right:15px;z-index:20;background:white;color:#123C2E;border:1px solid #CFC6B0;border-radius:22px;padding:9px 15px;font-size:12px;text-decoration:none;box-shadow:0 3px 15px #123C2E20}@media(max-width:900px){.species__card{flex-basis:calc(100vw - 48px);min-width:0;height:500px}.species__body{padding:23px}.species{gap:14px}.species__card img{object-position:center 22%}}@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.species__card img{transition:none}}

.strip{height:clamp(340px,52vw,650px);isolation:isolate;background:#123C2E}
.strip::before{content:"";position:absolute;inset:-25px;background:url('https://vykormysh.ru/assets/birds/zhako-flight.webp') center/cover no-repeat;filter:blur(22px);opacity:.5;z-index:-1}
.strip img{object-fit:contain;object-position:center;position:relative}
.strip::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#FBF8F1 0%,rgba(247,253,250,0) 18%,rgba(18,60,46,0) 68%,#123C2E 100%)}
.strip__cap{z-index:2;background:none;padding-bottom:22px}
#kak-pomogaem{position:relative;background:linear-gradient(to bottom,#123C2E,#123C2E 85%,#1F4F3A);padding-top:42px;padding-bottom:90px}
#kak-pomogaem + .band{position:relative}
#kak-pomogaem + .band::before{content:"";position:absolute;left:0;right:0;top:-1px;height:65px;background:linear-gradient(#1F4F3A,transparent);pointer-events:none}
@media(max-width:600px){.strip{height:auto;min-height:0;padding-top:30px;padding-bottom:72px}.strip img{display:block;height:auto;aspect-ratio:4/3}.strip__cap{font-size:1rem;padding:0 0 17px}.strip__cap .wrap{max-width:32ch;text-align:center}#kak-pomogaem{padding-top:28px;padding-bottom:65px}}

.family-section .head{max-width:920px;margin:0 auto 30px;text-align:center}.family-section h2{max-width:850px;margin-inline:auto}.family-section .lead{max-width:850px}.family-photo{margin:0 auto;max-width:1000px}.family-photo img{width:100%;height:auto;display:block;border-radius:20px}.family-photo figcaption{text-align:center;max-width:760px;margin:15px auto 0;line-height:1.6}@media(max-width:600px){.family-section .head{margin-bottom:22px}.family-photo img{border-radius:12px}.family-photo figcaption{font-size:12px;margin-top:12px}}

#zayavka{padding:55px 0;background:#FBF8F1}.request{padding:37px;background:#123C2E;border-radius:20px;color:white;display:grid;grid-template-columns:1fr 1fr;gap:45px}.request .eyebrow{display:block;color:#f3d58a;font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;margin-bottom:16px}.request h2{font-size:39px;line-height:1.15}.request p{color:#CCC3AD;margin-top:16px;font-size:15px}.request .btn{background:white;color:#123C2E;border:1px solid white;width:100%;margin-top:15px;min-height:49px;padding:12px 22px;border-radius:10px;font:700 14px 'Golos Text',sans-serif;cursor:pointer}.request label{display:block;color:#DBD3C0;font-size:13px;margin-top:12px}.request input,.request select{width:100%;padding:12px;border-radius:8px;border:1px solid #5E5141;background:white;color:#123C2E;margin-top:5px;font:inherit;box-sizing:border-box}.request .form-note{font-size:12px;color:#BFB49C;margin-top:10px}.request .status{font-size:14px;color:#f3d58a;padding-top:12px}@media(max-width:700px){#zayavka{padding:32px 0}.request{grid-template-columns:1fr;gap:20px;padding:24px}.request h2{font-size:30px}}
/* Цвет заголовков: общий файл сайта красит их тёмно-синим, и на тёмных полосах
   они сливались с фоном. Задаём явно для каждой полосы. */
.band--dark h1,
.band--dark h2,
.band--dark h3,
.band--dark h4,
.band--dark .eyebrow + h2,
section.band--dark h2{color:#ffffff}
.band--dark p,
.band--dark li{color:rgba(232,225,209,.82)}
.band--dark .lead{color:rgba(232,225,209,.8)}
.band--dark .kicker,
.band--dark .eyebrow{color:#ABE6C9}

.band--light h1,.band--light h2,.band--light h3,.band--light h4,
.band--white h1,.band--white h2,.band--white h3,.band--white h4{color:#123C2E}

.hero h1,.hero h2,.hero p{color:#ffffff}
.request h2,.request h3{color:#ffffff}

/* Карточка вида всегда тёмная, поэтому её текст белый независимо от полосы,
   иначе правило «в светлой полосе заголовки тёмные» делает название невидимым. */
.band .species__card h3,
.band--light .species__card h3,
.band--white .species__card h3,
.species__card h3{color:#ffffff}
.band .species__card p,
.band--light .species__card p,
.species__card p{color:rgba(255,255,255,.88)}
.species__card .species__price span{color:rgba(255,255,255,.74)}
.species__card .species__price strong{color:#ffffff}


/* Заголовки занимают всю ширину полосы и не разбиваются на лишние строки.
   Ограничение ширины и text-wrap:balance давали три строки там, где хватает двух. */
.head h2,
.band h2,
.head--wide h2,
.family-section h2{max-width:none;text-wrap:pretty}
.head .lead,
.band .lead{max-width:none}
.head{max-width:none}

/* Меньше пустоты: полосы и отступы между блоками плотнее */
.band{padding-block:clamp(44px,5vw,72px)}
.head{margin-bottom:0}
.species{margin-top:34px}
.cards{margin-top:32px}
.compare{margin-top:30px}
.faq{margin-top:28px}
.road{margin-top:36px}
.lead{margin-top:14px}
.kicker{margin-bottom:12px}


/* Кегль подобран так, чтобы длинные заголовки заполняли строку целиком,
   а не оставляли короткий хвост второй строки. */
.band h2,.head h2{font-size:clamp(1.8rem,3.2vw,2.75rem);line-height:1.12}
.family-section h2{max-width:none}
.family-section .head,.family-section .lead,.family-photo{max-width:none}


/* ПЕРВЫЙ ЭКРАН: кадр читается, текст по центру и во всю ширину */
.hero{position:relative;min-height:min(86svh,760px);display:flex;align-items:center;background:#0C2A1F;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
/* затемнение держим мягким: фотография должна оставаться фотографией */
.hero__veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,42,31,.55) 0%,rgba(12,42,31,.28) 38%,rgba(12,42,31,.72) 82%,rgba(12,42,31,.88) 100%)}
.hero__body{position:relative;width:100%;padding-block:clamp(40px,6vw,74px);color:#fff;text-align:center}
.hero__kicker{display:block;font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#D1F2E2;margin-bottom:16px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hero h1{color:#fff;max-width:none;margin:0 auto;font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.04;text-shadow:0 2px 26px rgba(0,0,0,.55)}
.hero__lead{max-width:76ch;margin:18px auto 0;font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.6;color:rgba(255,255,255,.93);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;justify-content:center}
.hero__facts{display:flex;flex-wrap:wrap;gap:46px;justify-content:center;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.26)}
.hero .fact__num{font-family:'Literata',Georgia,serif;font-size:clamp(1.45rem,2.3vw,2rem);color:#fff;line-height:1;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero .fact__label{font-size:.85rem;color:rgba(255,255,255,.82);margin-top:6px}
@media (max-width:700px){
  .hero{min-height:auto;padding-block:26px}
  .hero__facts{gap:24px;margin-top:24px}
  .hero__cta .btn{flex:1 1 100%}
}


/* Телефон: первый экран ниже, чтобы кадр не растягивался в полоску,
   и текст занимал экран без лишнего воздуха */
@media (max-width:760px){
  .hero{min-height:auto}
  .hero__media picture{display:block;width:100%;height:100%}
  .hero__media img{object-position:center 30%}
  .hero__body{padding-block:24px 28px}
  .hero h1{font-size:clamp(1.9rem,8vw,2.5rem);line-height:1.08}
  .hero__lead{font-size:.97rem;line-height:1.5;margin-top:14px}
  .hero__cta{margin-top:20px;gap:10px}
  .hero__facts{gap:18px 26px;margin-top:22px;padding-top:18px}
  .hero .fact{flex:1 1 44%}
  .hero .fact__num{font-size:1.25rem}
  .hero .fact__label{font-size:.78rem}
  .hero__kicker{font-size:.7rem;letter-spacing:.14em;margin-bottom:10px}
}


/* Десктоп: текст в левой половине, птица в правой — обе половины заняты,
   и фотографию не перекрывает текст. */
@media (min-width:761px){
  .hero__body{text-align:left}
  .hero__body .wrap{display:block}
  .hero__kicker,.hero h1,.hero__lead{margin-left:0;margin-right:0}
  .hero h1{max-width:13ch}
  .hero__lead{max-width:52ch;margin-left:0}
  .hero__cta{justify-content:flex-start}
  .hero__facts{justify-content:flex-start;gap:34px;max-width:none;flex-wrap:nowrap}
  /* кадр сдвинут вправо, затемнение гуще слева под текстом и прозрачнее справа */
  .hero__media img{object-position:72% center}
  .hero__veil{background:
    linear-gradient(90deg,rgba(12,42,31,.92) 0%,rgba(12,42,31,.82) 34%,rgba(12,42,31,.42) 60%,rgba(12,42,31,.18) 100%),
    linear-gradient(180deg,rgba(12,42,31,.35) 0%,rgba(12,42,31,0) 30%,rgba(12,42,31,.45) 100%)}
}


/* Телефон: птиц видно сверху, текст лежит снизу на градиенте */
@media (max-width:760px){
  .hero{min-height:88svh;display:flex;align-items:flex-end}
  .hero__media img{object-position:center 22%}
  .hero__veil{background:linear-gradient(180deg,rgba(12,42,31,.34) 0%,rgba(12,42,31,.10) 26%,rgba(12,42,31,.72) 58%,rgba(12,42,31,.95) 100%)}
  .hero__body{padding-block:0 26px}
  .hero__lead{font-size:.93rem;max-width:40ch;margin-inline:auto}
  .hero__facts{flex-wrap:wrap;gap:14px 20px;justify-content:center}
  .hero .fact{flex:0 0 calc(50% - 10px);text-align:center}
  .hero .fact:last-child{flex:0 0 100%}
  .hero .fact__label{font-size:.74rem;line-height:1.3}
}


/* Телефон: подпись к кадру не накладывается на фотографию, а стоит под ней.
   Три строки в кадр не помещались и текст разрывался пополам. */
@media (max-width:760px){
  .strip{height:auto;padding-top:0;padding-bottom:0;display:block}
  .strip img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;position:static}
  .strip::after{display:none}
  .strip__cap{
    position:static;background:#123C2E;padding:20px 0 26px;
    font-size:1.02rem;line-height:1.45;text-align:center;
  }
  .strip__cap .wrap{max-width:34ch;margin-inline:auto}
}


/* Телефон: таблица сравнения разваливалась в столбик без подписей — непонятно,
   где признак, а где к чему относится значение. Каждая строка становится карточкой. */
@media (max-width:760px){
  .compare{border:0;background:none!important;margin-top:24px}
  .compare__row--head{display:none}
  .compare__row{
    display:block;border:1px solid rgba(255,255,255,.16);border-radius:14px;
    background:rgba(255,255,255,.05);padding:4px 0;margin-bottom:14px;
  }
  .compare__row:last-child{margin-bottom:0}
  .compare__cell{padding:14px 18px;border:0!important;background:none!important}
  /* признак — заголовок карточки */
  .compare__cell:first-child{
    padding-bottom:6px;font-size:1.02rem;
    border-bottom:1px solid rgba(255,255,255,.14)!important;margin-bottom:8px;
  }
  .compare__cell:first-child strong{color:#fff}
  /* значения получают подпись, иначе непонятно, чьё это */
  .compare__cell[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:5px;
    font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  }
  .compare__cell--own[data-label]::before{color:rgba(232,225,209,.55)}
  .compare__cell--ours[data-label]::before{color:#ABE6C9}
  .compare__cell--ours{
    background:rgba(171,230,201,.12)!important;border-radius:10px;margin:0 10px 8px;
  }
}

@media (max-width:760px){
  /* шапка таблицы на телефоне не нужна: подписи переехали в сами карточки */
  .compare .compare__row.compare__row--head,
  .band .compare .compare__row--head{display:none!important}
}


/* Кнопка в карточке направления: блок рекламирует будущие продукты,
   поэтому у каждого свой призыв и своя заявка. */
.tech-cta{
  display:inline-flex;align-items:center;gap:4px;margin-top:18px;
  padding:12px 22px;border-radius:999px;border:1px solid rgba(171,230,201,.55);
  background:rgba(171,230,201,.14);color:#D1F2E2;
  font:600 .92rem 'Golos Text',system-ui,sans-serif;cursor:pointer;
  transition:background .2s ease,transform .2s ease,color .2s ease;
}
.tech-cta:hover{background:#ABE6C9;color:#123C2E;transform:translateY(-2px)}
.tech-cta:focus-visible{outline:3px solid #ABE6C9;outline-offset:3px}
.band--dark .card{display:flex;flex-direction:column}
.band--dark .card p{flex:1}
@media (max-width:760px){
  .tech-cta{width:100%;justify-content:center;margin-top:16px;padding:14px 18px}
}


/* Переход по якорю показывал заголовок под закреплённой шапкой */
:target{scroll-margin-top:96px}
section[id],.anchor-target{scroll-margin-top:96px}
.anchor-target{display:block;height:0;overflow:hidden}
@media (max-width:760px){
  :target,section[id],.anchor-target{scroll-margin-top:128px}
}


/* Все шесть видов в одну строку: секция занимает почти всю ширину экрана,
   карточки делят её поровну, пустых полей по краям не остаётся. */
@media (min-width:1101px){
  .wrap--wide{max-width:min(1860px,96vw)}
  .species{display:flex;gap:16px;overflow:visible}
  .species__card{flex:1 1 0;min-width:0;min-height:430px}
  .species__body{padding:20px 18px}
  .species__body h3{font-size:1.3rem}
  .species__body p{font-size:.86rem;line-height:1.45}
  .species__foot{margin-top:14px;padding-top:13px;gap:8px}
  .species__price span{font-size:.7rem}
  .species__price strong{font-size:1.02rem}
  .species__go{font-size:.8rem}
  .species__hint{display:none}
}
/* на средних экранах карточки чуть у́же, но все шесть всё ещё помещаются */
@media (min-width:1101px) and (max-width:1500px){
  .species{gap:12px}
  .species__card{min-height:400px}
  .species__body{padding:17px 15px}
  .species__body h3{font-size:1.16rem}
  .species__body p{font-size:.8rem}
  .species__price strong{font-size:.95rem}
}


/* Зелёная тема брендбука: общий фон и мелочи, не покрытые заменой */
html,body{background:#F1EBDD}
::selection{background:#ABE6C9;color:#123C2E}
:focus-visible{outline-color:#246B48}


/* ═══ Правка 05.10.2026 по замечаниям Насти ═════════════════════════════
   1. Шапка была белой капсулой с бежевыми кнопками: цвета шапки живут
      отдельно от палитры полос, поэтому замена цветов её не затронула.
      Делаем стеклянную капсулу в цвете леса — она ложится и на фотографию
      первого экрана, и на светлые полосы ниже.
   2. Текст первого экрана уходит влево, в тёмную часть кадра: там он
      читается без лишней подложки, а птица остаётся открытой справа. */

/* ── Шапка ─────────────────────────────────────────────────────────── */
/* Полосу несёт обёртка: у капсулы фон снят через !important при переделке 01.09 */
.capsule-header-holder{
  background:linear-gradient(180deg,rgba(12,42,31,.94) 0%,rgba(14,48,36,.88) 100%) !important;
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 24px rgba(0,0,0,.28);
}

/* Логотип был залит светлым градиентом под белую шапку — на тёмной он тонет */
.capsule-logo-text{
  background-image:linear-gradient(178deg,#FFFFFF 0%,#D1F2E2 26%,#FFFFFF 48%,#ABE6C9 70%,#FFFFFF 100%) !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) !important;
}
.capsule-logo-text span{-webkit-text-fill-color:#ABE6C9 !important;color:#ABE6C9 !important}
.capsule-logo-text{color:#fff}
.capsule-logo-text span{color:#ABE6C9}
.capsule-link{color:rgba(255,255,255,.88)}
.capsule-link:hover{background:rgba(255,255,255,.14);color:#fff}
.capsule-link.seo-highlight{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28);
}
.capsule-link.seo-highlight:hover{background:#ABE6C9;color:#123C2E;border-color:#ABE6C9}
.seo-badge-dot{background:#ABE6C9}
.capsule-phone-chip{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;
}
.capsule-phone-chip:hover{background:#ABE6C9;color:#123C2E;border-color:#ABE6C9}
.capsule-burger{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.capsule-burger svg{stroke:#fff}
.vk-msg{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.vk-msg svg{fill:#fff}
.vk-msg:hover{background:#ABE6C9;color:#123C2E}
.vk-msg:hover svg{fill:#123C2E}

/* ── Первый экран: текст в тёмную левую часть кадра ────────────────── */
@media (min-width:901px){
  .hero .wrap{max-width:none;padding-inline:clamp(28px,4.6vw,78px)}
  .hero__body{text-align:left}
  .hero__kicker{margin-left:0}
  .hero h1{max-width:16ch;margin-left:0;margin-right:0}
  .hero__lead{max-width:50ch;margin-left:0;margin-right:0}
  .hero__cta{justify-content:flex-start}
  .hero__facts{justify-content:flex-start}
  /* затемнение смещено влево под текст, птица справа остаётся открытой */
  .hero__veil{background:
    linear-gradient(90deg,rgba(12,42,31,.94) 0%,rgba(12,42,31,.88) 28%,rgba(12,42,31,.52) 54%,rgba(12,42,31,.12) 100%),
    linear-gradient(180deg,rgba(12,42,31,.36) 0%,rgba(12,42,31,0) 34%,rgba(12,42,31,.5) 100%)}
}

/* Лид не должен заходить на птицу — держим его в затемнённой половине */
@media (min-width:901px){
  .hero__lead{max-width:44ch}
}


/* Размытая копия кадра лежала фоном полосы на всех экранах: на компьютере
   она мешала переходу в зелёное, на телефоне — читаемости маршрута. */
.strip::before{display:none !important}
@media (max-width:900px){
  .strip{background:#123C2E}
  .strip__cap{background:#123C2E}
}




/* ── Полоса «Как ваш попугай найдёт дорогу домой» ───────────────────
   Восемь шагов встали в левую колонку, фотография — в правую и держится
   на месте при прокрутке: иначе против длинного списка справа пустота. */
@media (min-width:901px){
  .strip{
    display:grid;
    grid-template-columns:minmax(0,54%) minmax(0,46%);
    align-items:start;
    height:auto;min-height:0;
    overflow:visible;                 /* иначе липкая фотография не работает */
    background:#123C2E;
    padding-block:clamp(52px,5.4vw,92px);
  }
  .strip::after{display:none}

  .strip__road{grid-column:1;grid-row:1}
  .strip__road .wrap{
    max-width:none;margin:0;
    padding-left:clamp(28px,4.6vw,78px);
    padding-right:clamp(22px,2.4vw,44px);
  }
  .strip__road .head{text-align:left;max-width:none;margin:0}
  .strip__road .head h2{margin:0;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.1}
  .strip__road .lead{margin:12px 0 0;max-width:46ch}

  /* горизонтальная дорожка из четырёх колонок превращается в вертикальную */
  .strip__road .road{margin-top:clamp(26px,2.8vw,40px)}
  .strip__road .road::before{left:34px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .strip__road .road__grid{grid-template-columns:1fr;gap:clamp(22px,2.4vw,34px)}
  .strip__road .road__grid + .road__grid{margin-top:clamp(22px,2.4vw,34px) !important}
  .strip__road .step{display:grid;grid-template-columns:68px 1fr;gap:18px;align-items:start}
  .strip__road .step__text{grid-column:2}
  .strip__road .step h3{margin-top:0;font-size:1.08rem}
  .strip__road .step p{font-size:.9rem}

  .strip img{
    grid-column:2;grid-row:1;
    position:sticky;top:104px;
    justify-self:end;align-self:start;
    width:100% !important;max-width:none !important;height:auto !important;
    aspect-ratio:4/3;object-fit:contain;object-position:right center;
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 12%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.88) 48%,#000 62%),
      linear-gradient(180deg,transparent 0%,#000 11%,#000 89%,transparent 100%);
    mask-image:
      linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 12%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.88) 48%,#000 62%),
      linear-gradient(180deg,transparent 0%,#000 11%,#000 89%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
}

/* Телефон: кадр сверху, под ним те же восемь шагов лентой */
@media (max-width:900px){
  .strip{display:block;height:auto;padding-bottom:clamp(34px,7vw,54px);background:#123C2E}
  .strip__road{padding-top:clamp(26px,5vw,38px)}
  .strip__road .head{text-align:center}
  .strip__road .road__grid + .road__grid{margin-top:34px !important}
}


/* Блок перестал быть тёмной полосой .band--dark, и заголовок получил
   тёмный цвет из общих стилей — на зелёном он пропадал. */
.strip__road .kicker{color:#ABE6C9}
.strip__road h2{color:#fff}
.strip__road .lead{color:rgba(255,255,255,.82)}
.strip__road .step h3{color:#fff}
.strip__road .step p{color:rgba(255,255,255,.74)}


/* ══ Кнопки: стекло в хромированной рамке ══════════════════════════
   Прежние плоские заливки выглядели бедно. Кнопка стала полупрозрачной
   капсулой с размытием, по контуру — металлический кант. Он нарисован
   градиентом на ::after с вырезанной серединой: обычный border одним
   цветом отражения не даёт. */

.btn,.btn-lux,.tech-cta,.cookie-btn{position:relative;isolation:isolate}

.btn::after,.btn-lux::after,.tech-cta::after,.cookie-btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  background:linear-gradient(180deg,#FFFFFF 0%,#9FBCAE 42%,#6E8E7E 52%,#DCEDE4 72%,#FFFFFF 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:1;
}

/* ── на тёмном: прозрачное стекло, под ним видно фотографию ── */
.btn--solid,.band--dark .btn-lux-gold,.tech-cta,.request .btn,.cookie-btn{
  background:linear-gradient(180deg,rgba(171,230,201,.44),rgba(255,255,255,.12));
  backdrop-filter:blur(18px) saturate(1.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
  border:0;color:#fff;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 32px -14px rgba(0,0,0,.72);
}
.btn--ghost{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:0;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--ghost::after{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(159,188,174,.5) 48%,rgba(220,237,228,.75));
}

/* ── на светлом: та же капсула, но стекло тёмное, иначе буквы тонут ── */
.band--white .btn,.band--light .btn,.band--white .btn-lux-gold{
  background:rgba(12,42,31,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:0;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 26px -12px rgba(12,42,31,.5);
}
/* «Отклонить» не должна спорить с «Принять» — она просто стекло */
.cookie-btn-ghost{background:rgba(255,255,255,.08) !important;color:#fff}

/* ── наведение: блик ярче, кнопка приподнимается ── */
.btn:hover,.btn-lux:hover,.tech-cta:hover,.cookie-btn:hover{transform:translateY(-2px)}
.btn--solid:hover,.tech-cta:hover,.request .btn:hover,.cookie-btn:hover{
  background:linear-gradient(180deg,rgba(171,230,201,.46),rgba(255,255,255,.18))}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.band--white .btn:hover,.band--light .btn:hover{background:rgba(12,42,31,.95)}
.btn:hover::after,.btn-lux:hover::after,.tech-cta:hover::after,.cookie-btn:hover::after{
  background:linear-gradient(180deg,#FFFFFF 0%,#C6DCD1 40%,#8CAC9C 52%,#EAF5F0 70%,#FFFFFF 100%);
}
.btn:active,.btn-lux:active,.tech-cta:active,.cookie-btn:active{transform:translateY(0)}

/* кант не должен перекрывать текст кнопки */
.btn > *,.btn-lux > *,.tech-cta > *,.cookie-btn > *{position:relative;z-index:2}

/* Главная кнопка должна отличаться от второй: внутри стекла светлый отлив,
   у второй — только кант. */
.request .btn,.cookie-btn{color:#fff;border:0}

/* Кнопки Telegram и MAX в подвале оставались с тонкой рамкой — тот же стиль */
.btn-lux-outline{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:0 !important;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
}
.btn-lux-outline:hover{background:rgba(255,255,255,.16)}


/* ══ Форма заявки: вытянутая, без пустоты слева ════════════════════
   Поля шли одной колонкой, карточка росла вверх, а слева под коротким
   текстом оставалась дыра. Теперь поля по два в ряд — карточка ниже и
   шире, а левая колонка распределена по высоте. */
@media (min-width:901px){
  .request{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(30px,3vw,52px);
    padding:clamp(30px,2.8vw,42px);
    align-items:stretch;
  }
  .request__intro{
    display:flex;flex-direction:column;justify-content:space-between;
    padding-right:clamp(6px,1vw,18px);
  }
  .request__intro h2{font-size:clamp(1.7rem,2.25vw,2.15rem);line-height:1.12;margin:0}
  .request__intro p{margin-top:16px;font-size:1.02rem;line-height:1.55}
  .request__intro p:last-child{margin-top:auto;padding-top:20px}
  .request__intro p:last-child a{font-size:1.5rem !important;display:inline-block;margin-top:4px}

  #trial-form{
    display:grid;grid-template-columns:1fr 1fr;
    gap:12px clamp(14px,1.4vw,22px);
    align-content:start;
  }
  .field{min-width:0}
  .field label{margin-top:0}
  /* согласия, кнопка и примечания идут во всю ширину формы */
  #trial-form > .form-check-label,
  #trial-form > .btn,
  #trial-form > .form-note,
  #trial-form > .status,
  #trial-form > .hp-field{grid-column:1 / -1}
  #trial-form > .form-check-label{margin-top:6px !important}
  #trial-form > .btn{margin-top:10px}
}

/* поля в ячейке: подпись вплотную к своему полю */
.field label{display:block;margin-bottom:5px}
.field input,.field select{margin-top:0}


/* ══ Страница каталога видов ═══════════════════════════════════════ */
.catalog-head{background:#123C2E;color:#fff;padding:clamp(92px,8vw,118px) 0 clamp(26px,2.6vw,38px)}
.crumbs{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:16px}
.crumbs a{color:#ABE6C9;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.catalog-head .kicker{color:#ABE6C9}
.catalog-head h1{
  margin:0;color:#fff;font-family:'Literata',Georgia,serif;
  font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.08;
}
.catalog-head .lead{margin:16px 0 0;max-width:72ch;color:rgba(255,255,255,.84);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6}

.catalog{background:#123C2E;padding:clamp(28px,3vw,44px) 0 clamp(56px,6vw,92px)}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,1.8vw,28px)}
.vcard{
  display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.vcard__media{display:block;aspect-ratio:4/3;overflow:hidden;background:#0E3024}
.vcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.vcard:hover .vcard__media img{transform:scale(1.04)}
.vcard__body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,1.6vw,24px)}
.vcard__body h2{margin:0;color:#fff;font-family:'Literata',Georgia,serif;font-size:clamp(1.25rem,1.7vw,1.55rem);line-height:1.15}
.vcard__body p{margin:10px 0 0;color:rgba(255,255,255,.76);font-size:.94rem;line-height:1.55}
.vcard__foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-height:52px}
.vcard__price span{display:block;font-size:.76rem;color:rgba(255,255,255,.6)}
.vcard__price strong{color:#fff;font-family:'Literata',Georgia,serif;font-size:1.15rem;white-space:nowrap}
.vcard__soon{font-size:.74rem;color:#ABE6C9;text-align:right;line-height:1.3;max-width:11ch;flex:0 0 auto}
.vcard__cta{margin-top:16px;width:100%;padding:13px 20px;font-size:.94rem}
.catalog__note{margin:clamp(26px,2.6vw,38px) auto 0;max-width:80ch;text-align:center;
  color:rgba(255,255,255,.62);font-size:.88rem;line-height:1.55}

@media (max-width:1100px){ .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){
  .vgrid{grid-template-columns:1fr}
  .catalog-head{padding-top:clamp(112px,20vw,132px)}
  .catalog-head h1{font-size:clamp(1.8rem,7vw,2.3rem)}
}


/* ══ Фирменный знак: серебро, крупнее ══════════════════════════════
   В 44 px рисунок сливался в пятно — буква и голова птицы не читались.
   Знак 64 px, шапка подросла до 88 px. На телефоне шапка в два ряда,
   там прежний размер. */
@media (min-width:901px){
  :root{--vk-head-h:88px}
  .vk-logo{width:72px;height:72px}
  .capsule-brand{gap:14px}
  .capsule-logo-text{font-size:1.62rem}
  .capsule-logo-text span{font-size:1.04rem}
  /* первый экран и якоря считаются от высоты шапки */
  .hero{min-height:min(86svh,780px)}
  :target,section[id],.anchor-target{scroll-margin-top:calc(var(--vk-head-h) + 16px)}
  .strip img{top:calc(var(--vk-head-h) + 16px)}
}


/* Исходник знака оказался с альфа-каналом: круглая обрезка и тень под ней
   больше не нужны, знак лежит прямо на шапке. */
.vk-logo{border-radius:0 !important;box-shadow:none !important}


/* В подвале знак крупнее в 2,5 раза: 44 px -> 110 px. Правило адресное,
   иначе вместе с ним вырос бы и знак в шапке — класс у них общий. */
footer .vk-logo{width:110px;height:110px}
footer .capsule-brand{gap:16px}
@media (max-width:760px){
  footer .vk-logo{width:88px;height:88px}
  footer .capsule-brand{gap:13px}
}


/* Подвал на компьютере: знак ещё крупнее, название под ним.
   Раньше они стояли в строку — название съедало ширину, которую можно
   отдать знаку. */
@media (min-width:901px){
  footer .capsule-brand{
    flex-direction:column;align-items:flex-start;
    gap:16px;margin-bottom:26px !important;
  }
  footer .vk-logo{width:168px;height:168px}
  footer .capsule-logo-text{font-size:2rem;line-height:1}
  footer .capsule-logo-text span{font-size:1.2rem}
}


/* Колонка со знаком начиналась ниже заголовков соседних колонок: у рисунка
   сверху прозрачное поле, оно и съедало выравнивание. Поднимаем всю колонку
   вместе с названием и описанием. */
/* подъём первой колонки относился к прежней раскладке, где в ней был знак */


/* ══ Подвал, вариант: знак слева, крупное имя справа, ссылки под ними ══ */
.footer-head{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);
  gap:clamp(28px,3.4vw,60px);align-items:center;
  padding-bottom:clamp(12px,1.2vw,18px);margin-bottom:clamp(14px,1.4vw,20px);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-mark{display:flex;justify-content:center}
.footer-logo{width:100%;max-width:300px;height:auto;display:block}
.footer-ident{min-width:0}
.footer-name{
  display:block;text-decoration:none;color:#fff;
  font-family:'Literata',Georgia,serif;font-weight:700;
  font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1;letter-spacing:.01em;
}
.footer-name span{color:#ABE6C9;font-family:'Golos Text',system-ui,sans-serif;font-size:.42em;font-weight:600}
.footer-about{
  margin:clamp(14px,1.4vw,20px) 0 0;max-width:62ch;
  font-size:.95rem;line-height:1.65;color:rgba(255,255,255,.68);
}
.footer-grid--3{grid-template-columns:repeat(3,minmax(0,1fr)) !important}

@media (max-width:900px){
  .footer-head{grid-template-columns:1fr;gap:18px;text-align:center;justify-items:center}
  .footer-logo{max-width:190px}
  .footer-name{font-size:clamp(2rem,9vw,2.8rem)}
  .footer-about{margin-inline:auto;text-align:center}
  .footer-grid--3{grid-template-columns:1fr !important}
}


/* Подвал прижат к форме: верхний отступ был 70 px, а знак и так крупный —
   воздух сверху и под ним только растягивал страницу. */
footer{padding-top:clamp(26px,2.6vw,38px) !important}
.footer-head{gap:clamp(20px,2.4vw,40px)}
.footer-grid--3{margin-bottom:clamp(20px,2vw,30px) !important}
.footer-about{margin-top:clamp(10px,1vw,14px)}


/* У знака внутри файла прозрачное поле 6% с каждой стороны — запас на круглую
   обрезку в соцсетях. На странице оно читается как лишний воздух сверху
   и снизу, поэтому вычитаем его отрицательными отступами. */
footer{padding-top:18px !important}
.footer-logo{margin-block:-6%;margin-inline:-6%}
.footer-head{padding-bottom:6px;margin-bottom:10px}
.footer-mark{align-self:center}


/* Проба: шапка чёрная вместо зелёной.
   Прозрачность и размытие подмешивали зелень фотографии — чёрный выходил
   серо-болотным. Плотная заливка без размытия даёт чистый глубокий тон. */
.capsule-header-holder{
  background:#000 !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 6px 26px rgba(0,0,0,.55);
}


/* Шапка крупнее примерно в полтора раза: высота, знак, надпись, пункты меню
   и телефон. Полосе дали больше ширины — иначе увеличенные пункты не влезают
   и меню схлопывается в кнопку. */
@media (min-width:901px){
  /* на 1440 полный размер не помещался — иконки уезжали за край,
     поэтому величины плавают от ширины экрана */
  :root{--vk-head-h:clamp(104px,7.4vw,132px)}
  .capsule-navbar{max-width:1640px !important;gap:clamp(16px,2vw,34px)}
  .vk-logo{width:clamp(80px,6vw,108px);height:clamp(80px,6vw,108px)}
  .capsule-brand{gap:clamp(12px,1.2vw,20px)}
  .capsule-logo-text{font-size:clamp(1.7rem,1.95vw,2.4rem)}
  .capsule-logo-text span{font-size:clamp(1.05rem,1.2vw,1.52rem)}
  .capsule-menu{gap:clamp(10px,1.3vw,20px)}
  .capsule-link{font-size:clamp(.98rem,1.05vw,1.26rem);padding:11px clamp(10px,1vw,18px)}
  .seo-badge-dot{width:9px;height:9px}
  .capsule-phone-chip{font-size:clamp(.98rem,1.05vw,1.28rem);padding:12px clamp(14px,1.4vw,22px);gap:10px}
  .pulse-status-dot{width:11px;height:11px}
  .vk-msg{width:clamp(42px,3.4vw,52px);height:clamp(42px,3.4vw,52px)}
  .vk-msg svg{width:54%;height:54%}
  .vk-msg-max span{font-size:clamp(.72rem,.72vw,.92rem)}
  /* первый экран и якоря считаются от новой высоты */
  :target,section[id],.anchor-target{scroll-margin-top:calc(var(--vk-head-h) + 16px)}
  .strip img{top:calc(var(--vk-head-h) + 16px)}
}


/* ══ Телефон: фотография отдельно, текст под ней ══════════════════════
   Текст лежал поверх кадра и закрывал птиц: сам кадр занимал весь экран,
   а подложка под буквами начиналась выше середины. Теперь фото показывается
   целиком сверху, текст идёт ниже на сплошном зелёном. */
@media (max-width:760px){
  .hero{
    min-height:0 !important;height:auto !important;
    display:block !important;align-items:initial !important;
    background:#123C2E;padding-block:0 !important;
  }
  .hero__media{position:static;width:100%;height:auto;inset:auto}
  .hero__media picture{display:block;width:100%;height:auto}
  .hero__media img{
    position:static;display:block;width:100%;height:auto;
    aspect-ratio:4/5;object-fit:cover;object-position:center 26%;
  }
  .hero__veil{display:none}
  .hero__body{
    position:static;background:#123C2E;
    padding:24px 0 30px !important;text-align:center;
  }
}


/* Карточка вида без фотографии: честная заглушка вместо снимка другой птицы */
.vcard__media--soon{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 14px,rgba(255,255,255,.02) 14px 28px),#0E3024;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.vcard__media--soon span{
  color:rgba(255,255,255,.52);font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
}

/* ───────── Подвал одинаков на всех страницах ─────────
   15.10.2026. На главной и в каталоге <footer> лежит внутри <main>, поэтому
   прежние правила body > footer их не касались: там подвал был ровно-тёмным,
   а на остальных страницах — с градиентом. Владелец заметила расхождение.
   Берём за эталон градиент, он был на большинстве страниц. */
footer{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(26px,3.6vw,46px) 0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:linear-gradient(180deg,rgba(23,83,60,.94) 0%,rgba(12,42,31,.96) 100%) !important;
}
/* Реквизиты: мелкий шрифт, две строки вместо трёх */
.footer-bottom{font-size:12.5px !important;line-height:1.55 !important}
.footer-bottom a{font-size:inherit !important}
/* Реквизиты занимают всю ширину подвала, ссылки на документы — строкой ниже:
   в прежней раскладке текст жался в 738 px и разбивался на три строки. */
.footer-bottom{flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
.footer-bottom > div:first-child{max-width:none !important;width:100% !important}

/* ───────── Шапка: выпадающий пункт «Наши проекты» (15.10.2026) ───────── */
.capsule-drop{position:relative;display:inline-block}
.capsule-drop > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.capsule-drop > summary::-webkit-details-marker{display:none}
.capsule-drop > summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease;opacity:.8}
.capsule-drop[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.capsule-drop-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:210px;
  background:#0C2A1F;border:1px solid rgba(36,107,72,.45);border-radius:14px;padding:8px;
  box-shadow:0 16px 36px rgba(0,0,0,.38);z-index:60}
.capsule-drop-menu a{display:block;padding:11px 14px;border-radius:10px;color:#fff;text-decoration:none;
  font-family:'Golos Text',system-ui,sans-serif;font-size:.95rem;font-weight:600;white-space:nowrap}
.capsule-drop-menu a:hover,.capsule-drop-menu a:focus-visible{background:rgba(36,107,72,.35);outline:none}

/* Мобильное меню: тот же пункт аккордеоном */
.mobile-nav-drop > summary{list-style:none;cursor:pointer}
.mobile-nav-drop > summary::-webkit-details-marker{display:none}
.mobile-nav-drop[open] > summary span{display:inline-block;transform:rotate(180deg)}
.mobile-nav-sub{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 12px 22px;
  color:rgba(255,255,255,.88);text-decoration:none;font-size:1.05rem;font-weight:600;
  border-left:2px solid rgba(36,107,72,.6);margin:2px 0 10px 4px}

/* ───────── Подвал тёмный, как на главной (поправка владельца 15.10.2026) ─────────
   Перекрывает градиент из блока выше: эталон — ровный тёмный фон главной. */
footer{background:#0C2A1F !important;background-image:none !important}
/* Селектор усилен: на страницах, где footer — прямой потомок body, старое
   правило body > footer с градиентом сильнее простого footer. html body footer — сильнее. */
html body footer{background:#0C2A1F !important;background-image:none !important}

/* Заголовок первого экрана в 2 строки на компьютере — аудит 20.10.2026, решение владельца */
.hero-br{display:none}
@media (min-width:901px){.hero h1.hero-h1-two{max-width:none}.hero-br{display:inline}}