@font-face{font-family:Manrope;src:url('assets/fonts/manrope-400-cyrillic.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0400-052F}@font-face{font-family:Manrope;src:url('assets/fonts/manrope-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('assets/fonts/manrope-600-cyrillic.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0400-052F}@font-face{font-family:Manrope;src:url('assets/fonts/manrope-600-latin.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Prata;src:url('assets/fonts/prata-400-cyrillic.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Prata;src:url('assets/fonts/prata-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--ink:#1d1e1e;--paper:#f3eee5;--gold:#d8bd87;--line:#b7aa94}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:var(--ink)}a{color:inherit}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid #b88d44;outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2{font-weight:400;letter-spacing:-.04em;line-height:1.07}h1{font-size:clamp(56px,6.8vw,100px)}h2{font-size:clamp(38px,4.5vw,66px)}h3{font-size:21px;font-weight:600}.wrap{width:min(1328px,calc(100% - 96px));margin-inline:auto}.header{height:88px;position:sticky;top:0;z-index:10;background:#1d1e1e;display:flex;align-items:center;justify-content:space-between;padding:8px 48px;border-bottom:1px solid #635a48;color:var(--paper);gap:24px}.brand{display:flex;align-items:center}.brand img{width:118px;height:62px;object-fit:contain}.header nav{display:flex;gap:36px;font-size:15px}.header nav a{text-decoration:none;padding:12px 0}.header nav a:hover{color:var(--gold)}.button{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:14px 23px;border:1px solid transparent;border-radius:9px;font-weight:600;font-size:15px;text-decoration:none;position:relative;overflow:hidden;transition:background .18s}.scene{isolation:isolate;position:relative;overflow:hidden;min-height:760px}.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.scene:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}.hero{min-height:calc(100svh - 88px);color:#fff9ed;display:flex;flex-direction:column;justify-content:center}.hero:before{background:linear-gradient(90deg,#151510c9,transparent 90%)}.hero-content{padding-block:70px}.intro{font-size:15px;margin-bottom:26px}.lead{font-size:20px;line-height:1.65;margin-top:28px;max-width:570px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}.scene-foot{display:flex;justify-content:space-between;gap:24px;padding-block:25px;border-top:1px solid #bfb18e66;font-size:13px;margin-top:auto}.scene-foot a{text-decoration:none}.community{padding-block:105px;color:#fff9ed}.community:before{background:linear-gradient(90deg,#171713ed 0%,#171713d9 38%,#17171310 100%)}.community-copy{max-width:610px}.principles{margin:34px 0}.principles article{padding:21px 0;border-top:1px solid #b5a78e75}.principles p{font-size:16px;line-height:1.7;color:#e0d7c7;margin-top:9px;max-width:480px}.join{padding-top:105px}.join:before{background:linear-gradient(90deg,#f3eee5ef,#f3eee5c4)}.join-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;padding-bottom:100px}.join h2{font-size:clamp(38px,4vw,59px)}.join .button{margin-top:30px}.entry-note{font-size:14px;margin-top:23px;line-height:1.7}.faq{align-self:center;padding:30px;border:1px solid #aa9a82;border-radius:16px;background:#fffdf8e8}.faq h3{margin-bottom:24px}.faq details{border-top:1px solid #bfb3a1;padding:0}.faq summary{padding:21px 24px 21px 0;cursor:pointer;font-size:16px;font-weight:600}.faq details p{font-size:15px;line-height:1.75;padding-bottom:24px;color:#514a40}.footer{border-top:1px solid #a99b87;padding-block:30px;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:13px}.footer span{font-size:12px;line-height:1.6}.footer a{text-decoration:none}.skip{position:fixed;left:20px;top:-80px;z-index:99;padding:15px;background:white;color:black}.skip:focus{top:15px}
@media(max-width:950px){.wrap{width:calc(100% - 48px)}.header{padding-inline:24px}.header nav{gap:20px}.join-grid{gap:35px}.hero-content{padding-block:60px}.community-copy{max-width:560px}}
@media(max-width:620px){html{scroll-padding-top:76px}.header{height:76px;padding:8px 20px}.brand img{width:100px;height:54px}.header nav{display:none}.header .button{min-height:44px;padding:10px 18px}.wrap{width:calc(100% - 40px)}.scene{min-height:auto}.hero{min-height:calc(100svh - 76px)}.hero .backdrop{object-position:60% center}.hero:before{background:#161511a3}.hero-content{padding-block:62px 54px}.intro{font-size:13px;margin-bottom:24px}h1{font-size:clamp(44px,11.8vw,70px)}h2{font-size:39px}.lead{font-size:17px;margin-top:23px}.actions{flex-direction:column;align-items:stretch;margin-top:30px}.button{font-size:14px;min-height:50px}.scene-foot{font-size:12px;padding-block:20px}.scene-foot span{max-width:140px}.community{padding-block:70px}.community:before{background:#161611d9}.community .backdrop{object-position:70% center}.principles p{font-size:15px}.join{padding-top:70px}.join-grid{grid-template-columns:1fr;gap:45px;padding-bottom:55px}.join h2{font-size:38px}.faq{padding:22px}.footer{flex-direction:column;align-items:start;gap:18px}.join:before{background:#f3eee5d9}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Paper sheets retain their full reading height, then overlap in document order. */
.paper-stack .scene { position: sticky; top: var(--sheet-top, 88px); }
.scene { background-color: #1d1e1e; }
.join { background-color: #f3eee5; }
.scene + .scene { border-radius: 24px 24px 0 0; box-shadow: 0 -18px 55px #00000040; border-top: 1px solid #b5a58a; }
.hero { z-index: 1; }
.community { z-index: 3; }
.join { z-index: 4; min-height: calc(100dvh - var(--landing-header-height, 88px)); display: flex; flex-direction: column; }
.join .footer { margin-top: auto; }
.footer .button { margin-top: 0; flex-shrink: 0; }
.footer-brand { display: inline-flex; flex-shrink: 0; }
.footer-brand svg { display: block; width: 145px; height: 76px; }
/* ссылку на политику видно как ссылку: остальные в подвале — без подчёркивания */
.footer .footer-legal { display: inline-block; margin-top: 6px; text-decoration: underline; text-underline-offset: 3px; }
.footer .footer-legal:hover { color: #65491f; }
.hero h1, .community h2 { color: #e6d3af; }
/* заголовки — Prata, как в образце заказчика; начертание у шрифта одно, жирное браузер дорисовал бы сам */
h1, h2, .faq h3 { font-family: Prata, Georgia, serif; font-weight: 400; font-synthesis: none; letter-spacing: 0; }
.faq h3 { font-size: 26px; line-height: 1.2; }
/* на планшете колонка вопросов узкая — заголовок в одну строку */
@media(max-width:950px) { .faq h3 { font-size: 21px; } }
@media(max-width:620px) { .faq h3 { font-size: 24px; } }
.hero .lead { color: #e1d9cb; }
.hero .intro { color: #cdbfa6; }
.hero h1 { font-size: clamp(50px, 5.6vw, 82px); line-height: 1.02; }
/* счётчики сети под кнопками героя — как строка цифр в образце заказчика */
.stats { display: grid; grid-template-columns: 1fr 1fr; max-width: 520px; margin-top: 46px; border-top: 1px solid #bfb18e66; }
.stats[hidden] { display: none; }
.stats p { padding: 17px 24px 0 0; }
.stats p + p { padding-left: 27px; border-left: 1px solid #bfb18e66; }
.stats b { display: block; font: 400 37px/1.1 Prata, Georgia, serif; color: #e6d3af; font-synthesis: none; }
.stats span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: #cdbfa6; }
.community h3 { color: #f4efe6; }
/* третий слайд по макету владельца: заголовок прописными, у каждой строки свой золотой перелив, разделители золотые */
.community h2 { text-transform: uppercase; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.14; }
.community h2 span { display: block; width: fit-content; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .community h2 span { background: linear-gradient(180deg, #f7e4b4 8%, #e3bf7a 58%, #c7984f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.community .principles { margin: 38px 0 0; }
.community .principles article { border-top-color: #c6a56a80; }
.community .principles p { text-wrap: pretty; }
.hero .scene-foot { color: #d6c9b3; }
@media(max-width:620px) {
  .scene + .scene { border-radius: 18px 18px 0 0; }
  .hero h1 { font-size: clamp(36px, 10.4vw, 62px); }
  .stats { margin-top: 34px; }
  .stats p { padding-right: 14px; }
  .stats p + p { padding-left: 18px; }
  .stats b { font-size: 32px; }
  /* «Все возможности» — самая длинная строка, ≈11,7 кегля: держим её в одну строку на любой ширине телефона */
  .community h2 { font-size: min(calc((100vw - 40px) / 12), 40px); }
  .community h3 { font-size: 17px; }
  /* «Профессиональная платформа» не рвём: на узком экране переносится только после «ЭХО /» */
  .scene-foot span { max-width: none; }
  .join h2 { font-size: clamp(30px, 8.7vw, 38px); }
}
@media(max-width:380px) { .community h3 { font-size: 16px; } }
@media(prefers-reduced-motion:reduce) {
  .paper-stack .scene { position: relative; top: auto; }
  .scene + .scene { box-shadow: none; }
}
/* все кнопки — чёрные премиум с бликом, как в приложении («Здесь можно только черные переливающиеся сделать», владелец 09.10):
   тёмный градиент, золотая рамка градиентом, светлое золото текста. Блик тот же, что в приложении: раз в 3 с, ровным ходом,
   под текстом и обрезан рамкой. Кнопки есть на странице с загрузки — блик у всех идёт разом */
.button {
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, #2c241a 0%, #16120e 100%) padding-box,
    linear-gradient(115deg, #f2dba6 0%, #b08a4c 28%, #6f5328 50%, #c9a868 74%, #f0d9a2 100%) border-box;
  box-shadow: 0 10px 22px -12px rgba(23, 18, 10, .7), inset 0 1px 0 rgba(255, 236, 196, .18);
  color: #efd6a0;
  isolation: isolate;
}
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: linear-gradient(180deg, #3a2f22 0%, #1d1812 100%) padding-box,
      linear-gradient(115deg, #f8e6bb 0%, #c29a58 28%, #80602f 50%, #d8b878 74%, #f6e3b4 100%) border-box;
    color: #f6e4bb;
  }
}
/* «Подать заявку» — золотом («сделать в нашем золотом стиле, а то тут одни черные кнопки», владелец 10.10): то же золото, что у выбранной
   категории в приложении, — мягкий блик сверху, золотой градиент, рамка градиентом; текст тёмный, на самом тёмном золоте 5,7:1.
   Блик тот же и идёт разом с чёрными, полоса светлее — на золоте прежняя почти не видна */
.button.is-gold {
  background: linear-gradient(180deg, rgba(255, 248, 230, .45) 0%, rgba(255, 248, 230, 0) 48%) padding-box,
    linear-gradient(100deg, #b48f57 0%, #d1ab6c 24%, #edcb91 48%, #d6b073 72%, #b18c55 100%) padding-box,
    linear-gradient(135deg, #f8e5b6 0%, #c69f5c 38%, #f3d9a0 66%, #ad874a 100%) border-box;
  box-shadow: 0 10px 22px -12px rgba(92, 64, 20, .7), inset 0 1px 0 rgba(255, 249, 232, .65);
  color: #1d160c;
}
@media (hover: hover) and (pointer: fine) {
  .button.is-gold:hover {
    background: linear-gradient(180deg, rgba(255, 250, 236, .55) 0%, rgba(255, 250, 236, 0) 48%) padding-box,
      linear-gradient(100deg, #bf9a60 0%, #dbb676 24%, #f3d59d 48%, #dfba7d 72%, #bc965e 100%) padding-box,
      linear-gradient(135deg, #fbecc4 0%, #d0a965 38%, #f7e0ab 66%, #b89052 100%) border-box;
    color: #1d160c;
  }
}
.button.is-gold::after { background: linear-gradient(90deg, transparent, rgba(255, 252, 240, .7), transparent); }
.button::after {
  position: absolute;
  inset: -80% auto -80% -38%;
  z-index: -1;
  width: 24%;
  content: "";
  opacity: 0;
  transform: rotate(16deg);
  background: linear-gradient(90deg, transparent, rgba(255, 244, 211, .4), transparent);
  animation: echo-gold-sweep 3s linear infinite;
  pointer-events: none;
}
/* те же ключевые кадры, что в production-app.css: пауза до 48 %, дальше ровный ход за правый край */
@keyframes echo-gold-sweep {
  0%, 48% { transform: translateX(0) rotate(16deg); opacity: 0; }
  60%, 78% { opacity: 1; }
  100% { transform: translateX(750%) rotate(16deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .button::after { display: none; animation: none; } }
/* контрастная тема: градиенты браузер убирает — рамка системным цветом кнопки, блика не видно */
@media (forced-colors: active) { .button { border-color: ButtonText; } .button::after { display: none; } }
/* свой значок у вопросов вместо системного: системный ▶ на iPhone рисуется синим эмодзи (скриншот владельца 09.10) */
.faq summary { display: flex; align-items: flex-start; gap: 14px; list-style: none; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
/* уголок — две стороны повёрнутого квадрата; сдвиг на половину его выступа держит середину значка на месте при повороте */
.faq summary::before { flex: none; width: 8px; height: 8px; margin-top: 7.2px; border-right: 2px solid #a8823f; border-bottom: 2px solid #a8823f; content: ""; transform: translateX(-2.8px) rotate(-45deg); transition: transform .18s ease; }
.faq details[open] summary::before { transform: translateY(-2.8px) rotate(45deg); }
/* «*» в правиле без движения наверху псевдоэлементы не задевает — без этого уголок поворачивался бы плавно и там */
@media (prefers-reduced-motion: reduce) { .faq summary::before { transition: none; } }