:root {
  --night: #0a1712;
  --leaf: #10231b;
  --frost: #eef7f1;
  --moss: #8fb3a2;
  --signal: #1ed794;
  --line: rgba(238, 247, 241, .12);
  --display: "Unbounded", system-ui, sans-serif;
  --text: "Golos Text", system-ui, sans-serif;
  --ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--night); color: var(--frost); font: 400 18px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
.skip { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; left: 16px; top: 16px; z-index: 100; width: auto; height: auto; margin: 0; padding: 12px 18px; clip: auto; overflow: visible;
  background: var(--signal); color: var(--night); font: 600 16px/1 var(--text); text-decoration: none; border-radius: 10px; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 32px; padding: 14px clamp(16px, 4vw, 48px);
  background: rgba(10, 23, 18, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .name { font: 600 17px/1 var(--display); text-decoration: none; letter-spacing: -.01em; }
.top nav { display: flex; gap: 24px; margin-left: auto; font-size: 16px; }
.top nav a { text-decoration: none; color: var(--moss); min-height: 44px; display: inline-flex; align-items: center; }
.top nav a:hover { color: var(--frost); }
.wrap a:not(.btn):not(.case-card):not(.tile) { color: var(--frost); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.btn .long { margin-left: .3em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 14px; font: 600 16px/1 var(--text); text-decoration: none; transition: background .15s, color .15s; }
.btn--primary { background: var(--signal); color: var(--night); }
.btn--primary:hover { background: #4be3aa; }
.btn--ghost { box-shadow: inset 0 0 0 1.5px rgba(30, 215, 148, .55); color: var(--frost); }
.btn--ghost:hover { background: rgba(30, 215, 148, .1); }
.top .btn { min-height: 40px; padding: 0 16px; font-size: 15px; gap: 0; }
@media (max-width: 760px) {
  .top nav { display: flex; gap: 16px; margin-left: auto; }
  .top .btn { margin-left: 0; }
  .top .btn .long { display: none; }
}
/* На телефоне в шапке не помещаются три ссылки и кнопка: кнопка есть в первом экране страницы */
@media (max-width: 560px) {
  .top { gap: 12px; }
  .top nav { gap: 14px; }
  .top nav a:nth-child(n+3), .top .btn { display: none; }
  /* Два телефона рядом на 390 нечитаемы: на телефоне показываем Telegram, MAX - с планшета */
  .stage--dual .phone-slot + .phone-slot { display: none; }
}

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px);
  max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.steps { padding-bottom: 20vh; }
.step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; max-width: 34rem; transition: opacity .35s; }
html.js .step:not(.is-active) { opacity: .6; }
.step.is-active, .step:focus-within { opacity: 1; }
.step--intro { min-height: calc(100vh - 69px); opacity: 1; }
.crumbs { font-size: 15px; color: var(--moss); margin-bottom: 28px; }
.crumbs a { color: var(--moss); text-underline-offset: 3px; }
h1 { font: 700 clamp(32px, 3.6vw, 52px)/1.06 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.lead { margin-top: 24px; font-size: 21px; line-height: 1.5; color: #cfe3d8; max-width: 32rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hint { margin-top: 40px; font-size: 16px; color: #cfe3d8; display: flex; align-items: center; gap: 10px; }
.hint svg { flex: none; }
.og-brand { display: none; }
.note { margin-top: 16px; font-size: 15px; color: var(--moss); max-width: 32rem; }
.note a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.step-n { font: 700 15px/1 var(--text); color: var(--night); background: var(--signal); width: 28px; height: 28px;
  border-radius: 50%; display: grid; place-items: center; margin-bottom: 20px; }
.step h2 { font: 600 clamp(28px, 3vw, 44px)/1.1 var(--display); letter-spacing: -.025em; }
.step p { margin-top: 18px; color: #cfe3d8; font-size: 20px; }

.stage { position: sticky; top: 69px; height: calc(100vh - 69px); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px 0; }
.stage--dual { flex-wrap: nowrap; }
.phone-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.phone-cap { font-size: 14px; color: var(--moss); }
.phone-footnote { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 24px; font-size: 14px; line-height: 1.45; color: #a8c4b6; }
.story + .phone-footnote { margin-top: -8px; }
.intro-price { font: 600 clamp(22px, 2.4vw, 28px)/1.1 var(--display); color: var(--signal); white-space: nowrap; }
.actions--intro { align-items: center; }
.actions--intro .intro-price { margin-left: 4px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); max-width: 1320px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 48px); align-items: center; }
.hero .stage { position: relative; top: auto; height: auto; min-height: 420px; padding: 0; }
.hero .hero-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
#primery { padding: 48px clamp(16px, 4vw, 48px) 72px; max-width: 1320px; margin: 0 auto; }
#primery h2 { font: 600 clamp(26px, 2.6vw, 36px)/1.15 var(--display); letter-spacing: -.02em; }
.case-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.case-card { grid-column: span 2; text-decoration: none; color: inherit; display: flex; flex-direction: column; background: var(--leaf); border-radius: 20px; padding: 20px; min-height: 100%; }
.case-card--lg { grid-column: span 3; }
.case-card--cta { grid-column: span 2; justify-content: center; text-align: left; }
.case-card--cta .actions { margin-top: 24px; }
.case-card__frame { border-radius: 16px; overflow: hidden; background: var(--night); aspect-ratio: 372 / 420; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.case-card__frame img { width: 100%; height: 100%; object-fit: contain; }
.case-card--lg .case-card__frame { aspect-ratio: 16 / 11; }
.case-card h3 { font: 500 18px/1.3 var(--text); margin: 0; }
.case-card__desc { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--moss); flex: 1; }
.case-card__price { margin: 14px 0 0; font: 600 20px/1.2 var(--display); color: var(--signal); }
.case-card__more { margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--signal); }
.case-card:hover h3 { color: var(--signal); }
.more-all { display: inline-block; margin-top: 28px; font-weight: 500; }
.price--case { display: block; }
.price--case .offer--wide { max-width: 40rem; }
/* Без списка «что входит» левая колонка пуста: заголовок над карточкой цены */
.price--case:not(:has(ul)) { grid-template-columns: 1fr; gap: 24px; }
.offer .sum-label { margin: 0 0 6px; font-size: 16px; color: var(--moss); }
.offer .sum { white-space: nowrap; }
.actions--price { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.estimate { font-size: 16px; color: var(--moss); }
.offer .stages { margin-top: 12px; font-size: 16px; color: #cfe3d8; }
.offer .stages + .stages { margin-top: 8px; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 72px 0; border-top: 1px solid var(--line); }
.fact b { display: block; font: 600 clamp(36px, 4.6vw, 64px)/1 var(--display); color: var(--signal); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fact span { display: block; margin-top: 12px; color: #cfe3d8; max-width: 18rem; }
.facts .note { grid-column: 1 / -1; margin-top: 0; }
.price { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding: 72px 0; border-top: 1px solid var(--line); }
.price h2, .more h2 { font: 600 clamp(26px, 2.6vw, 36px)/1.15 var(--display); letter-spacing: -.02em; }
.price ul { margin-top: 20px; padding-left: 1.1em; color: #cfe3d8; }
.price li + li { margin-top: 6px; }
.price p { margin-top: 16px; color: #cfe3d8; }
.price .legal { margin-top: 24px; color: #cfe3d8; }
.price .legal + .legal { margin-top: 12px; }
.price .legal-actions { margin-top: 28px; }
.offer { background: var(--leaf); border-radius: 28px; padding: 32px; align-self: start; }
.offer .sum { font: 700 44px/1 var(--display); letter-spacing: -.03em; }
.offer .sum small { font: 500 18px/1 var(--text); color: var(--moss); margin-left: 8px; letter-spacing: 0; }
.offer p { margin-top: 14px; color: #cfe3d8; font-size: 16px; }
.offer .actions { margin-top: 24px; }
.offer .fl { margin-top: 16px; font-size: 15px; color: var(--moss); }
.offer .fl a { text-decoration: underline; text-underline-offset: 3px; }
.offer .svc { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.more { padding: 72px 0 96px; border-top: 1px solid var(--line); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
@media (min-width: 560px) and (max-width: 999px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  text-decoration: none;
  display: block;
  background: var(--leaf);
  border-radius: 20px;
  padding: 24px;
}
.tile h3 { margin: 0; font: 500 19px/1.3 var(--text); }
.tile-desc { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--moss); }
.tile-stat { margin: 16px 0 0; display: flex; flex-direction: column; gap: 4px; }
.tile-stat b { font: 600 28px/1.15 var(--display); color: var(--signal); }
.tile-stat span { font-size: 14px; line-height: 1.35; color: var(--moss); }
.tile-more { display: block; margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--signal); }
.tile:hover h3 { color: var(--signal); }

.price--solo { display: block; }
.price--solo .price-table { max-width: 1000px; }
.price-table { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 16px; }
.price-table th, .price-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table th { color: var(--moss); font-weight: 500; font-size: 14px; }
.price-table td:nth-child(2), .price-table td:nth-child(3) { white-space: nowrap; }
.price-table .price-val { font: 600 22px/1.2 var(--display); color: var(--signal); white-space: nowrap; }
.price-table a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; padding-block: 8px; display: inline-block; }
.foot a, .contacts .links a { padding-block: 8px; display: inline-block; }
@media (max-width: 700px) {
  .price-table thead { display: none; }
  .price-table tr { display: block; margin-bottom: 20px; padding: 20px; background: var(--leaf); border-radius: 16px; }
  .price-table td { display: block; border: none; padding: 4px 0; }
  .price-table td::before { content: none; }
  .price-table td[data-label="Услуга"] { font-weight: 600; font-size: 17px; padding-bottom: 8px; }
  .price-table td[data-label="Срок"], .price-table td[data-label="Цена"] { display: inline; padding: 0; }
  .price-table td[data-label="Срок"]::after { content: " · "; color: var(--moss); }
  .price-table td[data-label="Цена"] { font: 600 22px/1.2 var(--display); color: var(--signal); }
  .price-table td[data-label="Срок"] { font-size: 15px; color: var(--moss); }
  .price-table td[data-label="Через fl.ru"] { margin-top: 10px; font-size: 15px; color: #cfe3d8; }
  .price-table td[data-label="Через fl.ru"] a { padding-block: 8px; }
}

.about { padding: 72px 0; border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.about h2 { font: 600 clamp(26px, 2.6vw, 36px)/1.15 var(--display); }
.about p { margin-top: 20px; color: #cfe3d8; max-width: 42rem; }
.about ul { margin-top: 20px; padding-left: 1.1em; color: #cfe3d8; }
.about li + li { margin-top: 8px; }
.about a { color: var(--frost); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.about-stats { display: flex; flex-direction: column; gap: 28px; }
.about-stats .fact b { display: block; font: 600 clamp(36px, 4vw, 52px)/1 var(--display); color: var(--signal); }
.about-stats .fact span { display: block; margin-top: 8px; color: #cfe3d8; font-size: 16px; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }
.how { margin-top: 40px; }
.how h3 { font: 600 22px/1.2 var(--display); }
.how ol { margin-top: 16px; padding-left: 1.2em; color: #cfe3d8; }
.how li + li { margin-top: 8px; }

.contacts { padding: 48px; margin: 0 0 48px; border-top: 1px solid var(--line); background: var(--leaf); border-radius: 28px; }
.contacts h2 { font: 600 clamp(26px, 2.6vw, 36px)/1.15 var(--display); }
.contacts p { margin-top: 16px; color: #cfe3d8; }
.contacts .fine { margin-top: 8px; font-size: 15px; color: var(--moss); }
.contacts .actions { margin-top: 24px; }
.contacts .links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 20px; font-size: 16px; }
.contacts .links a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }

.dev { max-width: 1320px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 48px); font-size: 15px; color: var(--moss); border-top: 1px solid var(--line); }
.foot { max-width: 1320px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 48px) 48px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 20px; font-size: 15px; color: var(--moss); }
.foot a { text-decoration: underline; text-underline-offset: 3px; color: var(--frost); text-decoration-color: var(--signal); }
.foot span { margin-left: auto; }

html.og body { width: 1200px; height: 630px; overflow: hidden; }
html.og .top, html.og .facts, html.og .price, html.og .more, html.og .dev, html.og .foot,
html.og .about, html.og .contacts, html.og .wrap > section:not(.story), html.og .step:not(.step--intro),
html.og .lead, html.og .actions, html.og .hint, html.og .note, html.og .crumbs { display: none !important; }
html.og .hero { display: block; max-width: none; padding: 0; height: 630px; position: relative; margin: 0; }
html.og .hero__copy { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); width: 600px; max-width: 600px; padding: 0; }
html.og .hero__copy h1 { font-size: 48px; line-height: 1.08; }
html.og .hero .og-brand { display: block !important; margin-top: 20px; font: 500 20px/1.4 var(--text); color: var(--moss); }
html.og .hero .lead, html.og .hero .actions { display: none !important; }
html.og .hero .stage { position: absolute; right: 40px; top: 0; height: 630px; width: 520px; }
html.og #primery, html.og .wrap { display: none !important; }
html.og .story { display: block; max-width: none; padding: 0; height: 630px; position: relative; }
html.og .steps { display: block; position: absolute; left: 56px; top: 50%; transform: translateY(-50%); width: 600px; padding: 0; }
html.og .step--intro { min-height: 0; opacity: 1; max-width: 600px; }
html.og .step--intro h1 { font-size: 52px; line-height: 1.08; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
html.og .og-brand { display: block !important; margin-top: 20px; font: 500 20px/1.4 var(--text); color: var(--moss); }
html.og .stage { position: absolute; right: 40px; top: 0; height: 630px; width: 520px; }

html.card body { width: 420px; height: 820px; overflow: hidden; background: var(--night); }
html.card .top, html.card .facts, html.card .price, html.card .more, html.card .dev, html.card .foot,
html.card .about, html.card .contacts, html.card .wrap > section:not(.story):not(.hero), html.card .step,
html.card .hero__copy, html.card .hero-steps, html.card #primery, html.card .phone-footnote,
html.card .lead, html.card .actions, html.card .hint, html.card .note, html.card .crumbs { display: none !important; }
html.card .story, html.card .hero { display: block; max-width: none; padding: 0; margin: 0; height: 820px; }
html.card .stage { position: absolute; inset: 24px; top: 24px; height: auto; width: auto; padding: 0; }
html.card .phone-fit { --k: 0.82; }
html.card .stage--dual .phone-slot + .phone-slot, html.card .phone-cap { display: none !important; }

@media (max-height: 500px) {
  .top, .stage { position: static; }
}
@media (max-width: 560px) {
  .actions .btn { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero .stage { order: 1; position: sticky; top: 57px; height: calc(100svh - 57px); min-height: 0; z-index: 2;
    background: linear-gradient(var(--night) 88%, transparent); }
  .hero .hero__copy { order: 0; }
  .hero .phone-fit { --k: min(var(--k, 0.78), 0.78) !important; min-width: 300px; }
  .story { display: flex; flex-direction: column; gap: 0; }
  .steps { display: contents; }
  .steps > section { display: contents; }
  .step.step--intro { order: -1; min-height: 0; padding: 32px 0 16px; }
  .top .name { white-space: nowrap; }
  .story .stage { order: 0; top: 57px; height: calc(100svh - 57px); padding: 10px 0; z-index: 2;
    background: linear-gradient(var(--night) 86%, transparent); }
  .story .stage .phone-fit { min-width: 300px; }
  .stage--dual { gap: 8px; }
  .step { order: 1; min-height: auto; margin-bottom: 70svh; justify-content: flex-start; padding: 20px; position: relative; z-index: 3;
    background: var(--leaf); border-radius: 20px; max-width: none; }
  .step:last-child { padding-bottom: 20px; margin-bottom: 24vh; }
  /* Карточка шага идёт поверх верха телефона: новые сообщения внизу остаются видны */
  .step:not(.step--intro) h2 { font-size: 22px; }
  .step:not(.step--intro) p { margin-top: 8px; font-size: 16px; }
  .step:not(.step--intro) .step-n { margin-bottom: 10px; }
  .facts, .price { grid-template-columns: 1fr; }
  .facts { gap: 32px; }
  .price { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card, .case-card--lg, .case-card--cta { grid-column: span 1; }
}
@media (max-width: 559px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-card, .case-card--lg, .case-card--cta { grid-column: span 1; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .case-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case-card--lg { grid-column: span 2; }
  .case-card:not(.case-card--lg):not(.case-card--cta) { grid-column: span 2; }
}
@media (max-width: 900px) and (min-width: 561px) {
  .stage--dual .phone-fit { --k: min(var(--k, 0.45), 0.42) !important; }
}