/* ============================================================
   Честное IT — dark technical, ember accent
   Tokens adapted from the reference direction; Cyrillic-native faces.
   ============================================================ */

:root {
  --bg:        #191919;
  --surface:   #252525;
  --fg:        #F5F4F2;
  --muted:     #A3A3A3;
  --dim:       #7C7C7C;
  --ember:     #DE643B;
  --ember-2:   #E9754D;
  --on-ember:  #1A1108;
  --hairline:  rgba(255, 255, 255, 0.12);
  --hairline-2:rgba(255, 255, 255, 0.06);

  /* comparison only — desaturated so they read as marks, not signal lights,
     and kept off the ember hue so the accent stays the accent */
  --pos:       #86C296;
  --neg:       #E0868F;
  --pos-wash:  rgba(134, 194, 150, 0.07);
  --neg-wash:  rgba(224, 134, 143, 0.07);

  --r: 4px;
  --wrap: 1216px;
  --gut: clamp(20px, 5vw, 48px);
  --pad: clamp(72px, 9vw, 128px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Golos Text", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: "Onest", "Golos Text", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

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

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ember); color: var(--on-ember); padding: 12px 18px; }
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ── micro type ───────────────────────────────────────────── */
.label,
.btn,
.pcard__n {
  font-family: "Onest", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
}

.label {
  font-size: 0.6875rem;
  color: var(--dim);
}
.label--on { color: var(--fg); }
.label--pos { color: var(--pos); }
.label--neg { color: var(--neg); }

/* ── section headings ─────────────────────────────────────── */
/* The heading is marked from the side rather than underlined — the same
   left-bar device the comparison table uses, and it costs no vertical space. */
.sechead {
  border-left: 2px solid var(--ember);
  padding-left: clamp(18px, 1.8vw, 24px);
  margin-bottom: clamp(36px, 4.5vw, 60px);
}

/* The steps carry their own top padding, so trim the header gap to
   land on the same 60px the other sections open with. */
.sechead--tight { margin-bottom: clamp(20px, 2.9vw, 38px); }

.h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.1;
}

/* ── buttons + links ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  padding: 15px 22px;
  min-height: 44px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.btn--primary { background: var(--ember); color: var(--on-ember); border-color: var(--ember); }
.btn--primary:hover { background: var(--ember-2); border-color: var(--ember-2); }

.btn--sm { padding: 12px 20px; min-height: 40px; }
/* one short word — widen the sides so it doesn't read as a stub */
.btn--lg { padding: 18px 40px; }

.link {
  font-size: 0.9375rem;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.link:hover { color: var(--fg); border-bottom-color: var(--ember); }

/* ── topbar ───────────────────────────────────────────────── */
/* scrolls away with the page — nothing sits over the content */
.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.mark__sq { width: 9px; height: 9px; background: var(--ember); }

/* ── hero ─────────────────────────────────────────────────── */
.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(44px, 4vw, 64px);
  padding-right: clamp(24px, 4vw, 64px);
  padding-left: max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut));
}

.hero__h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.038em;
}
.hero__h1 em { font-style: normal; color: var(--ember); }

.hero__sub {
  margin-top: clamp(18px, 2.2vw, 26px);
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  line-height: 1.4;
}


.hero__art {
  position: relative;
  align-self: stretch;
  min-height: 400px;
  border-left: 1px solid var(--hairline);
  background-image:
    linear-gradient(to right, var(--hairline-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline-2) 1px, transparent 1px);
  background-size: 88px 88px;
  overflow: hidden;
}

.iso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.iso .g { stroke: rgba(255, 255, 255, 0.09); }
.iso .e { stroke: rgba(255, 255, 255, 0.30); }
.iso .f { stroke: rgba(255, 255, 255, 0.13); }
.iso .a { stroke: var(--ember); stroke-width: 1.5; }
.iso .a-dot { fill: var(--ember); }

@media (prefers-reduced-motion: no-preference) {
  .iso .a { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 2.2s var(--ease) .35s forwards; }
  .iso .a-dot { opacity: 0; animation: pop .4s var(--ease) 2.3s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop  { to { opacity: 1; } }

/* ── bands ────────────────────────────────────────────────── */
/* Each band publishes its own tone and its opposite, so anything that has to
   match or contrast with the background works wherever the section is moved. */
.band {
  --band-bg: var(--bg);
  --band-alt: var(--surface);
  padding-block: var(--pad);
  border-top: 1px solid var(--hairline);
}
.band--surface {
  --band-bg: var(--surface);
  --band-alt: var(--bg);
  background: var(--surface);
}

/* ── the three tenets, stacked in the hero column ─────────── */
.tenets {
  margin-top: clamp(64px, 18vh, 240px);
  border-top: 1px solid var(--hairline);
  max-width: 40rem;
}

.tenet {
  padding-block: clamp(13px, 1.45vw, 19px);
  border-bottom: 1px solid var(--hairline);
}

.tenet__h { font-size: 1.0625rem; margin-bottom: 6px; }
.tenet__p { color: var(--muted); font-size: 0.9375rem; }

/* ── comparison ───────────────────────────────────────────── */
/* spacing below the heading is owned by .sechead, same as the other sections */
.cmp { margin-top: 0; }

.cmp__head,
.cmp__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.cmp__head { padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.cmp__head .label { padding-left: 18px; }

.cmp__row { border-bottom: 1px solid var(--hairline); }

/* Both sides are stated with the same weight — the claim on the right is not
   a footnote. The colour bar does the sorting, so nothing has to be dimmed.
   Padding lives on the cells, not the row, so the two bars stay equal height. */
.cmp__us,
.cmp__them {
  padding: clamp(20px, 2.4vw, 28px) 0 clamp(20px, 2.4vw, 28px) 16px;
  border-left: 2px solid;
}

.cmp__us   { border-left-color: var(--pos); background: linear-gradient(to right, var(--pos-wash), transparent 70%); }
.cmp__them { border-left-color: var(--neg); background: linear-gradient(to right, var(--neg-wash), transparent 70%); }

.cmp__lbl { display: none; }

/* ── process: a vertical rail read top to bottom ──────────── */
.steps { margin-top: 0; }

.step {
  position: relative;
  padding: 22px 0 22px 56px;
}

/* Rail: one dashed line the whole way down. Each step draws node-centre
   to node-centre, so segments meet exactly on the points. */
.step::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 31px;
  bottom: -31px;
  width: 3px;
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.20) 0 7px, transparent 7px 14px);
}

/* node — ember marks the stages you take part in */
.step::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 27px;
  width: 9px;
  height: 9px;
  background: var(--ember);
}

.step__h { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); margin-bottom: 8px; }
.step__p { font-size: 0.9375rem; color: var(--muted); max-width: 62ch; }

/* Передача результата — the target node, where the problem is solved */
.step--result::after {
  left: 8px;
  top: 24px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ember);
  /* opaque halo first, so the rail doesn't read through the soft ring */
  box-shadow: 0 0 0 4px var(--band-bg), 0 0 0 10px rgba(222, 100, 59, 0.16);
}
/* Поддержка — open-ended: the line trails off instead of stopping */
.step--ongoing::before {
  bottom: -78px;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}

/* ── team ─────────────────────────────────────────────────── */
.sprite { position: absolute; }

.team {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}

.member { text-align: center; }

.member__frame {
  position: relative;
  /* the circle sits inside the column rather than filling it, so the row
     reads as five portraits with air around them */
  width: 75%;
  aspect-ratio: 1;
  margin: 0 auto 18px;
  background: var(--band-alt);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  overflow: hidden;
}

/* One photograph among four schematics — shown as shot, no filtering. */
.member__ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* square box inside the circle; the 4:5 artwork centres itself in it */
.bot {
  position: absolute;
  inset: 16%;
  width: 68%;
  height: 68%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.26);
  /* the 200×250 artwork is drawn into a ~105px box, so it scales by ~0.42 —
     the stroke has to be set in artwork units to land near 1.7px on screen */
  stroke-width: 4;
  stroke-linecap: square;
}

/* faint plotting grid behind the schematics, as in the hero */
.member:not(:first-child) .member__frame {
  background-image:
    linear-gradient(to right, var(--hairline-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline-2) 1px, transparent 1px);
  background-size: 22px 22px;
}

.member__n {
  display: block;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
}
.member__r { display: block; margin-top: 3px; color: var(--muted); font-size: 0.9375rem; }

/* ── CTA ──────────────────────────────────────────────────── */
/* One line of copy and a short button — this band no longer needs the full
   section padding the content sections use. */
.cta {
  position: relative;
  padding-block: clamp(52px, 6vw, 84px);
  border-top: 1px solid var(--hairline);
  isolation: isolate;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 50%, #000 20%, transparent 78%);
}

.cta__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
}

.cta__h {
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* ── footer ───────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--hairline); }
.footer__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  padding-block: 34px;
}
.footer__in .link { margin-left: auto; }

/* the name is set like the email but without the underline — it isn't a link */
.footer__name {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ── reveal ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── responsive ───────────────────────────────────────────── */

/* Hero owns the whole first screen — the next section starts at the fold. */
@media (min-width: 901px) {
  .hero__top { min-height: calc(100vh - 64px); }

  @supports (height: 100svh) {
    .hero__top { min-height: calc(100svh - 64px); }
  }
}

@media (max-width: 900px) {
  .hero__top { grid-template-columns: 1fr; }
  .hero__copy { padding-inline: var(--gut); padding-bottom: clamp(36px, 5vw, 56px); }
  .hero__art { border-left: 0; border-top: 1px solid var(--hairline); min-height: 340px; }

  /* once the row wraps, the gap has to clear the names above it */
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
}

@media (max-width: 560px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  /* only two columns left — let the circles keep their presence */
  .member__frame { width: 86%; margin-bottom: 12px; }
  .member__n { font-size: 1rem; }
  .member__r { font-size: 0.875rem; }
}

@media (max-width: 560px) {
  /* keep the sticky CTA on one line next to the wordmark */
  .topbar .btn {
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
    padding: 10px 12px;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  .step { padding-left: 34px; }
  .step::before { left: 10px; }
  .step::after { left: 7px; }
  .step--result::after { left: 4px; }

  .cmp__head { display: none; }
  .cmp__row { grid-template-columns: 1fr; gap: 10px; padding-block: 14px; }
  .cmp__us, .cmp__them { padding-block: 14px; }
  .cmp__lbl { display: block; margin-bottom: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}