/* Room — лендинг. Главный элемент — демо в первом экране: имена скрыты плашками
   у участника и открыты у администратора. Всё остальное намеренно тихое. */

:root {
  --paper: #E7ECF1;       /* фон: холодная бумага */
  --sheet: #F6F8FA;       /* поверхности: чат, тарифы */
  --ink: #17202A;         /* текст и плашки-скрытия */
  --slate: #586473;       /* второстепенный текст */
  --line: #C9D2DB;        /* границы */
  --signal: #2A6FD6;      /* действие: ссылки, кнопки */
  --signal-ink: #FFFFFF;
  --marker: #F3D34A;      /* «раскрытое» имя у администратора */
  --hold: #B9442F;        /* сообщение на проверке */
  --mine: #DCE8F7;        /* своё сообщение */

  --display: "Tektur", "Onest", system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121820;
    --sheet: #1A222C;
    --ink: #E6ECF2;
    --slate: #9AA7B5;
    --line: #2C3744;
    --signal: #5B9BF0;
    --signal-ink: #0E1520;
    --marker: #E2C23A;
    --hold: #E07A62;
    --mine: #203247;
  }
}

/* Языки: показываем только текущий (html[lang] ставится до отрисовки). */
html[lang="ru"] [data-l="en"],
html[lang="en"] [data-l="ru"] { display: none; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.55 var(--body);
  font-feature-settings: "kern", "liga";
}

h1, h2, h3 { margin: 0; font-weight: 700; }
h1, h2 { font-family: var(--display); letter-spacing: -0.01em; }
h2 { font-size: var(--step-2); line-height: 1.15; margin-bottom: 1.5rem; }
h3 { font-size: var(--step-1); line-height: 1.25; font-weight: 600; }
p { margin: 0; }
code {
  font: 500 0.92em/1 var(--body);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  padding: 0.12em 0.35em;
  border-radius: 4px;
  white-space: nowrap;
}

a { color: var(--signal); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -999px; top: 0.5rem;
  background: var(--ink); color: var(--paper); padding: 0.5rem 0.75rem; z-index: 10;
}
.skip:focus { left: 0.5rem; }

/* ---- Шапка ---- */

.top {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--ink); text-decoration: none;
  font: 700 1.375rem/1 var(--display);
}
.brand-mark { width: 30px; height: 30px; }
.brand-mark rect:first-child { fill: var(--signal); }
.brand-mark .bar { fill: var(--ink); }
.top-nav { display: flex; gap: 1.25rem; margin-left: auto; }
.top-nav a { color: var(--slate); text-decoration: none; font-size: var(--step--1); }
.top-nav a:hover { color: var(--ink); }

.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lang button {
  font: 600 var(--step--1)/1 var(--body);
  color: var(--slate); background: transparent; border: 0;
  padding: 0.5rem 0.65rem; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

@media (max-width: 760px) {
  .top-nav { display: none; }
  .lang { margin-left: auto; }
}

/* ---- Общая сетка секций ---- */

main > section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) 0;
}

/* ---- Первый экран ---- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start; /* демо растёт вниз при переключении — текст не прыгает */
}
.hero { padding-top: clamp(1.5rem, 4vw, 3.5rem); }
.hero-text { padding-top: clamp(0rem, 2vw, 1.5rem); }
.hero h1 { font-size: var(--step-3); line-height: 1.06; max-width: 15ch; }
.lead { margin-top: 1.25rem; font-size: var(--step-1); line-height: 1.5; color: var(--slate); max-width: 34rem; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.note { margin-top: 1rem; font-size: var(--step--1); color: var(--slate); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.75rem 1.25rem;
  border-radius: 10px; font-weight: 600; text-decoration: none;
  border: 2px solid transparent;
}
.btn-main { background: var(--signal); color: var(--signal-ink); }
.btn-main:hover { background: color-mix(in srgb, var(--signal) 86%, var(--ink)); }
.btn-quiet { color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--ink); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}

/* ---- Демо ---- */

.demo { margin: 0; }
.demo-switch {
  display: inline-flex; gap: 0.25rem; padding: 0.25rem;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: 12px; margin-bottom: 0.875rem;
  max-width: 100%;
}
.demo-switch button {
  font: 600 var(--step--1)/1.2 var(--body);
  color: var(--slate); background: transparent;
  border: 0; border-radius: 9px; padding: 0.6rem 0.9rem; cursor: pointer;
}
.demo-switch button[aria-selected="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 0 var(--line); }

.chat {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.chat-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line);
}
.chat-title { font-weight: 600; }
.chat-where { font-size: var(--step--1); color: var(--slate); }

.msgs { list-style: none; margin: 0; padding: 1rem; display: grid; gap: 0.75rem; }
.msg {
  max-width: 88%;
  padding: 0.65rem 0.85rem;
  border-radius: 4px 14px 14px 14px;
  background: var(--paper);
}
.msg-mine { justify-self: end; background: var(--mine); border-radius: 14px 4px 14px 14px; }
.msg-staff { border-left: 3px solid var(--signal); }
.who { font-size: var(--step--1); font-weight: 600; margin-bottom: 0.2rem; position: relative; }

/* Участник: подпись — номер, а имя закрыто плашкой. Администратор: плашка
   уходит, под ней — настоящее имя, подсвеченное маркером. */
.who .alias { color: var(--signal); }
.who .real {
  display: inline-block; margin-left: 0.4rem; padding: 0 0.3rem;
  border-radius: 3px; color: transparent; background: var(--ink);
  user-select: none;
  transition: background-color 280ms ease, color 280ms ease;
}
.demo[data-view="admin"] .who .real { color: var(--ink); background: var(--marker); user-select: text; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo[data-view="admin"] .who .real { color: #17202A; }
}
.demo[data-view="member"] .msg-mine .who .real { display: none; }

.msg-pending { border: 1px dashed var(--hold); background: color-mix(in srgb, var(--hold) 7%, var(--paper)); }
.flag { font-size: var(--step--1); color: var(--hold); margin-bottom: 0.25rem; }
.mod { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.mod-btn {
  font-size: var(--step--1); padding: 0.3rem 0.6rem; border-radius: 7px;
  background: var(--sheet); border: 1px solid var(--line);
}

.demo[data-view="member"] .for-admin,
.demo[data-view="admin"] .for-member { display: none; }

figcaption { margin-top: 0.75rem; font-size: var(--step--1); color: var(--slate); max-width: 38rem; }

@media (prefers-reduced-motion: reduce) {
  .who .real { transition: none; }
}

/* ---- Как это работает (последовательность — поэтому номера) ---- */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem;
  counter-reset: step;
}
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 1rem; }
.steps li::before {
  content: counter(step);
  display: block; font: 700 var(--step-2)/1 var(--display); color: var(--signal);
  margin-bottom: 0.75rem;
}
.steps h3 { margin-bottom: 0.4rem; }
.steps p { color: var(--slate); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---- Две стороны ---- */

.sides { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.side { padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--sheet); }
.side-admin { background: var(--ink); color: var(--paper); }
.side.side-admin dd { color: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.side-admin code { background: color-mix(in srgb, var(--paper) 14%, transparent); }
.side h3 { font-family: var(--display); font-size: var(--step-2); font-weight: 500; margin-bottom: 1.25rem; }
.side dl { margin: 0; }
.side dt { font-weight: 600; }
.side dd { margin: 0.2rem 0 1.25rem; color: var(--slate); max-width: 34rem; }
.side dd:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .sides { grid-template-columns: 1fr; } }

/* ---- Для кого ---- */

.use-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.use-list h3 { margin-bottom: 0.4rem; }
.use-list p { color: var(--slate); }
@media (max-width: 760px) { .use-list { grid-template-columns: 1fr; } }

/* ---- Тарифы ---- */

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.plan { background: var(--sheet); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.25rem, 3vw, 2rem); }
.plan-pro { border: 2px solid var(--signal); }
.plan h3 { font-family: var(--display); font-size: var(--step-2); font-weight: 500; }
.price { margin: 0.5rem 0 1.25rem; font-size: var(--step-1); font-weight: 600; }
.price-alt { display: block; margin-top: 0.3rem; font-size: var(--step-0); font-weight: 400; color: var(--slate); }
.plan ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.plan li::marker { color: var(--signal); }
.pricing-note { margin-top: 1.25rem; color: var(--slate); max-width: 44rem; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* ---- Вопросы ---- */

.faq details { border-top: 1px solid var(--line); max-width: 48rem; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 600; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 1.45rem;
  width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate);
  transform: rotate(45deg); transition: transform 160ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq details p { padding: 0 0 1.1rem; color: var(--slate); max-width: 42rem; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---- Финал и подвал ---- */

.final { text-align: left; }
.final h2 { margin-bottom: 0.5rem; }
.final p { color: var(--slate); margin-bottom: 1.5rem; }

.foot {
  max-width: var(--max); margin: clamp(3rem, 7vw, 5.5rem) auto 0;
  padding: 1.5rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between;
  font-size: var(--step--1); color: var(--slate);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }