/* Generated by fonts.mjs — do not edit by hand. Run `npm run fonts` instead.
   Self-hosted so no visitor IP reaches a third party on page load. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lobster Two";
  src: url("fonts/lobster-two-700i.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* =========================================================================
   we.lx lol
   Dark is the brand's home. Light is a first-class second skin, not an
   inversion: every colour below is defined in both, and the pink that reads
   as text on white is a darker one than the pink that reads on black.
   Every ratio quoted in a comment was measured, not estimated.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, li, dl, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* --- tokens: dark (the default skin) ------------------------------------ */
:root {
  /* Brand constants, straight from BRAND_FONTS_AND_COLORS.txt. */
  --brand-black: #07080b;
  --brand-white: #ffffff;
  --brand-pink: #ff2e7e;
  --brand-pink-soft: #ff7fae;
  --brand-gray: #a7abb4;
  /* Derived: the darkest pink that still reads as brand pink and clears 4.5:1
     as text on all three light surfaces and as a fill behind white text.
     Measured — white 5.27, card #f7f7fa 4.93, deep #eeeef4 4.56, white on it
     5.27. The first attempt, #e80059, passed on white and failed at 3.97 on
     the deepest card, which is exactly where the section labels sit. */
  --brand-pink-ink: #d60052;

  --bg: var(--brand-black);
  --bg-2: #0e0f15;
  --bg-3: #16181f;
  --ink: var(--brand-white);
  --ink-2: rgba(255, 255, 255, 0.88);
  --muted: var(--brand-gray);            /* 8.70:1 on --bg */
  --line: rgba(255, 255, 255, 0.11);
  --line-2: rgba(255, 255, 255, 0.18);
  --accent: var(--brand-pink);           /* 5.67:1 on --bg */
  --accent-2: var(--brand-pink-soft);
  --accent-soft: rgba(255, 46, 126, 0.12);
  --violet: #7b5cff;
  --btn: var(--brand-pink-ink);          /* white on it: 5.27:1 */
  --btn-ink: #ffffff;
  --btn-hover: #ff2e7e;
  --glow: 0 0 0 1px rgba(255, 46, 126, 0.35), 0 12px 40px rgba(255, 46, 126, 0.22);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.45);
  --kiko-dark: block;
  --kiko-light: none;
  --wash-a: rgba(123, 92, 255, 0.16);
  --wash-b: rgba(255, 46, 126, 0.14);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --script: "Lobster Two", "Inter", cursive;
  --r: 18px;
  --r-sm: 12px;
  --r-pill: 999px;
  --pad: clamp(1.15rem, 4vw, 4rem);
  --sec: clamp(3rem, 7vw, 5.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 76rem;
}

/* Light comes on automatically for a visitor whose system asks for it,
   unless they explicitly chose dark on this site. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff;
    --bg-2: #f7f7fa;
    --bg-3: #eeeef4;
    --ink: var(--brand-black);
    --ink-2: rgba(7, 8, 11, 0.86);
    --muted: #6b7180;                    /* 4.83:1 on --bg-2 */
    --line: rgba(7, 8, 11, 0.12);
    --line-2: rgba(7, 8, 11, 0.2);
    --accent: var(--brand-pink-ink);     /* 5.27 white, 4.56 deepest card */
    --accent-2: var(--brand-pink);
    --accent-soft: rgba(214, 0, 82, 0.08);
    --violet: #6a4be0;
    --btn-hover: #ad0042;
    --glow: 0 0 0 1px rgba(214, 0, 82, 0.22), 0 12px 34px rgba(214, 0, 82, 0.18);
    --shadow: 0 1px 2px rgba(7, 8, 11, 0.05), 0 16px 40px rgba(7, 8, 11, 0.09);
    --kiko-dark: none;
    --kiko-light: block;
    --wash-a: rgba(123, 92, 255, 0.1);
    --wash-b: rgba(255, 46, 126, 0.12);
  }
}

/* The toggle wins over the system in both directions. */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #f7f7fa;
  --bg-3: #eeeef4;
  --ink: var(--brand-black);
  --ink-2: rgba(7, 8, 11, 0.86);
  --muted: #6b7180;
  --line: rgba(7, 8, 11, 0.12);
  --line-2: rgba(7, 8, 11, 0.2);
  --accent: var(--brand-pink-ink);
  --accent-2: var(--brand-pink);
  --accent-soft: rgba(214, 0, 82, 0.08);
  --violet: #6a4be0;
  --btn-hover: #ad0042;
  --glow: 0 0 0 1px rgba(214, 0, 82, 0.22), 0 12px 34px rgba(214, 0, 82, 0.18);
  --shadow: 0 1px 2px rgba(7, 8, 11, 0.05), 0 16px 40px rgba(7, 8, 11, 0.09);
  --kiko-dark: none;
  --kiko-light: block;
  --wash-a: rgba(123, 92, 255, 0.1);
  --wash-b: rgba(255, 46, 126, 0.12);
}

.only-dark { display: var(--kiko-dark); }
.only-light { display: var(--kiko-light); }

/* --- base ---------------------------------------------------------------- */
body {
  font-family: var(--sans);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { display: block; }

.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--btn);
  color: var(--btn-ink);
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.skip:focus { left: 0; top: 0; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- type ---------------------------------------------------------------- */
h1, h2, h3 { color: var(--ink); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }

.h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); }
.h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.2; }

.label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

/* The one place the brand allows a second typeface. */
.lol {
  font-family: var(--script);
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0;
  padding: 0 0.06em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.lol::after {
  content: "";
  position: absolute;
  left: 0.08em;
  right: 0.08em;
  bottom: 0.04em;
  height: 0.075em;
  background: currentColor;
  border-radius: var(--r-pill);
}

.wm { font-weight: 800; letter-spacing: -0.045em; color: var(--ink); }

/* --- controls ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn);
  color: var(--btn-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:hover { background: var(--btn-hover); box-shadow: var(--glow); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--lg { min-height: 54px; padding: 1rem 2rem; font-size: 1.0625rem; }
.btn--sm { min-height: 40px; padding: 0.55rem 1.1rem; font-size: 0.875rem; }
.btn--block { width: 100%; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover {
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.icon-btn:hover { background: var(--bg-3); color: var(--accent); }
.ico { width: 20px; height: 20px; }

/* --- nav ----------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem max(var(--pad), env(safe-area-inset-right)) 0.85rem
    max(var(--pad), env(safe-area-inset-left));
  /* Сплошной фон, а не полупрозрачный: на 92% сквозь шапку читался текст
     страницы. Стеклянный блюр сюда добавлять нельзя — backdrop-filter делает
     .nav containing block для position: fixed, и выезжающее меню перестаёт
     разворачиваться на весь экран. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: 1.35rem;
  text-decoration: none;
  min-height: 44px;
  align-content: center;
  flex-wrap: wrap;
}
.nav__links { display: flex; align-items: center; gap: 1.7rem; margin-left: auto; }
.nav__links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current] { color: var(--accent); font-weight: 600; }
.nav__menu-cta, .nav__menu-foot { display: none; }
.nav__end { display: flex; align-items: center; gap: 0.6rem; }
.nav__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  cursor: pointer;
}
.nav__burger i, .nav__burger i::before, .nav__burger i::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 0.3s var(--ease), background 0.2s;
}
.nav__burger i { top: 50%; margin-top: -1px; }
.nav__burger i::before { top: -6px; left: 50%; }
.nav__burger i::after { top: 6px; left: 50%; }
.nav.is-open .nav__burger i { background: transparent; }
.nav.is-open .nav__burger i::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger i::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* --- layout -------------------------------------------------------------- */
.sec {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--sec) var(--pad);
}
.sec--tight { padding-top: 0; }
/* Two stacked sections each contributed a full pad and left a 176px hole
   between them. One gap is enough: the upper section's own bottom padding. */
.sec + .sec { padding-top: 0; }
.sec__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.sec__sub { color: var(--muted); font-size: 1.0625rem; }

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) var(--pad) clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  overflow: hidden;
}
/* Пятно раньше вылезало за пределы .hero и обрезалось его overflow, давая
   прямые края. Пока сверху лежала непрозрачная плашка маскота, этого не было
   видно; с вырезанной фигурой прямоугольник вылез. Теперь коробка целиком
   внутри секции, а градиент гаснет ровно на её границе. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: min(40rem, 92%);
  height: 34rem;
  background:
    radial-gradient(closest-side at 52% 42%, var(--wash-a), transparent 100%),
    radial-gradient(closest-side at 78% 66%, var(--wash-b), transparent 100%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero__h {
  font-size: clamp(2.5rem, 1.3rem + 6.4vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.hero__h > span { display: block; }
.hero__sub {
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  color: var(--muted);
  max-width: 22ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hero__art { position: relative; }
.kiko {
  width: 100%;
  max-width: 34rem;
  margin-left: auto;
  /* The plate background is remapped to the page colour and the left, right
     and bottom edges are feathered into the file's alpha channel, so there is
     no rectangle to hide and no CSS mask to keep in sync. */
}
.kiko--dark { display: var(--kiko-dark); }
.kiko--light { display: var(--kiko-light); }

/* --- answer block -------------------------------------------------------- */
.answer {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.answer > .label { margin-bottom: 0.5rem; }
.answer__t {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 62ch;
  border-left: 3px solid var(--accent);
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
}

/* .sec--tight kills its own top padding, which glued the section heading to
   the answer block directly above it. Put the gap back only in that pair. */
.answer + .sec--tight { padding-top: clamp(2.25rem, 5vw, 3.5rem); }

/* --- cards --------------------------------------------------------------- */
/* Four services, deliberately two by two like the mockup. auto-fit put three
   on the first row and left the fourth stranded beside an empty half. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
@media (max-width: 48rem) {
  .cards { grid-template-columns: minmax(0, 1fr); }
}
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  transition: border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.card__n { font-size: 1.5rem; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; }
.card__h { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.card__h > span { display: block; }
.card__d { color: var(--muted); font-size: 0.9375rem; }
.card__go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: auto;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--accent);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
/* Вся плитка — цель клика, ссылка остаётся её доступным именем.
   ВАЖНО: на .card__go нельзя вешать transform. Трансформация делает элемент
   containing block для абсолютных потомков, и это перекрытие переставало
   считаться от .card, схлопываясь до 44px самой стрелки. Курсор наводится
   раньше клика, поэтому плитка переставала открываться везде, кроме стрелки.
   Двигаем саму иконку внутри ссылки, а не ссылку. */
.card__go::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.card:hover .card__go { border-color: var(--accent); background: var(--accent-soft); }
.card__go svg { transition: transform 0.2s var(--ease); }
.card:hover .card__go svg { transform: translateX(3px); }

/* --- page head ----------------------------------------------------------- */
.ph {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--pad) clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}
.ph__h {
  font-size: clamp(2.4rem, 1.4rem + 5.5vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.ph__h > span { display: block; }
.ph__h--post { font-size: clamp(1.9rem, 1.3rem + 3.2vw, 3.1rem); line-height: 1.05; }
.ph__lead {
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  color: var(--muted);
  max-width: 40ch;
}
.ph__n { font-size: 2rem; font-weight: 800; color: var(--accent); margin-bottom: 0.4rem; }
.ph__meta { margin-top: 0.9rem; font-size: 0.875rem; color: var(--muted); }

.ph__art { position: relative; min-height: 8rem; pointer-events: none; color: var(--accent); }
.splat { width: 100%; max-width: 21rem; margin-left: auto; opacity: 0.9; }

.crumbs {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.25rem var(--pad) 0;
  font-size: 0.875rem;
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.2rem 0;
  color: var(--muted);
  text-decoration: none;
}
.crumbs a:hover { color: var(--accent); }

/* --- rows ---------------------------------------------------------------- */
.rows { display: grid; gap: 0.75rem; }
.row__a {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) 44px;
  gap: clamp(0.85rem, 2vw, 1.6rem);
  align-items: center;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
}
.row__a:hover { border-color: var(--accent); transform: translateX(3px); }
.row__n { font-size: 1.35rem; font-weight: 800; color: var(--accent); }
.row__h { display: block; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.row__d { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.9375rem; }
.row__m { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--muted); }
.row__go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--accent);
}
.row__a:hover .row__go { border-color: var(--accent); background: var(--accent-soft); }

/* --- ticks / lists ------------------------------------------------------- */
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.5rem; }
@media (max-width: 44rem) { .ticks { grid-template-columns: minmax(0, 1fr); } }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.7rem; align-items: start; }
.ticks .ico { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }
.ticks span { color: var(--ink); font-weight: 500; }
.ticks--sm span { font-weight: 400; color: var(--ink-2); font-size: 0.9375rem; }

.dots { display: grid; gap: 0.55rem; margin: 1rem 0 0; }
.dots li { position: relative; padding-left: 1.1rem; color: var(--ink-2); }
.dots li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Four items in one 62ch column left the right half of the section empty.
   Two by two fills the width without stretching any line past readable. */
.nots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2.5rem; }
@media (max-width: 48rem) { .nots { grid-template-columns: minmax(0, 1fr); } }
.nots li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-2);
}
.nots li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 12px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* --- proof / stats ------------------------------------------------------- */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.proof li { border-top: 2px solid var(--accent); padding-top: 1rem; }
.proof__t { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.4rem; }
.proof__d { color: var(--muted); font-size: 0.9375rem; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 3vw, 2.5rem); }
.stats__v {
  font-size: clamp(1.85rem, 1rem + 4.2vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--accent);
  line-height: 1;
}
.stats__l { margin-top: 0.35rem; color: var(--muted); font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem); }

/* --- work ---------------------------------------------------------------- */
.empty {
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: clamp(1.75rem, 4vw, 3rem);
  max-width: 58ch;
}
.empty__h { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem); margin-bottom: 0.75rem; }
.empty__d { color: var(--muted); margin-bottom: 1.5rem; }

.ships { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.ship {
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
}
.ship__h { font-size: 1.125rem; margin-bottom: 1rem; }
.ship__h a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.ship__h a:hover { color: var(--accent); }
.ship .ticks { grid-template-columns: minmax(0, 1fr); gap: 0.65rem; }

.case { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.case img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case__h { font-size: 1.15rem; padding: 1rem 1.25rem 0.2rem; }
.case__d { padding: 0 1.25rem 1.25rem; color: var(--muted); font-size: 0.9375rem; }

/* --- prose --------------------------------------------------------------- */
.prose { max-width: 46rem; }
.prose__b + .prose__b { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.prose__b h2 { margin-bottom: 0.75rem; }
.prose p + p { margin-top: 0.85rem; }
.prose p { color: var(--ink-2); }

.toc { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.toc > summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--ink);
  min-height: 46px;
  display: flex;
  align-items: center;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc ol { padding: 0 1.25rem 1.1rem; display: grid; gap: 0.55rem; }
.toc a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; }
.toc a:hover { color: var(--accent); }

.qas { display: grid; gap: 0.6rem; max-width: 46rem; }
.qa { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.qa > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  min-height: 48px;
  font-weight: 600;
  color: var(--ink);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa i {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.qa i::before, .qa i::after {
  content: "";
  position: absolute;
  inset: 6px 0 auto;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.25s var(--ease);
}
.qa i::after { transform: rotate(90deg); }
.qa[open] i::after { transform: rotate(0); }
.qa__a { padding: 0 1.25rem 1.15rem; color: var(--muted); }

/* --- contact ------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.form { display: grid; gap: 1rem; }
.f { display: grid; gap: 0.4rem; }
.f__l { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.f__i {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.f__i::placeholder { color: var(--muted); }
.f__i:focus { border-color: var(--accent); background: var(--bg); }
.f__i[aria-invalid="true"] { border-color: var(--accent); }
textarea.f__i { resize: vertical; min-height: 8rem; }
.f__e { font-size: 0.8125rem; color: var(--accent); font-weight: 600; }
.form__done {
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--ink);
  font-weight: 500;
}

.info {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
}
.info__lead { color: var(--muted); margin: 0.5rem 0 1.5rem; }
.info__list { display: grid; gap: 1rem; margin-bottom: 1.75rem; }
.info__list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-areas: "i k" "i v";
  gap: 0 0.75rem;
  align-items: center;
}
.info__list .ico { grid-area: i; color: var(--accent); }
.info__k { grid-area: k; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.info__list li > :last-child { grid-area: v; color: var(--ink); font-weight: 600; text-decoration: none; }
.info__list a:hover { color: var(--accent); }

/* --- cta ----------------------------------------------------------------- */
.cta {
  max-width: var(--wrap);
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  padding: clamp(1.9rem, 4.5vw, 3.25rem);
  border-radius: var(--r);
  background:
    radial-gradient(90% 140% at 88% 12%, var(--wash-b), transparent 60%),
    radial-gradient(70% 120% at 8% 90%, var(--wash-a), transparent 62%),
    var(--bg-2);
  border: 1px solid var(--line);
}
.cta__h { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); }
.cta__t { margin: 0.75rem 0 1.6rem; color: var(--muted); max-width: 52ch; }
/* The CTA sits inside main, which is padded by its sections; give it its own. */
/* Блок сужается на величину отступов страницы, но остаётся по центру.
   Раньше здесь стояли явные margin-left/right, и они перебивали
   `margin: 0 auto` выше: на широком экране блок прилипал к левому краю,
   а справа оставалось до 1400px пустоты. Центровку задаёт только
   margin-inline: auto, ширину — только max-width. */
main > .cta {
  max-width: calc(var(--wrap) - 2 * var(--pad));
  margin-inline: auto;
}

/* --- strip / footer ------------------------------------------------------ */
.strip {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0.9rem var(--pad);
  background: linear-gradient(96deg, var(--violet), var(--brand-pink));
  overflow: hidden;
}
.strip__t {
  max-width: var(--wrap);
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: clamp(1rem, 0.9rem + 0.7vw, 1.35rem);
  letter-spacing: -0.02em;
}
.strip__t b { font-weight: 800; }
.strip__t i { font-weight: 500; opacity: 0.92; }
.strip__t .lol { color: #fff; }

.foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad) calc(clamp(1.75rem, 4vw, 3rem) + env(safe-area-inset-bottom));
}
.foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-2);
}
.foot__brand { display: inline-flex; align-items: baseline; gap: 0; font-size: 1.2rem; text-decoration: none; }
.foot__mail { color: var(--muted); text-decoration: none; margin-right: auto; }
.foot__mail:hover { color: var(--accent); }
.social { display: flex; gap: 0.4rem; }
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  color: var(--ink);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.social a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.social--lg a { width: 48px; height: 48px; }

.badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 45%), 1fr));
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0 clamp(0.5rem, 2vw, 1.5rem);
}
.badges li { display: grid; gap: 0.1rem; font-size: 0.875rem; color: var(--muted); }
.badges__t { color: var(--ink); font-weight: 700; }

.foot__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}
.foot__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--muted);
  text-decoration: none;
}
.foot__meta a:hover { color: var(--accent); }

/* --- 404 / offline ------------------------------------------------------- */
.nf {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 7rem) var(--pad);
  text-align: center;
}
.nf__c {
  font-size: clamp(5rem, 3rem + 16vw, 12rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--accent);
}
.nf__h { font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.75rem); margin: 0.5rem 0 0.75rem; }
.nf__d { color: var(--muted); margin-bottom: 2rem; }
.nf__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-top: 2.5rem; }
.nf__nav a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; }
.nf__nav a:hover { color: var(--accent); }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__art { order: -1; max-width: 26rem; margin: 0 auto; }
  .hero__sub { max-width: 34ch; }
  .ph { grid-template-columns: minmax(0, 1fr); }
  .ph__art { display: none; }
  .ph--post { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sec__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .contact { grid-template-columns: minmax(0, 1fr); }

  .nav { gap: 0.75rem; }
  .nav__end { margin-left: auto; }
  .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: flex-start;
    gap: 0.1rem;
    margin: 0;
    padding: calc(var(--pad) + 4.5rem) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-101%);
    visibility: hidden;
    /* visibility переключается мгновенно, а не плавно: при переходе длиной
       0.45s панель сразу после открытия ещё считалась скрытой, а скрытый
       элемент не принимает фокус — клавиатурный пользователь оставался на
       кнопке. При закрытии наоборот нужна задержка, иначе панель исчезнет
       раньше, чем доедет анимация. */
    transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
  }
  .nav.is-open .nav__links {
    transform: none;
    visibility: visible;
    transition: transform 0.45s var(--ease), visibility 0s;
  }
  .nav__links a {
    width: 100%;
    padding: 0.7rem 0;
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .nav__links a[aria-current] { color: var(--accent); }
  .nav__menu-cta {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    margin-top: 1.5rem;
    padding: 0.9rem 1.75rem !important;
    border: 0 !important;
    border-radius: var(--r-pill);
    background: var(--btn);
    color: var(--btn-ink) !important;
    font-size: 1rem !important;
    font-weight: 700;
  }
  .nav__menu-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    padding-top: 2rem;
  }
  .nav__menu-mail { font-size: 0.9375rem !important; font-weight: 500 !important; color: var(--muted) !important; border: 0 !important; padding: 0 !important; width: auto !important; }
  /* The panel is a child of .nav, so its z-index paints over the brand and
     the controls. Lift those inside the same stacking context. */
  .nav.is-open .nav__brand,
  .nav.is-open .nav__end { position: relative; z-index: 41; }
}

@media (max-width: 40rem) {
  .row__a { grid-template-columns: max-content minmax(0, 1fr) 44px; gap: 0.65rem 0.9rem; align-items: center; }
  .row__n { grid-column: 1; grid-row: 1; }
  .row__i { grid-column: 2; grid-row: 1; height: 2.5rem; justify-self: start; }
  .row__go { grid-column: 3; grid-row: 1; }
  .row__b { grid-column: 1 / -1; grid-row: 2; }
  .foot__bar { border-radius: var(--r); justify-content: center; text-align: center; }
  .foot__mail { margin-right: 0; width: 100%; text-align: center; }
  .info__list li { grid-template-columns: 24px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .nav, .strip, .cta, .nf__nav, .social { display: none; }
  body { background: #fff; color: #000; }
}

/* --- иллюстрации направлений --------------------------------------------
   Вырезаны из макетов, фон снят по яркости, поэтому один файл годится
   для обеих тем. Всегда декоративные: смысл несёт заголовок рядом. */
.card__i {
  width: auto;
  max-width: 100%;
  height: clamp(4.25rem, 11vw, 6rem);
  object-fit: contain;
  object-position: left bottom;
  margin-bottom: 0.6rem;
}
.card:hover .card__i { transform: translateY(-2px); }
.card__i { transition: transform 0.25s var(--ease); }

.row__i { width: auto; height: 2.75rem; object-fit: contain; object-position: center; flex: none; }


.ph__art--svc { display: grid; place-items: center; }
.ph__art--svc > * { grid-area: 1 / 1; }
.ph__art--svc .splat { opacity: 0.45; }
.ph__i { width: min(100%, 17rem); height: auto; }

/* Групповая иллюстрация с макета About. Не фотография команды, а тот же
   рисованный мир, что и маскот, — это сказано в alt. */
.team {
  width: 100%;
  max-width: 46rem;
  height: auto;
  margin: clamp(1.5rem, 4vw, 3rem) auto 0;
}

/* В логотипе акцент — «.lol» вместе с точкой домена, поэтому подчёркивание
   начинается после неё. В слогане акцент без точки, там правило не нужно. */
.nav__brand .lol::after,
.foot__brand .lol::after { left: 0.3em; }

/* Тёмный маскот — вырезанная фигура, поэтому низ обрывается по кадру.
   Растворяем его в фон, чтобы срез не читался как обрезанная картинка. */
.kiko--dark {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

/* --- реквизиты ------------------------------------------------------------ */
.foot__co {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}
.foot__co + .foot__meta { margin-top: 0.75rem; padding-top: 0; border-top: 0; }

.co { display: grid; gap: 0.7rem; margin-top: 1.25rem; }
.co > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.2rem 1.25rem;
  align-items: baseline;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.co > div:last-child { border-bottom: 0; }
.co dt { font-size: 0.8125rem; color: var(--muted); }
.co dd { margin: 0; color: var(--ink); font-weight: 600; }
@media (max-width: 40rem) {
  .co > div { grid-template-columns: minmax(0, 1fr); }
}