/* ORAQ — страница /developers/ (лендинг для застройщиков).
   Подключается только к этой странице, вторым листом после /assets/oraq.css.

   Два правила, по которым лист устроен именно так:

   1. Своей палитры здесь нет. Лендинг жил отдельным файлом и носил собственные
      имена переменных (--paper, --accent, --line) при тех же значениях цвета,
      что и у сайта. Имена сведены к токенам oraq.css: при смене палитры страница
      меняется вместе с сайтом, а не остаётся в прежней гамме.

   2. Каждый селектор начинается с .dev — обёртки вокруг тела страницы. Имена
      .card, .btn, .eyebrow заняты в oraq.css, и без обёртки чужие правила
      достались бы лендингу молча: у кнопки появился бы верхний отступ, у
      надзаголовка — нижний. Обёртка поднимает вес правил страницы над общими.

   Геометрия скруглений остаётся местной: она есть только у этой страницы. */

:root {
  --radius-card:  16px;
  --radius-btn:   12px;
  --radius-block: 20px;
}

/* ── ОСНОВА ── */
.dev { font-size: 17px; line-height: 1.6; }
.dev a { color: inherit; }

/* ── ХЛЕБНЫЕ КРОШКИ НА ТЁМНОМ ──
   Крошки собирает общий шаблон, и по умолчанию они стоят на светлом фоне
   страницы. Здесь между тёмной шапкой и тёмным первым экраном светлая полоса
   читается как разрыв вёрстки, поэтому цепочка продолжает тёмный верх.
   Правило живёт в этом листе: он подключён только к /developers/.
   Фон нужен во всю ширину экрана, поэтому ограничение по ширине снимается с
   самой полосы и переносится внутрь, на цепочку: иначе на широком мониторе
   тёмная полоса оказалась бы короче экрана и по краям остались бы светлые поля. */
.crumbs { background: var(--hero-bg); color: var(--hero-muted); max-width: none; padding: 84px 0 16px; }
.crumbs nav { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.crumbs a { color: var(--silver); }
.crumbs a:hover { color: var(--hero-ink); }
.crumbs li::after { color: var(--hero-line); }
.crumbs [aria-current] { color: var(--hero-muted); }
@media (max-width: 860px) { .crumbs nav { padding: 0 20px; } }

/* ── ТИП-ШКАЛА ── */
.dev h1 { font-size: clamp(40px, 5.5vw, 72px); font-weight: 300; line-height: 1.04; letter-spacing: 0; }
.dev h2 { font-size: clamp(30px, 3.8vw, 44px); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }
.dev h3 { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.dev .lead { font-size: 19px; font-weight: 400; line-height: 1.5; color: var(--muted); max-width: 65ch; }
.dev .lead-strong { color: var(--ink); font-weight: 500; }
.dev .eyebrow {
  font-family: "Jost", sans-serif; font-size: 12px; font-weight: 500; line-height: 1.3;
  letter-spacing: .22em; text-transform: uppercase; color: var(--primary);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 0;
}
.dev .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--primary); display: inline-block; flex: none; }
.dev .num { font-variant-numeric: tabular-nums; }
/* Красная строка — только связный текст абзацами.
   Заголовки, лиды, списки, лейблы, кнопки и подвал — без отступа. */
.dev .card p, .dev .numc .l, .dev .ba-note, .dev .para, .dev .final p { text-indent: 1.5em; }
.dev .para-next { margin-top: 24px; }

/* ── СЕТКА ── */
.dev section { padding: 112px 0; position: relative; display: flex; flex-direction: column; justify-content: center; }
.dev .sec-head { max-width: 65ch; margin-bottom: 64px; }
.dev .sec-head h2 { margin-top: 16px; }
.dev .alt { background: var(--surface); }

/* ── КНОПКИ ── */
.dev .btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--primary); color: var(--hero-ink);
  font-family: "Inter", -apple-system, sans-serif; font-weight: 600; font-size: 16px;
  padding: 16px 28px; border-radius: var(--radius-btn); margin-top: 0;
  transition: background .2s, transform .2s;
}
.dev .btn:hover { background: var(--primary-dark); transform: translateY(-2px); }
.dev .btn.ghost { background: transparent; color: var(--hero-ink); border: 1px solid var(--hero-line); }
.dev .btn.ghost:hover { background: rgba(var(--primary-rgb), .12); border-color: var(--primary); }

/* ── КАРТОЧКИ ── */
.dev .grid { display: grid; gap: 24px; }
.dev .g2 { grid-template-columns: repeat(2, 1fr); }
.dev .card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 32px; display: flex; flex-direction: column; gap: 16px; overflow: visible;
  transition: transform .25s, border-color .25s;
}
.dev .alt .card { background: var(--bg); }
.dev .card:hover { transform: translateY(-4px); border-color: var(--primary); }
.dev .card h3 { font-size: 19px; }
.dev .card p { color: var(--muted); font-size: 16px; }
/* Прятать блоки можно только когда скрипт жив и сможет их показать.
   Страницу открывают из мессенджера и почты, где скрипты часто выключены:
   без метки .js она осталась бы пустой ниже первого экрана. */
.js .dev .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .dev .reveal.in { opacity: 1; transform: none; }
.dev .final-line { margin-top: 40px; font-family: "Jost", sans-serif; font-size: 22px; font-weight: 400; line-height: 1.45; color: var(--ink); }

/* ── HERO ── */
/* Фоновое видео первого экрана: приглушено плёнкой, поверх — затемнение и сетка */
.dev .hero-video {
  position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; opacity: .6; filter: saturate(.5) contrast(1.06) brightness(.85);
}
.dev .hero-video::-webkit-media-controls { display: none; }
/* Тёмная вуаль слева: текст читается поверх кадра */
.dev .hero-scrim {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--hero-rgb), .83) 0%, rgba(var(--hero-rgb), .70) 42%, rgba(var(--hero-rgb), .22) 100%);
}
.dev .hero {
  min-height: 100svh; background: var(--hero-bg); color: var(--hero-ink);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden; isolation: isolate;
}
.dev .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse 120% 90% at 78% 8%, var(--hero-lift), transparent 62%),
              radial-gradient(ellipse 90% 80% at 8% 96%, var(--hero-lift), transparent 58%);
}
.dev .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--hero-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 68% 42%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 80% at 68% 42%, #000 10%, transparent 78%);
}
.dev .hero .wrap { max-width: 760px; }
.dev .hero h1 { margin: 24px 0; color: var(--hero-ink); }
.dev .hero .lead { color: var(--hero-muted); }
.dev .cta-row { display: flex; gap: 16px; align-items: center; margin-top: 40px; flex-wrap: wrap; }
.dev .hero-note { font-size: 14px; color: var(--hero-muted); margin-top: 24px; }

/* ── ЦИФРЫ ── */
.dev .nums { background: var(--hero-bg); color: var(--hero-ink); }
.dev .nums h2 { color: var(--hero-ink); }
/* Лейблы на тёмном — светлым тоном акцента, иначе тонут в фоне */
.dev .hero .eyebrow, .dev .nums .eyebrow, .dev .pilot .eyebrow { color: var(--silver); }
.dev .hero .eyebrow::before, .dev .nums .eyebrow::before, .dev .pilot .eyebrow::before { background: var(--silver); }
.dev .numgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dev .numc { padding: 32px; border: 1px solid var(--hero-line); border-radius: var(--radius-card); background: rgba(var(--primary-rgb), .05); }
.dev .numc .v { font-family: "Jost", sans-serif; font-weight: 300; font-size: clamp(32px, 4vw, 44px); line-height: 1; letter-spacing: 0; color: var(--silver); }
.dev .numc .l { margin-top: 16px; font-size: 15px; color: var(--hero-ink); line-height: 1.45; }
.dev .foot-note { margin-top: 24px; font-size: 13px; color: rgba(var(--hero-ink-rgb), .82); max-width: 70ch; line-height: 1.5; }

/* ── БЫЛО / СТАЛО ── */
.dev .ba { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dev .ba .col { border-radius: var(--radius-block); padding: 32px; border: 1px solid var(--border); }
.dev .ba .before { background: var(--surface); }
.dev .ba .after { background: rgba(var(--primary-rgb), .06); border-color: var(--primary); }
.dev .ba .tag {
  font-family: "Jost", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; margin-bottom: 24px; display: inline-block;
}
.dev .ba .before .tag { color: var(--muted); }
.dev .ba .after .tag { color: var(--primary); }
.dev .chain { display: flex; flex-direction: column; gap: 12px; }
.dev .chain span { font-weight: 500; font-size: 17px; display: flex; align-items: center; gap: 12px; }
.dev .chain span::before { content: "→"; color: var(--primary); }
.dev .chain span:first-child::before { content: "•"; color: var(--muted); }
.dev .ba-note { margin-top: 24px; color: var(--muted); max-width: 70ch; }

/* ── ЦЕПОЧКИ ── */
.dev .chips { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.dev .chip { font-weight: 500; font-size: 16px; padding: 12px 18px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); }
.dev .alt .chip { background: var(--bg); }
.dev .chip-arrow { color: var(--primary); }
.dev ul.clean { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.dev ul.clean li { position: relative; padding-left: 24px; color: var(--muted); font-size: 16px; max-width: 65ch; }
.dev ul.clean li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.dev .principle {
  margin-top: 40px; padding: 24px; border-left: 2px solid var(--primary);
  background: rgba(var(--primary-rgb), .06); border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
  font-family: "Jost", sans-serif; font-weight: 400; font-size: 19px; line-height: 1.45;
}

/* ── ПИЛОТ ── */
.dev .pilot {
  position: relative; border-radius: var(--radius-block); overflow: hidden; color: var(--hero-ink);
  padding: 64px; background: var(--hero-bg); border: 1px solid var(--hero-line);
}
.dev .pilot::after {
  content: ""; position: absolute; top: -40%; right: -10%; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(var(--primary-rgb), .28), transparent 62%);
}
.dev .pilot h2 { color: var(--hero-ink); position: relative; margin-top: 16px; }
.dev .pilot .eyebrow { position: relative; }
.dev .pilot .chips { position: relative; margin: 24px 0; }
.dev .pilot .chip { background: rgba(var(--primary-rgb), .08); border-color: var(--hero-line); color: var(--hero-ink); }
.dev .pilot ul.clean { position: relative; }
.dev .pilot ul.clean li { color: var(--hero-muted); }
.dev .pilot .btn { position: relative; margin-top: 40px; }
/* Две кнопки рядом: обсудить пилот и получить документ. Верхний отступ живёт на
   ряду, а не на каждой кнопке — иначе при переносе на телефоне между ними
   встанет лишние 40 px. */
.dev .pilot-cta { position: relative; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 40px; }
.dev .pilot-cta .btn { margin-top: 0; }
.dev .pilot-note { position: relative; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--hero-muted); max-width: 60ch; }

/* ── ФИНАЛ ── */
.dev .final { background: var(--hero-bg); color: var(--hero-ink); text-align: center; }
.dev .final h2 { color: var(--hero-ink); max-width: 20ch; margin: 0 auto; }
.dev .final .brand {
  margin-top: 40px; font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: .22em;
  font-size: 13px; text-transform: uppercase; color: var(--primary);
}
.dev .final p { color: var(--hero-muted); max-width: 56ch; margin: 16px auto 40px; }

/* ── КНОПКА НА ТЕЛЕФОНЕ ── */
.dev .mobcta {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface);
  border-top: 1px solid var(--border); padding: 12px 16px; display: none; z-index: 50;
}
.dev .mobcta a {
  display: flex; justify-content: center; background: var(--primary); color: var(--hero-ink);
  font-weight: 600; padding: 16px; border-radius: var(--radius-btn);
}

@media (prefers-reduced-motion: reduce) {
  .js .dev .reveal { opacity: 1; transform: none; transition: none; }
  .dev .btn { transition: none; }
}
@media (max-width: 900px) {
  .dev .numgrid { grid-template-columns: 1fr; }
  .dev .ba { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dev { font-size: 16px; }
  .dev section { padding: 56px 0; }
  .dev .sec-head { margin-bottom: 40px; }
  .dev .g2 { grid-template-columns: 1fr; }
  .dev .pilot { padding: 40px 24px; }
  .dev .ba .col { padding: 24px; }
  .dev .mobcta { display: block; }
  /* Кнопка на телефоне закреплена у нижнего края и накрывает подвал —
     подвал отступает на её высоту, иначе реквизиты уходят под кнопку. */
  footer { padding-bottom: 90px; }
}