/* Общие стили посадочных страниц (ТЗ WEB-SEO-001, раздел 4).
   Отдельным файлом, а не копией в каждой странице: страниц две, правок будет больше. */

body { margin: 0; background: #f4f4f6; font-family: 'Manrope', sans-serif; -webkit-font-smoothing: antialiased; color: #101014; }
* { box-sizing: border-box; }
a { color: #FF6A1A; text-decoration: none; }
a:hover { color: #d94f06; }
img { max-width: 100%; height: auto; }
html { scroll-behavior: smooth; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 56px; }

/* Шапка — та же, что на главной */
.top { background: #101014; position: relative; overflow: hidden; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.logo { display: flex; align-items: flex-end; }
.logo span { font: 800 24px/0.78 'Manrope', sans-serif; letter-spacing: -0.03em; color: #fff; }
.logo em { color: #FF6A1A; font-style: normal; }
.topnav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.topnav a { font: 600 14px/1 'Manrope', sans-serif; color: rgba(255,255,255,.72); }
.topnav a:hover { color: #fff; }
.topnav .vhod { font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,.28); padding: 11px 20px; }
.topnav .vhod:hover { border-color: #fff; }

/* Хлебные крошки */
.breadcrumbs { background: #101014; }
.breadcrumbs .wrap { padding-top: 0; padding-bottom: 14px; font: 500 12px/1 'Manrope', sans-serif; color: rgba(255,255,255,.4); }
.breadcrumbs a { color: rgba(255,255,255,.6); }

/* Первый экран */
.hero { background: #101014; color: #fff; position: relative; overflow: hidden; }
.hero .wrap { padding-top: 70px; padding-bottom: 84px; position: relative; }
.eyebrow { font: 700 11px/1.4 'JetBrains Mono', monospace; letter-spacing: .16em; color: #FF6A1A; margin-bottom: 24px; }
.hero h1 { font: 800 54px/1.08 'Manrope', sans-serif; letter-spacing: -.03em; margin: 0 0 24px; max-width: 860px; text-wrap: pretty; }
.hero .lead { font: 500 19px/1.6 'Manrope', sans-serif; color: rgba(255,255,255,.68); max-width: 660px; margin: 0 0 36px; text-wrap: pretty; }
.cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-main { font: 800 16px/1 'Manrope', sans-serif; color: #101014; background: #FF6A1A; padding: 19px 34px; display: inline-block; }
.btn-main:hover { background: #ff8340; color: #101014; }
.btn-ghost { font: 700 16px/1 'Manrope', sans-serif; color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 18px 30px; display: inline-block; }
.btn-ghost:hover { border-color: #fff; color: #fff; }
.hero .decor { position: absolute; bottom: 0; right: -30px; height: 45%; display: flex; gap: 22px; }
.hero .decor i { width: 34px; transform: skewX(30deg); display: block; }

/* Заголовок раздела — скошенная плашка, как на главной */
.sec { padding-top: 74px; padding-bottom: 74px; background: #fff; }
.sec.grey { background: #f4f4f6; }
.sechead { display: flex; align-items: stretch; gap: 10px; margin-bottom: 40px; }
.sechead .plate { flex: 1; min-width: 0; margin-left: 14px; background: #FF6A1A; transform: skewX(30deg); display: flex; align-items: center; }
.sechead .inner { transform: skewX(-30deg); padding: 6px 26px; display: flex; align-items: center; gap: 14px; max-width: 100%; }
.sechead .no { font: 800 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: rgba(16,16,20,.6); }
.sechead h2 { font: 800 22px/1.2 'Manrope', sans-serif; letter-spacing: -.02em; color: #101014; margin: 0; min-width: 0; }
.sechead i { flex: none; width: 26px; background: #FF6A1A; transform: skewX(30deg); }

/* Карточки возможностей */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card { background: #fff; border: 1px solid rgba(16,16,20,.1); padding: 26px 28px; display: flex; gap: 20px; align-items: flex-start; }
.sec.grey .card { background: #fff; }
.card .n { flex: none; width: 44px; height: 44px; background: #101014; display: flex; align-items: center; justify-content: center; font: 800 15px/1 'JetBrains Mono', monospace; color: #FF6A1A; }
.card h3 { font: 800 17px/1.3 'Manrope', sans-serif; color: #101014; margin: 0 0 8px; }
.card p { font: 500 14px/1.55 'Manrope', sans-serif; color: rgba(16,16,20,.62); margin: 0; text-wrap: pretty; }

/* Простой текстовый блок */
.prose p { font: 500 16px/1.7 'Manrope', sans-serif; color: rgba(16,16,20,.72); max-width: 760px; text-wrap: pretty; }
.prose h3 { font: 800 20px/1.3 'Manrope', sans-serif; color: #101014; margin: 30px 0 10px; }
.prose ul { margin: 0 0 6px; padding-left: 20px; }
.prose li { font: 500 16px/1.7 'Manrope', sans-serif; color: rgba(16,16,20,.72); margin-bottom: 4px; }

/* Заявка */
.demo { background: #101014; color: #fff; }
.demo .wrap { padding-top: 70px; padding-bottom: 70px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.demo h2 { font: 800 34px/1.15 'Manrope', sans-serif; letter-spacing: -.02em; margin: 0 0 14px; max-width: 520px; text-wrap: pretty; }
.demo .sub { font: 500 16px/1.6 'Manrope', sans-serif; color: rgba(255,255,255,.6); max-width: 460px; }
.form { display: flex; flex-direction: column; gap: 10px; flex: none; width: 360px; max-width: 100%; }
.form input { width: 100%; font: 500 15px/1.2 'Manrope', sans-serif; padding: 13px 14px; border: 0; background: rgba(255,255,255,.08); color: #fff; outline: none; }
.form input::placeholder { color: rgba(255,255,255,.45); }
.form button { width: 100%; font: 800 16px/1 'Manrope', sans-serif; color: #101014; background: #FF6A1A; border: 0; padding: 18px; cursor: pointer; }
.form button:hover { background: #ff8340; }
.form .res { font: 500 13px/1.5 'Manrope', sans-serif; color: rgba(255,255,255,.55); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Подвал */
.foot { background: #101014; }
.foot .wrap { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; padding-bottom: 22px; font: 500 13px/1.6 'Manrope', sans-serif; color: rgba(255,255,255,.35); }
.foot a { color: rgba(255,255,255,.5); }

@media (max-width: 900px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: 34px; }
  .hero .lead { font-size: 17px; }
  .cards { grid-template-columns: 1fr; }
  .demo .wrap { flex-direction: column; align-items: stretch; }
  .form { width: 100%; }
  .sec { padding-top: 48px; padding-bottom: 48px; }
  .hero .decor { display: none; }
  /* На телефоне шапка складывается в две строки: логотип сверху, ссылки под ним. Иначе
     ссылки наезжают на логотип — их три, и в одну строку шириной 375 px они не помещаются. */
  .top .wrap { flex-wrap: wrap; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  .topnav { width: 100%; gap: 14px; }
  .topnav .vhod { margin-left: auto; padding: 9px 16px; }
  .demo h2 { font-size: 26px; }
}