:root {
    --paper:      #FAFAF7;
    --surface:    #FFFFFF;
    --stone:      #EEF0EC;
    --ink:        #101820;
    --muted:      #5A625C;
    --faint:      #7C8479;
    --line:       #E3E6E0;
    --line-2:     #C9D1C8;
    --accent:     #0B7A5E;
    --accent-ink: #FFFFFF;
    --accent-bg:  #F3F8F6;
    --accent-ln:  #CFE0DA;
    --dark:       #101820;
    --dark-ink:   #F2F4F0;
    --dark-mute:  #9BA6A0;
    --dark-tile:  #14202A;
    --dark-line:  #22303B;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper:      #0E1412;
      --surface:    #151C19;
      --stone:      #1A211D;
      --ink:        #E9EDE8;
      --muted:      #99A39B;
      --faint:      #808A82;
      --line:       #242C28;
      --line-2:     #303A34;
      --accent:     #4FB393;
      --accent-ink: #06201A;
      --accent-bg:  #12231E;
      --accent-ln:  #1E3A31;
      --dark:       #0A0F0D;
      --dark-ink:   #E9EDE8;
      --dark-mute:  #8E9A93;
      --dark-tile:  #111917;
      --dark-line:  #1D2723;
    }
  }
  :root[data-theme="dark"] {
    --paper:      #0E1412;
    --surface:    #151C19;
    --stone:      #1A211D;
    --ink:        #E9EDE8;
    --muted:      #99A39B;
    --faint:      #808A82;
    --line:       #242C28;
    --line-2:     #303A34;
    --accent:     #4FB393;
    --accent-ink: #06201A;
    --accent-bg:  #12231E;
    --accent-ln:  #1E3A31;
    --dark:       #0A0F0D;
    --dark-ink:   #E9EDE8;
    --dark-mute:  #8E9A93;
    --dark-tile:  #111917;
    --dark-line:  #1D2723;
  }

  /* Алиасы для виджета Ивана: он ищет именно эти имена и подхватывает нашу палитру. */
  :root, :root[data-theme="dark"] { --emerald: var(--accent); --line-strong: var(--line-2); --white: var(--surface); }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Onest', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
  }
  a { color: inherit; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.03em; font-weight: 800; }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); }
  .lbl {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; font-weight: 500; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--accent);
  }
  .lbl.q { color: var(--faint); }
  .sec { padding: clamp(34px, 4vw, 54px) 0; border-top: 1px solid var(--line); }
  .sec > .wrap > .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: 22px; }
  .sec h2 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 10px; }
  .sec .head p { margin: 0; font-size: 15px; color: var(--faint); max-width: 44ch; }

  /* ---------- шапка ---------- */
  .bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .brand { display: flex; align-items: baseline; gap: 12px; }
  .brand b { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
  .brand span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint); letter-spacing: 0.06em; }
  .menu { display: flex; gap: 22px; align-items: center; font-size: 14px; font-weight: 500; color: var(--muted); flex-wrap: wrap; }
  .menu a { text-decoration: none; }
  .menu a:hover { color: var(--accent); }
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--accent-ink);
    padding: 12px 22px; font-size: 14px; font-weight: 600; text-decoration: none;
    border: 1px solid var(--accent);
  }
  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
  .btn.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .btn:hover { opacity: 0.88; }

  /* ---------- первый экран ---------- */
  .hero { display: grid; grid-template-columns: 1.5fr 0.95fr; gap: clamp(24px, 3.5vw, 52px); align-items: center; padding: clamp(22px, 2.5vw, 40px) 0 clamp(22px, 2.5vw, 36px); }
  .hero h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.05; margin-bottom: 16px; }
  .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
  .tags span { border: 1px solid var(--line-2); padding: 6px 13px; font-size: 13px; font-weight: 500; color: var(--muted); }
  .hero p.lead { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0 0 14px; max-width: 58ch; }
  .hero p.reg { font-size: 13.5px; line-height: 1.6; color: var(--faint); margin: 0 0 22px; max-width: 58ch; }
  .hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
  .photo { background: var(--stone); min-height: 240px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--faint); font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em; }
  .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 4px; }
  .nums div { background: var(--paper); padding: 18px 22px; display: flex; align-items: baseline; gap: 12px; }
  .nums b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .nums small { font-size: 13px; color: var(--faint); line-height: 1.4; }

  .brands { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
  .brands .lbl { white-space: nowrap; }
  .brands ul { list-style: none; display: flex; gap: 26px; flex-wrap: wrap; margin: 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--muted); }

  /* ---------- сетки ---------- */
  .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  @media (max-width: 1000px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 900px) { .grid2, .hero { grid-template-columns: 1fr; } }
  @media (max-width: 700px) { .grid3 { grid-template-columns: 1fr; } }
  @media (max-width: 620px) { .nums { grid-template-columns: 1fr; } }

  .card { border: 1px solid var(--line); background: var(--surface); padding: 22px 22px; display: flex; flex-direction: column; gap: 12px; }
  .card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
  .card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
  .card .foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; color: var(--faint); }
  .card .foot b { color: var(--accent); font-size: 14.5px; }
  .card.lead-card { border-color: var(--accent); }
  .card .more-link { font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
  .card .more-link:hover { text-decoration: underline; }

  /* ---------- материалы бота ---------- */
  .mat { position: relative; }
  .mat h3 { font-size: 17px; line-height: 1.32; font-weight: 700; letter-spacing: -0.01em; }
  .mat .kind { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
  .mat.soon .kind { color: var(--faint); }
  .mat.soon { background: transparent; border-style: dashed; }
  .mat a.get { text-decoration: none; font-weight: 600; color: var(--accent); }
  .mat a.get:hover { text-decoration: underline; }
  .mat .wait { font-weight: 600; color: var(--faint); }
  .gate { margin-top: 18px; font-size: 13.5px; color: var(--faint); display: flex; gap: 10px; align-items: baseline; }
  .gate b { color: var(--ink); font-weight: 600; }

  /* ---------- пресса ---------- */
  .press { display: flex; flex-direction: column; }
  .press a.row {
    display: grid; grid-template-columns: 132px 1fr 168px; gap: 22px; align-items: baseline;
    padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none;
  }
  .press a.row:last-child { border-bottom: 1px solid var(--line); }
  .press a.row:hover .ttl { color: var(--accent); }
  .press .src { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .press .ttl { font-size: 16px; font-weight: 500; line-height: 1.4; }
  .press .ttl em { font-style: normal; display: block; font-size: 13px; color: var(--faint); margin-top: 4px; }
  .press .when { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
  @media (max-width: 760px) {
    .press a.row { grid-template-columns: 1fr; gap: 6px; }
    .press .when { text-align: left; }
  }

  /* ---------- видео ---------- */
  .vid { display: flex; flex-direction: column; gap: 10px; text-decoration: none; border: 1px solid var(--line); background: var(--surface); padding: 22px 22px; }
  .vid:hover { border-color: var(--accent); }
  .vid .who { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }
  .vid h3 { font-size: 16.5px; font-weight: 700; line-height: 1.35; }
  .vid p { margin: 0; font-size: 13.5px; color: var(--muted); }
  .vid .when { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--faint); margin-top: auto; padding-top: 12px; }

  .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .links a { display: inline-flex; gap: 8px; align-items: baseline; border: 1px solid var(--line-2); padding: 11px 18px; font-size: 14px; font-weight: 500; text-decoration: none; }
  .links a:hover { border-color: var(--accent); color: var(--accent); }
  .links a b { font-weight: 600; }
  .links a span { color: var(--faint); font-family: 'IBM Plex Mono', monospace; font-size: 12px; }

  /* ---------- тёмные блоки ---------- */
  .band { background: var(--dark); color: var(--dark-ink); }
  .band .wrap { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
  .band h2 { font-size: clamp(24px, 3vw, 32px); margin: 14px 0 14px; }
  .band p { color: var(--dark-mute); font-size: 16px; line-height: 1.65; max-width: 54ch; margin: 0 0 22px; }
  .band .lbl { color: var(--accent); }
  .band .split { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
  @media (max-width: 900px) { .band .split { grid-template-columns: 1fr; } }
  .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--dark-line); border: 1px solid var(--dark-line); }
  .tiles div { background: var(--dark-tile); padding: 24px 26px; }
  .tiles b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .tiles small { display: block; font-size: 13px; color: var(--dark-mute); margin-top: 6px; line-height: 1.45; }
  .band .btn.ghost { color: var(--dark-ink); border-color: var(--dark-line); }

  /* ---------- выступления ---------- */
  .talks { display: flex; flex-direction: column; }
  .talks .row { display: grid; grid-template-columns: 1.5fr 1fr 96px; gap: 22px; padding: 17px 0; border-top: 1px solid var(--line); align-items: baseline; }
  .talks .row:last-child { border-bottom: 1px solid var(--line); }
  .talks .row b { font-size: 15.5px; font-weight: 600; }
  .talks .row span { font-size: 13.5px; color: var(--faint); }
  .talks .row i { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--faint); text-align: right; }
  @media (max-width: 760px) { .talks .row { grid-template-columns: 1fr; gap: 5px; } .talks .row i { text-align: left; } }

  /* ---------- команда, вопросы, подвал ---------- */
  .about { display: grid; grid-template-columns: 1.15fr 1.35fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
  @media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
  .about .q { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 16px; }
  .about p { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0 0 22px; }
  .about .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; }
  .about .row b { display: block; font-size: 23px; font-weight: 800; letter-spacing: -0.03em; }
  @media (max-width: 620px) { .about .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .about .row small { font-size: 12.5px; color: var(--faint); }

  .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 52px; }
  @media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }
  .faq details { border-top: 1px solid var(--line); padding: 16px 0; }
  .faq summary { cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; color: var(--accent); font-weight: 700; }
  .faq details[open] summary::after { content: "\2212"; }
  .faq p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; }

  .end { background: var(--dark); color: var(--dark-ink); }
  .end .wrap { padding: clamp(34px, 3.5vw, 52px) clamp(20px, 4vw, 64px); display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
  .end h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 12px; }
  .end p { color: var(--dark-mute); font-size: 16px; max-width: 52ch; margin: 0; }
  .end .btn.ghost { color: var(--dark-ink); border-color: var(--dark-line); }
  .foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 0; font-size: 13px; color: var(--faint); }

  img.photo { width: 100%; height: auto; border: 1px solid var(--line); display: block; }

  /* Галерея колонками: каждый кадр сохраняет свои пропорции, ничего не режется. */
  /* Две колонки, а не три: кадры со сцены горизонтальные, вертикальные выше,
     и при трёх колонках раскладка оставляла пустую дыру. */
  .shots { columns: 3; column-gap: 16px; }
  @media (max-width: 1000px) { .shots { columns: 2; } }
  @media (max-width: 640px) { .shots { columns: 1; } }
  .shot { margin: 0 0 16px; border: 1px solid var(--line); background: var(--surface); break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%; }
  .shot img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--line); }
  .shot figcaption { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
  .shot .geo { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
  .shot b { font-size: 15.5px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
  .shot em { font-style: normal; font-size: 13px; line-height: 1.5; color: var(--faint); }

  .teamshot { margin: 0; }
  .teamshot figcaption { margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--faint); }

  /* --- сноски и источники --- */
  .brands + .note, p.note { margin: 12px 0 0; font-size: 12.5px; color: var(--faint); }
  .band p.src a { color: var(--accent); }
  .band p.src { margin: 18px 0 0; font-size: 12.5px; color: var(--dark-mute); font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.03em; }

  /* --- свёрнутый список выступлений --- */
  details.more { margin-top: 18px; }
  details.more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--accent); padding: 10px 0; }
  details.more summary::-webkit-details-marker { display: none; }
  details.more summary::after { content: "\2193"; }
  details.more[open] summary::after { content: "\2191"; }
  .shotswrap { margin-top: 34px; }

  /* --- форма --- */
  .leadgrid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; }
  @media (max-width: 900px) { .leadgrid { grid-template-columns: 1fr; } }
  #leadform { border: 1px solid var(--line); background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
  #leadform .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 620px) { #leadform .f2 { grid-template-columns: 1fr; } }
  #leadform label { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
  #leadform .lrow { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  #leadform .opt { font-weight: 400; color: var(--faint); }
  #leadform input, #leadform textarea {
    font: 15px/1.5 'Onest', system-ui, sans-serif; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line-2); padding: 12px 14px; width: 100%; resize: vertical;
  }
  #leadform input::placeholder, #leadform textarea::placeholder { color: var(--faint); }
  #leadform input:focus, #leadform textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
  #leadform input.bad, #leadform textarea.bad { border-color: #B4452F; }
  .fbtn { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  #leadform button { font-family: 'Onest', system-ui, sans-serif; cursor: pointer; border: 1px solid var(--accent); }
  #leadform button[disabled] { opacity: 0.6; cursor: default; }
  .hint { font-size: 13px; color: var(--faint); max-width: 34ch; }
  .hint.done { color: var(--accent); font-weight: 600; }
  .hint.fail { color: #B4452F; }
  .leadside { border: 1px solid var(--line); background: var(--accent-bg); padding: 26px; display: flex; flex-direction: column; gap: 6px; }
  .leadside .links { margin-top: 12px; flex-direction: column; align-items: stretch; }
  .leadside .links a { background: var(--surface); justify-content: space-between; }
  .leadnote { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

  /* --- меню на телефоне: одна строка со сдвигом --- */
  @media (max-width: 760px) {
    .bar { flex-wrap: nowrap; gap: 12px; }
    .menu { overflow-x: auto; flex-wrap: nowrap; gap: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .menu::-webkit-scrollbar { display: none; }
    .menu a.btn { white-space: nowrap; padding: 10px 16px; }
    .brand span { display: none; }
  }

  /* --- порядок работы --- */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
  @media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
  .steps li { padding: 20px 20px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
  .steps li:last-child { border-right: none; }
  .steps .num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; color: var(--accent); }
  .steps b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .steps p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); flex-grow: 1; }
  .steps em { font-style: normal; font-size: 13px; color: var(--faint); border-top: 1px solid var(--line); padding-top: 10px; }

  .startline { border-left: 3px solid var(--accent); background: var(--accent-bg); padding: 18px 22px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
  .startline p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 90ch; }

  /* --- проекты партнёров --- */
  .case { border: 1px solid var(--line); background: var(--surface); padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
  .case b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
  .case .cat { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
  .case p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

  /* --- проверяемые факты --- */
  dl.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
  @media (max-width: 860px) { dl.facts { grid-template-columns: 1fr; } }
  dl.facts > div { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; }
  @media (max-width: 560px) { dl.facts > div { grid-template-columns: 1fr; gap: 6px; } }
  dl.facts dt { font-size: 14px; font-weight: 700; }
  dl.facts dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
  dl.facts a { color: var(--accent); font-weight: 600; }

  /* --- материалы: доступные крупно, остальные строкой --- */
  .soonlist { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
  .soonlist b { font-size: 13.5px; }
  .soonlist span { font-size: 13.5px; color: var(--faint); }

  /* --- липкая полоса действия --- */
  .stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--dark); color: var(--dark-ink);
           display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px clamp(16px, 4vw, 40px);
           transform: translateY(110%); transition: transform 0.25s ease; border-top: 1px solid var(--dark-line); }
  .stick.on { transform: none; }
  /* Кнопка и окно чата Ивана прибиты к правому нижнему углу (.ivan-fab, .ivan-panel),
     поэтому на время показа полосы поднимаем их над ней. */
  body.stickon .ivan-fab, body.stickon .ivan-panel { bottom: 88px; }
  @media (max-width: 640px) { body.stickon .ivan-fab, body.stickon .ivan-panel { bottom: 82px; } }
  .stick p { margin: 0; font-size: 14.5px; color: var(--dark-mute); }
  .stick b { color: var(--dark-ink); font-weight: 600; }
  @media (prefers-reduced-motion: reduce) { .stick { transition: none; } }
  @media (max-width: 640px) { .stick p { display: none; } .stick { justify-content: center; } .stick .btn { width: 100%; } }

  /* --- крупнее области нажатия на телефоне --- */
  @media (max-width: 760px) {
    .press a.row { padding: 20px 0; }
    .vid { padding: 22px 20px; }
    .links a { padding: 14px 18px; }
  }

  .langsw { display: inline-flex; border: 1px solid var(--line-2); }
  .langsw button { font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: 0.08em; background: transparent;
                   color: var(--muted); border: none; padding: 9px 11px; cursor: pointer; }
  .langsw button.on { background: var(--ink); color: var(--paper); }
  .langsw button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  /* --- калькулятор --- */
  .calcgrid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
  @media (max-width: 900px) { .calcgrid { grid-template-columns: 1fr; } }
  .calcbox { border: 1px solid var(--line); background: var(--surface); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
  .calcbox .f3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
  @media (max-width: 620px) { .calcbox .f3 { grid-template-columns: 1fr; } }
  .calcbox label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; }
  .calcbox input, .calcbox select {
    font: 15px/1.5 'Onest', system-ui, sans-serif; color: var(--ink); background: var(--paper);
    border: 1px solid var(--line-2); padding: 12px 14px; width: 100%;
  }
  .calcbox input:focus, .calcbox select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  .calcbox button { font-family: 'Onest', system-ui, sans-serif; cursor: pointer; }
  .calcout { border: 1px solid var(--line); background: var(--accent-bg); padding: 26px; display: flex; flex-direction: column; gap: 2px; }
  .calcout .row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--accent-ln); font-size: 14px; color: var(--muted); }
  .calcout .row b { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 15px; }
  .calcout .row.total { border-bottom: none; padding-top: 14px; }
  .calcout .row.total span { color: var(--ink); font-weight: 600; }
  .calcout .row.total b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); }
  .onote { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==================== внутренние страницы ==================== */
.crumbs { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em; color: var(--faint); padding: 18px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.pagehero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(20px, 3vw, 36px); }
.pagehero h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08; margin: 10px 0 16px; }
.pagehero p.lead { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 66ch; margin: 0; }
.pagehero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.prose { max-width: 70ch; font-size: 16.5px; line-height: 1.7; }
.prose h2 { font-size: 24px; margin: 34px 0 12px; letter-spacing: -0.02em; }
.prose h3 { font-size: 18px; margin: 24px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 0 0 6px; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose a { color: var(--accent); }
.aside { border: 1px solid var(--line); background: var(--surface); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 20px; }
.aside b.price { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); }
.aside p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.aside .btn { align-self: flex-start; }
.artmeta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--faint); display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.artmeta a { color: inherit; }
.arts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 800px) { .arts { grid-template-columns: 1fr; } }
.art { border: 1px solid var(--line); background: var(--surface); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.art:hover { border-color: var(--accent); }
.art time { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em; color: var(--faint); }
.art h3 { font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; }
.art p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.art .more { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent); }
.yt { position: relative; aspect-ratio: 16 / 9; background: var(--dark); border: 1px solid var(--line); overflow: hidden; cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; }
.yt .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.yt .play span { background: var(--accent); color: var(--accent-ink); padding: 12px 22px; font-weight: 700; font-size: 14px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { .vids { grid-template-columns: 1fr; } }
.vids figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.vids figure { margin: 0; }
.steps-page li { border-right: none; }
.nextcta { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.nextcta p { margin: 0; font-size: 16px; color: var(--muted); max-width: 52ch; }

.demo { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(22px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .demo { grid-template-columns: 1fr; } }
.demo-cover { display: block; border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(16, 24, 32, 0.14); }
.demo-cover img { display: block; width: 100%; height: auto; }
.demo-text .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.prose a.btn { color: var(--accent-ink); text-decoration: none; }
.prose a.btn.ghost { color: var(--ink); }