/* Шрифты — self-hosted, подмножества latin + cyrillic.
   Montserrat вариативный: Google отдаёт один и тот же файл на 500/600/800,
   раньше он скачивался трижды — 114 КБ впустую. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;                 /* один вариативный файл на все начертания */
  font-display: swap;
  src: url(/fonts/Montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/Montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/Unbounded-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/Unbounded-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Дизайн-система блога: BG #0A0A0A · ACCENT #2F6FFF · DIM #6E6E6E · Montserrat + Unbounded */
  :root {
    --bg: #0A0A0A;
    --fg: #F5F5F5;
    --accent: #2F6FFF;
    --dim: #8A8A8A;              /* было #6E6E6E — 3.88:1, ниже AA */
    --accent-text: #6B9AFF;      /* акцент как ЦВЕТ ТЕКСТА на тёмном: 7.25:1 */
    --accent-solid: #2A63E6;     /* акцент под белым текстом кнопок: 5.22:1 */
    --field-line: rgba(255,255,255,.34);   /* границу поля ввода должно быть видно: 3.02:1 */
    --soft-bg: rgba(255,255,255,.06);
    --soft-line: rgba(255,255,255,.14);

    --body: "Montserrat", -apple-system, system-ui, sans-serif;
    --hi: "Unbounded", "Montserrat", sans-serif;

    --grid: 90px;
  }
  @media (max-width: 760px) { :root { --grid: 48px; } }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background-color: var(--bg);
    background-image:
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: var(--grid) var(--grid);
    color: var(--fg);
    font-family: var(--body);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 1040px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 44px); position: relative; z-index: 1; }


  /* ---- рубрикатор: акцентная полоска + подпись (как на обложках) ---- */
  .rubric { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
  .rubric i { display: block; width: 84px; height: 10px; border-radius: 6px; background: var(--accent); flex: none; }
  .rubric span { font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

  /* ---- реплика заказчика ---- */
  .q { font-size: clamp(14px, 1.7vw, 16px); font-weight: 500; color: var(--dim); margin-bottom: 16px; }
  .q::before { content: "— "; }

  /* ---- ответ: Montserrat 800, ударное слово — Unbounded на плашке ---- */
  .a {
    font-size: clamp(26px, 4.2vw, 40px);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -.02em;
    max-width: 21ch;
  }
  h1.a { font-size: clamp(32px, 5.4vw, 56px); line-height: 1.3; letter-spacing: -.03em; max-width: 14ch; }
  .hi {
    font-family: var(--hi);
    font-weight: 800;
    background: var(--accent);
    color: #FFFFFF;
    padding: .02em .14em .08em;
    border-radius: 8px;
    white-space: nowrap;   /* плашка не разрывается между строк */
  }

  section { padding: clamp(60px, 10vw, 104px) 0; position: relative; }
  section + section { border-top: 1px solid var(--soft-line); }

  /* ---- портрет в первом экране ---- */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
    grid-template-areas:
      "rubric shot"
      "text   shot";
    gap: 0 clamp(16px, 4vw, 48px);
    align-items: center;
  }
  .hero-grid > .rubric { grid-area: rubric; align-self: end; }
  .hero-grid > .rise { grid-area: text; }
  .hero-grid > .shot { grid-area: shot; }
  .shot {
    margin: 0;
    justify-self: end;
    width: clamp(210px, 30vw, 360px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #1A2233, #0D1119 70%);
    border: 2px solid rgba(47,111,255,.42);
    box-shadow: 0 0 0 10px rgba(47,111,255,.07), 0 26px 70px rgba(0,0,0,.55);
    overflow: hidden;
    position: relative;
  }
  .shot img { width: 100%; height: 100%; object-fit: cover; display: block;
    transform: translateY(-4.5%) scale(1.09); }   /* лицо повыше в круге, лишний воздух сверху уходит */
  /* на телефоне круг встаёт в строку с подписью — как аватар в шапке профиля */
  @media (max-width: 900px) {
    .hero-grid {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        "shot rubric"
        "text text";
      gap: 0 14px;
      align-items: center;
    }
    .hero-grid > .rubric { align-self: center; margin-bottom: 22px; }
    .hero-grid > .rubric i { display: none; }   /* роль полоски здесь играет сам аватар */
    .shot {
      justify-self: start;
      width: clamp(64px, 17vw, 84px);
      margin-bottom: 22px;
      border-color: rgba(47,111,255,.3);
      box-shadow: 0 0 0 5px rgba(47,111,255,.05), 0 10px 24px rgba(0,0,0,.45);
    }
  }


  /* ---- иконки ---- */
  .ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; fill: currentColor; }
  .cta a { display: inline-flex; align-items: center; gap: 9px; }
  .cta a .ic { width: 18px; height: 18px; }
  .work .who { display: flex; align-items: center; gap: 7px; }
  .work .who .ic { width: 16px; height: 16px; color: var(--accent-text); }
  .price .term { display: flex; align-items: center; gap: 6px; }
  .price .term .ic { width: 14px; height: 14px; }
  ul.list li { display: flex; align-items: flex-start; gap: 11px; padding-left: 0; }
  ul.list li .ic { width: 17px; height: 17px; color: var(--accent-text); margin-top: .28em; }
  .step h3 { display: flex; align-items: center; gap: 8px; }
  .step h3 .ic { width: 17px; height: 17px; }
  footer .row span { display: inline-flex; align-items: center; gap: 7px; }
  footer .row .ic { width: 15px; height: 15px; }
  footer .row a { color: inherit; text-decoration: none; }
  footer .row a:hover { color: var(--fg); }

  /* ---- шар: на десктопе идёт за курсором, на телефоне гуляет сам ---- */
  .orb {
    position: fixed;
    top: 0; left: 0;
    width: 460px; height: 460px;
    margin: -230px 0 0 -230px;
    background: radial-gradient(circle at 50% 50%,
      rgba(47,111,255,.78), rgba(47,111,255,.46) 40%, rgba(47,111,255,.14) 66%, rgba(47,111,255,0) 76%);
    filter: blur(34px);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
    will-change: transform, border-radius;
    border-radius: 50%;
  }
  @media (max-width: 900px) { .orb { width: 320px; height: 320px; margin: -160px 0 0 -160px; opacity: .62; } }


  .after { margin-top: 24px; font-size: clamp(16px, 1.9vw, 18.5px); max-width: 48ch; color: rgba(245,245,245,.86); }
  .after strong { font-weight: 800; color: var(--fg); }

  /* ---- кнопки ---- */
  .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .cta a {
    font-family: var(--body); font-weight: 800; font-size: 16px;
    text-decoration: none; padding: 15px 21px; border-radius: 14px;
    background: var(--accent-solid); color: #FFFFFF; border: 2px solid var(--accent-solid);
    transition: transform .16s ease, background .16s ease;
  }
  .cta a.second { background: var(--soft-bg); border-color: var(--soft-line); color: var(--fg); }
  .cta a:hover { transform: translateY(-2px); }

  /* ---- пилюли ---- */
  .pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .pill {
    font-size: 13px; font-weight: 600;
    padding: 7px 15px; border-radius: 14px;
    background: var(--soft-bg); border: 2px solid var(--soft-line); color: rgba(245,245,245,.9);
  }

  /* ---- работы ---- */
  .works { margin-top: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 800px) { .works { grid-template-columns: 1fr; } }
  .work {
    background: var(--soft-bg);
    border: 2px solid var(--soft-line);
    border-radius: 20px;
    padding: 24px;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color .2s ease, transform .2s ease;
  }
  .work:hover { border-color: var(--accent); transform: translateY(-3px); }
  .work h3 { font-family: var(--hi); font-weight: 800; font-size: clamp(20px, 2.6vw, 25px); line-height: 1.1; }
  .work .who { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
  .work p { font-size: 15.5px; color: rgba(245,245,245,.84); }

  /* ---- цены: крупная цифра акцентом ---- */
  .prices { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 800px) { .prices { grid-template-columns: 1fr; } }
  .price { background: var(--soft-bg); border: 2px solid var(--soft-line); border-radius: 20px; padding: 24px; }
  .price .sum { font-family: var(--hi); font-weight: 800; font-size: clamp(21px, 2.5vw, 27px); color: var(--accent-text); line-height: 1.15; white-space: nowrap; }
  .price .sum i { font-style: normal; font-family: var(--body); font-weight: 600; font-size: .62em; color: var(--dim); }
  .price .what { font-size: 17px; font-weight: 800; margin-top: 12px; }
  .price .term { font-size: 14px; color: var(--dim); font-weight: 600; margin-top: 4px; }
  .money-foot { margin-top: 26px; font-size: 16px; color: rgba(245,245,245,.8); max-width: 52ch; }

  /* ---- было → стало (приём из инфографики) ---- */
  .swap { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 34px; }
  .swap .was {
    font-size: clamp(19px, 2.6vw, 26px); font-weight: 800; color: var(--dim);
    text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 3px;
  }
  .swap .arrow { font-size: 22px; color: var(--fg); }
  .swap .now { font-family: var(--hi); font-weight: 800; font-size: clamp(21px, 3vw, 30px); color: var(--accent-text); }

  ul.list { margin-top: 26px; list-style: none; display: flex; flex-direction: column; gap: 12px; max-width: 50ch; }
  ul.list li { font-size: 16.5px; color: rgba(245,245,245,.88); }

  /* ---- шаги ---- */
  .steps { list-style: none; margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
  .step { border-radius: 18px; background: var(--soft-bg); border: 2px solid var(--soft-line); padding: 20px; }
  .step h3 { font-family: var(--hi); font-weight: 800; font-size: 15px; color: var(--accent-text); margin-bottom: 8px; }
  .step p { font-size: 15.5px; color: rgba(245,245,245,.86); }

  /* ---- форма ---- */
  form { margin-top: 40px; display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
  label { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
  input, textarea {
    font-family: var(--body); font-size: 16.5px; font-weight: 500; color: var(--fg);
    background: var(--soft-bg); border: 2px solid var(--soft-line); border-radius: 14px;
    padding: 14px 16px; resize: vertical; width: 100%;
  }
  input::placeholder, textarea::placeholder { color: var(--dim); }
  input:focus, textarea:focus { border-color: var(--accent); }
  input:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; }
  button {
    font-family: var(--body); font-weight: 800; font-size: 16.5px;
    padding: 16px 28px; border-radius: 14px; cursor: pointer;
    background: var(--accent-solid); color: #FFF; border: 2px solid var(--accent-solid);
    align-self: flex-start;
  }

  footer { padding: 44px 0 70px; border-top: 1px solid var(--soft-line); }
  footer .row { display: flex; flex-wrap: wrap; gap: 10px 30px; font-size: 14px; color: var(--dim); font-weight: 600; margin-top: 18px; }

  .rise > * { opacity: 0; transform: translateY(16px); animation: rise .75s cubic-bezier(.2,.7,.2,1) forwards; }
  .rise > *:nth-child(1) { animation-delay: .04s; }
  .rise > *:nth-child(2) { animation-delay: .16s; }
  .rise > *:nth-child(3) { animation-delay: .3s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* outline-offset обязателен: он даёт тёмный зазор между синей кнопкой и
     синей обводкой. Без него индикатор фокуса на кнопках исчезает. */
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

  /* ---- спрайт иконок: вынесен из инлайнового style, чтобы CSP жила без 'unsafe-inline' ---- */
  .defs { position: absolute; }

  /* ---- honeypot: человек этого поля не видит, бот заполняет и палится ----
     Именно уводим за экран, а не display:none — часть ботов скрытые поля пропускает. */
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* ---- строка ответа формы ---- */
  .form-note { font-size: 15.5px; line-height: 1.5; font-weight: 600; }
  .form-note:empty { display: none; }
  .form-note[data-kind="ok"] { color: var(--accent); }
  .form-note[data-kind="error"] { color: #FF6B6B; }

  button:disabled { opacity: .6; cursor: progress; }

  @media (prefers-reduced-motion: reduce) {
    .rise > * { animation: none; opacity: 1; transform: none; }
    * { transition: none !important; }
  }