/* ── шрифты ────────────────────────────────────────────────
   Лежат рядом и раздаются со своего домена, а не с fonts.googleapis.com:
   страница не зависит от чужого CDN, не тормозит у тех, до кого он доезжает
   плохо, и не требует дырки в Content-Security-Policy. Все шесть файлов
   вместе — 152 КБ.

   Каждое семейство разрезано на кириллицу и латиницу: браузер скачивает
   только нужное. На русской странице латинский файл почти не грузится.

   font-display: swap — текст виден сразу системным шрифтом и подменяется,
   когда файл доехал. Иначе первые полсекунды страница пустая.
   ─────────────────────────────────────────────────────────── */

@font-face{
  font-family:"Alegreya"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/alegreya700-cyr.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Alegreya"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/alegreya700-lat.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+2000-206F, U+2212;
}

@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/golos-cyr.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/golos-lat.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+2000-206F, U+2212;
}

/* Вариативный: один файл закрывает и 400, и 500 */
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("fonts/jbmono-cyr.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("fonts/jbmono-lat.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+2000-206F, U+2212;
}

/* ═══════════════════════════════════════════════════════════
   «Первая линия» — лендинг услуги

   Синий несёт всё, что работает само: ответ найден, кнопка, ссылка.
   Янтарный оставлен ровно одному смыслу — бот не знает ответа и зовёт
   человека. Два тёплых пятна на всю страницу, и оба в одном месте.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#EDF1F7;
  --paper-2:#E3E9F3;
  --card:#F8FAFD;
  --line:#C6D0E2;
  --line-soft:#DAE1EE;

  --ink:#111A2B;
  --ink-dim:#44506B;
  /* Мелкий кегль: надзаголовки, сроки, подвал. Держит 4.5 не только к трём
     подложкам, но и к фону под наложившимися пятнами свечения — там подложка
     заметно темнее, и это самое опасное место на странице. */
  --ink-faint:#4E5972;

  --seal:#13459C;          /* синий: ответ найден, действие */
  --seal-soft:rgba(19,69,156,.09);
  --seal-ink:#F8FAFD;

  --amber:#9A5410;         /* редко: вопрос ушёл человеку */
  --amber-soft:rgba(154,84,16,.10);

  /* Прозрачность подобрана по худшему случаю: оба пятна легли друг на друга.
     Ярче — и мелкий текст на них проваливается ниже 4.5. */
  --glow-a:rgba(19,69,156,.078);
  --glow-b:rgba(56,126,214,.066);
  --grid:rgba(17,26,43,.055);

  --ff-d:"Alegreya", Georgia, "Times New Roman", serif;
  --ff-b:"Golos Text", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-m:"JetBrains Mono", ui-monospace, Consolas, monospace;

  --w:1140px;
  --pad:clamp(20px,5vw,56px);
  /* Отступ секции. Держим плотно: на широком экране раздел не должен
     начинаться с пустого поля, за которым только потом идёт текст. */
  --sp:clamp(36px,3.2vw,52px);
  --r:3px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0B1120;
    --paper-2:#101929;
    --card:#141E31;
    --line:#293449;
    --line-soft:#1F293C;
    --ink:#E3EAF6;
    --ink-dim:#A0ADC4;
    --ink-faint:#8593AC;
    --seal:#6BA5FF;
    --seal-soft:rgba(107,165,255,.12);
    --seal-ink:#0B1120;
    --amber:#E2A25C;
    --amber-soft:rgba(226,162,92,.12);
    --glow-a:rgba(59,110,214,.12);
    --glow-b:rgba(28,166,196,.078);
    --grid:rgba(227,234,246,.05);
  }
}

:root[data-theme="dark"]{
  --paper:#0B1120;
  --paper-2:#101929;
  --card:#141E31;
  --line:#293449;
  --line-soft:#1F293C;
  --ink:#E3EAF6;
  --ink-dim:#A0ADC4;
  --ink-faint:#8593AC;
  --seal:#6BA5FF;
  --seal-soft:rgba(107,165,255,.12);
  --seal-ink:#0B1120;
  --amber:#E2A25C;
  --amber-soft:rgba(226,162,92,.12);
  --glow-a:rgba(59,110,214,.12);
  --glow-b:rgba(28,166,196,.078);
  --grid:rgba(227,234,246,.05);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Цвет фона живёт на html, а не на body. Слой со свечением лежит под
   содержимым (z-index:-1), и если бы фон красил body, он бы это свечение
   полностью закрыл — на body фон уезжает на холст и перекрывает всё под ним. */
html{background-color:var(--paper)}

body{
  margin:0;
  /* Точечная сетка на всю страницу — плановая бумага, на которой считают
     смены. Держим еле заметной: она фон, а не узор. Цвета здесь нет, чтобы
     свечение просвечивало между точками. */
  background-image:radial-gradient(circle, var(--grid) 1px, transparent 1px);
  background-size:24px 24px;
  color:var(--ink);
  font:400 17px/1.6 var(--ff-b);
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* ── плывущие пятна света ──────────────────────────────── */
.glow{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
}
.glow i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);
}
.glow i:nth-child(1){
  width:52vw;height:52vw;top:-14vw;left:-8vw;background:var(--glow-a);
  animation:drift-a 34s ease-in-out infinite alternate;
}
.glow i:nth-child(2){
  width:44vw;height:44vw;top:34vh;right:-12vw;background:var(--glow-b);
  animation:drift-b 41s ease-in-out infinite alternate;
}
@keyframes drift-a{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(7vw,9vh,0)}
}
@keyframes drift-b{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-9vw,-7vh,0)}
}
@media (prefers-reduced-motion:reduce){
  .glow i{animation:none}
}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad);position:relative}

h1,h2,h3{font-family:var(--ff-d);font-weight:700;line-height:1.08;margin:0;
         letter-spacing:-.015em}
p{margin:0}
a{color:inherit}

.eyebrow{
  font:500 12px/1 var(--ff-m);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:99;background:var(--seal);
            color:var(--seal-ink);padding:10px 16px;border-radius:var(--r)}

:focus-visible{outline:2px solid var(--seal);outline-offset:3px}

/* ── шапка ─────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line-soft);
}
.hdr__in{max-width:var(--w);margin:0 auto;padding:13px var(--pad);
         display:flex;align-items:center;gap:20px}
.brand{font-family:var(--ff-d);font-weight:700;font-size:20px;
       text-decoration:none;letter-spacing:-.01em;display:flex;
       align-items:baseline;gap:8px}
/* Единица в марке — это и «первая», и отметка линии поддержки */
.brand em{font:500 13px/1 var(--ff-m);font-style:normal;color:var(--seal);
          border:1px solid var(--seal);border-radius:2px;padding:3px 5px}
.hdr__sp{flex:1}
.hdr nav{display:flex;gap:22px;font-size:15px}
.hdr nav a{text-decoration:none;color:var(--ink-dim)}
.hdr nav a:hover{color:var(--ink)}
@media (max-width:820px){.hdr nav{display:none}}

.tgl{
  background:none;border:1px solid var(--line);color:var(--ink-dim);
  width:34px;height:34px;border-radius:var(--r);cursor:pointer;
  display:grid;place-items:center;flex:none;
}
.tgl:hover{color:var(--ink);border-color:var(--ink-faint)}
.tgl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
         stroke-linecap:round}
.tgl__moon{display:none}
:root[data-theme="dark"] .tgl__sun{display:none}
:root[data-theme="dark"] .tgl__moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tgl__sun{display:none}
  :root:not([data-theme="light"]) .tgl__moon{display:block}
}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--seal);color:var(--seal-ink);
  font:600 16px/1 var(--ff-b);
  padding:14px 22px;border-radius:var(--r);
  text-decoration:none;border:1px solid var(--seal);
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn--ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink-faint);filter:none}

/* ── герой ─────────────────────────────────────────────── */
.hero{padding:clamp(22px,2.2vw,34px) 0 var(--sp)}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);
            align-items:center}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;gap:34px}}

.hero h1{font-size:clamp(36px,5vw,58px);margin:16px 0 0}
.hero h1 em{font-style:normal;color:var(--seal)}
.hero__sub{margin-top:20px;font-size:19px;color:var(--ink-dim);max-width:36ch}
.hero__act{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.hero__note{margin-top:14px;font-size:14px;color:var(--ink-faint)}

/* ── телефон с диалогом ────────────────────────────────── */
.phone{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow:0 20px 44px -26px rgba(9,20,45,.5);
  max-width:400px;width:100%;justify-self:end;
}
@media (max-width:900px){.phone{justify-self:stretch;max-width:none}}

.phone__bar{display:flex;align-items:center;gap:9px;padding:2px 4px 12px;
            border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.phone__ava{width:30px;height:30px;border-radius:50%;background:var(--seal);
            color:var(--seal-ink);display:grid;place-items:center;flex:none;
            font:700 13px/1 var(--ff-b)}
.phone__who b{display:block;font:600 14px/1.2 var(--ff-b)}
.phone__who i{font-size:12px;font-style:normal;color:var(--seal)}

.feed{display:flex;flex-direction:column;gap:9px;min-height:264px}

.msg{
  max-width:88%;padding:9px 13px;border-radius:13px;
  font-size:15px;line-height:1.45;
  animation:pop .28s ease both;
}
@keyframes pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.msg{animation:none}}

.msg--them{align-self:flex-end;background:var(--seal-soft);
           border:1px solid var(--seal);border-bottom-right-radius:4px}
.msg--bot{align-self:flex-start;background:var(--paper-2);
          border:1px solid var(--line-soft);border-bottom-left-radius:4px}
.msg--handoff{border-color:var(--amber);background:var(--amber-soft)}
.msg b{font-family:var(--ff-m);font-weight:500;font-size:14px}

.msg__tag{
  display:block;margin-top:8px;
  font:500 11px/1 var(--ff-m);letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber);
}

.dots{align-self:flex-start;display:flex;gap:4px;padding:13px 14px;
      background:var(--paper-2);border:1px solid var(--line-soft);
      border-radius:13px;border-bottom-left-radius:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);
        animation:blink 1.2s infinite both}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ── общие секции ──────────────────────────────────────── */
.sec{padding:var(--sp) 0;border-top:1px solid var(--line-soft)}
.sec__head{max-width:62ch;margin-bottom:clamp(20px,2.2vw,30px)}
.sec__head h2{font-size:clamp(27px,3.3vw,40px);margin:10px 0 0}
/* :not(.eyebrow) обязателен. «.sec__head p» специфичнее «.eyebrow», и без
   исключения надзаголовок получал кегль и отступ обычного абзаца — вместо
   мелкой метки над заголовком появлялась лишняя строка текста и лишний воздух. */
.sec__head p:not(.eyebrow){margin-top:13px;color:var(--ink-dim);font-size:18px}

/* ── честный отказ ─────────────────────────────────────── */
.honest{background:var(--paper-2);border-top:1px solid var(--line)}
.honest__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);
              align-items:center}
@media (max-width:900px){.honest__grid{grid-template-columns:1fr}}
.honest__why{display:flex;flex-direction:column;gap:20px;margin-top:26px}
.honest__why div{padding-left:18px;border-left:2px solid var(--amber)}
.honest__why b{display:block;font-size:16px;margin-bottom:5px}
.honest__why p{color:var(--ink-dim);font-size:16px}

/* ── пакеты ────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

.plan{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 22px 26px;
  display:flex;flex-direction:column;
}
.plan--pick{border-color:var(--seal);box-shadow:0 0 0 1px var(--seal)}
.plan__tag{font:500 11px/1 var(--ff-m);letter-spacing:.1em;text-transform:uppercase;
           color:var(--seal);margin-bottom:12px;display:block;min-height:11px}
.plan h3{font-size:23px}
.plan__price{font:500 27px/1 var(--ff-m);margin:14px 0 6px;letter-spacing:-.02em}
.plan__term{font-size:14px;color:var(--ink-faint)}
.plan ul{list-style:none;margin:20px 0 0;padding:0;display:flex;
         flex-direction:column;gap:10px;flex:1}
.plan li{position:relative;padding-left:22px;font-size:16px;color:var(--ink-dim)}
.plan li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:2px;
                 background:var(--seal)}
.plan .btn{margin-top:24px;justify-content:center}

.plans__note{margin-top:20px;padding:16px 18px;border:1px dashed var(--line);
             border-radius:var(--r);font-size:16px;color:var(--ink-dim)}
.plans__note b{color:var(--ink)}

/* ── порядок работы ────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{padding-top:14px;border-top:2px solid var(--line)}
.step:first-child{border-top-color:var(--seal)}
.step__n{font:500 12px/1 var(--ff-m);color:var(--ink-faint);letter-spacing:.1em}
.step h3{font-size:19px;margin:10px 0 7px}
.step p{font-size:16px;color:var(--ink-dim)}

/* ── обо мне вместо витрины проектов ───────────────────── */
.about{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,56px);
       align-items:start}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.about p + p{margin-top:14px}
.about p{color:var(--ink-dim);font-size:17px}
.about__list{list-style:none;margin:0;padding:0;display:flex;
             flex-direction:column;gap:12px}
.about__list li{padding:14px 16px;background:var(--card);
                border:1px solid var(--line);border-radius:var(--r);
                font-size:16px}
.about__list b{display:block;margin-bottom:3px}
.about__list span{color:var(--ink-faint);font:400 13px/1.5 var(--ff-m)}

/* ── вопросы ───────────────────────────────────────────── */
.qa{max-width:78ch}
.qa details{border-bottom:1px solid var(--line-soft);padding:18px 0}
.qa summary{font:600 18px/1.4 var(--ff-b);cursor:pointer;list-style:none;
            display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--ff-m);color:var(--seal);flex:none}
.qa details[open] summary::after{content:"−"}
.qa p{margin-top:11px;color:var(--ink-dim);font-size:17px;max-width:70ch}

/* ── контакты ──────────────────────────────────────────── */
.end{background:var(--paper-2);border-top:1px solid var(--line);
     padding:var(--sp) 0}
.end h2{font-size:clamp(27px,3.3vw,40px);margin-top:10px}
/* То же исключение, что и в .sec__head — иначе надзаголовок теряет свой стиль */
.end p:not(.eyebrow){margin-top:15px;font-size:19px;color:var(--ink-dim);max-width:54ch}
.end__act{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

.foot{padding:24px 0;font-size:14px;color:var(--ink-faint);
      border-top:1px solid var(--line-soft)}
.foot__in{max-width:var(--w);margin:0 auto;padding:0 var(--pad);
          display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── появление при прокрутке ───────────────────────────── */
.rv{opacity:0;transform:translateY(14px);
    transition:opacity .5s ease, transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}