/* ── tokens ─────────────────────────────────────────────── */
:root {
  /* Dark-only by design — without this the browser keeps scrollbars and form
     controls light on a dark page. */
  color-scheme: dark;

  --ink:      #0B0B0C;
  --ink-2:    #101012;
  --ink-3:    #16161A;
  --text:     #F4F1EC;
  --muted:    #96918A;
  --line:     rgba(244, 241, 236, .11);
  --line-2:   rgba(244, 241, 236, .2);
  --accent:   #FF3D57;
  --accent-2: #4DE0DA;

  --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --sec: clamp(4.5rem, 11vw, 9rem);
  --r:   14px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.65 var(--sans);
  letter-spacing: -.005em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1.03; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: #fff; }

/* film grain over everything — pure CSS, no image request */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 9;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-3%, 2%) }
  40% { transform: translate(2%, -3%) }
  60% { transform: translate(-2%, -2%) }
  80% { transform: translate(3%, 1%) }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--text);
  color: var(--ink);
  font-weight: 700;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ── layout ─────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--narrow { max-width: 820px; }

.sec { padding-block: var(--sec); }
.sec--alt { background: var(--ink-2); border-block: 1px solid var(--line); }

.label {
  font: 400 .75rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.sec__h {
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.4rem);
  max-width: 16ch;
}
.sec__lead {
  margin-top: 1rem;
  color: var(--muted);
  max-width: 46ch;
}

.eyebrow {
  font: 400 .75rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  /* Ink on the neon, not white: white on #FF3D57 is 3.5:1, which fails AA for
     15px bold. Ink gives 5.7:1 and keeps the accent colour untouched. */
  color: var(--ink);
  box-shadow: 0 0 0 0 rgba(255, 61, 87, .5);
}
.btn--accent:hover { box-shadow: 0 8px 30px -8px rgba(255, 61, 87, .7); }
.btn--ghost:hover { border-color: var(--text); background: rgba(244, 241, 236, .06); }
.btn--sm { padding: .6rem 1.05rem; font-size: .85rem; }

/* ── header ─────────────────────────────────────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 11, 12, .82);          /* fallback before color-mix */
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.hdr.is-stuck { border-bottom-color: var(--line); }

.hdr__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; }
.brand__mark { width: 30px; height: 30px; color: var(--text); flex: none; }
.brand__name { font-weight: 800; letter-spacing: -.03em; font-size: 1.05rem; }

.nav { display: none; gap: 1.75rem; font-size: .9rem; color: var(--muted); }
.nav a { transition: color .18s; }
.nav a:hover { color: var(--text); }

.hdr__right { display: flex; align-items: center; gap: 1rem; }

/* The switcher used to sit flush against the nav, so "FAQ EN CS UA RU" read as
   one row of links. It is its own control now: a bordered pill, set apart by a
   hairline, with the current language as a filled chip. */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.lang__btn {
  padding: .32rem .5rem;
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .06em;
  color: var(--muted);
  border-radius: 999px;
  transition: color .18s, background .18s;
}
.lang__btn abbr {
  text-decoration: none;   /* the full language name belongs to the tooltip */
  cursor: inherit;
}
.lang__btn:hover { color: var(--text); background: rgba(244, 241, 236, .06); }
.lang__btn[aria-current="true"] {
  color: var(--ink);
  background: var(--text);
}

.hdr .btn--sm { display: none; }

/* ── hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(4rem, 12vw, 8.5rem) clamp(3.5rem, 9vw, 7rem);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
}
.hero::before {
  width: 58vw; height: 58vw;
  max-width: 720px; max-height: 720px;
  /* right: 0, not a negative offset — a negative one widens the document and
     lets the page pan sideways on iOS even with overflow-x hidden. The blur
     itself may spill past the edge, ink overflow does not scroll. */
  top: -14%; right: 0;
  /* Alpha is set by contrast, not by taste: the un-blurred core of this glow is
     the real background under the hero lead at narrow widths, where the column
     reaches the right edge. At .32 muted text on that core measured 4.18:1. */
  background: radial-gradient(circle, rgba(255, 61, 87, .22), transparent 70%);
}
.hero::after {
  width: 50vw; height: 50vw;
  max-width: 600px; max-height: 600px;
  bottom: -22%; left: 0;
  /* This one bleeds down into the services section, so 12px accent labels sit
     on it — the strict 4.5:1 threshold, not the large-text 3:1 one. */
  background: radial-gradient(circle, rgba(77, 224, 218, .10), transparent 70%);
}

.hero__h {
  margin-top: 1.4rem;
  font-size: clamp(2.7rem, 1rem + 9.5vw, 6.5rem);
  max-width: 13ch;
}
.hero__h em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.hero__lead {
  margin-top: 1.75rem;
  max-width: 48ch;
  color: var(--muted);
  font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font: 400 .78rem/1.4 var(--mono);
  letter-spacing: .04em;
  color: var(--muted);
}
.hero__meta li { position: relative; padding-left: 1rem; }
.hero__meta li::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* ── service cards ──────────────────────────────────────── */
.cards {
  display: grid;
  gap: 1rem;
  margin-top: 2.75rem;
}

.card {
  position: relative;
  padding: 1.9rem 1.6rem 1.7rem;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .25s, transform .25s;
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card__n {
  font: 400 .72rem/1 var(--mono);
  letter-spacing: .12em;
  color: var(--muted);
}
.card h3 { margin: .9rem 0 .7rem; font-size: 1.45rem; }
.card p { color: var(--muted); font-size: .96rem; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.25rem;
}
.tags li {
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 400 .72rem/1.4 var(--mono);
  color: var(--muted);
}

/* ── audience ───────────────────────────────────────────── */
.who {
  display: grid;
  gap: 0;
  margin-top: 2.75rem;
  border-top: 1px solid var(--line);
}
.who__i { padding: 1.9rem 0; border-bottom: 1px solid var(--line); }
.who__i h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.who__i p { color: var(--muted); max-width: 54ch; font-size: .96rem; }

/* ── reels ──────────────────────────────────────────────── */
.reels {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  max-width: 780px;
}
.reel {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-3);
  /* Instagram renders the embed card at roughly this ratio and reports its real
     height only to embed.js, which we deliberately do not load. The ratio scales
     with the column, so nothing gets clipped at any width. */
  aspect-ratio: 20 / 35;
}
.reel iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.work__more { margin-top: 2rem; }

/* ── process ────────────────────────────────────────────── */
.steps {
  display: grid;
  gap: 1rem;
  margin-top: 2.75rem;
  counter-reset: step;
}
.step {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink);
}
.step__n {
  font: 400 .72rem/1 var(--mono);
  letter-spacing: .12em;
  color: var(--accent);
}
.step h3 { margin: .85rem 0 .55rem; font-size: 1.2rem; }
.step p { color: var(--muted); font-size: .94rem; }

/* ── faq ────────────────────────────────────────────────── */
.faq { margin-top: 2.5rem; border-top: 1px solid var(--line); max-width: 800px; }

.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  margin-left: auto;
  font: 400 1.4rem/1 var(--mono);
  color: var(--accent);
  transition: transform .22s;
  flex: none;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p {
  padding-bottom: 1.4rem;
  color: var(--muted);
  max-width: 62ch;
  font-size: .96rem;
}

/* ── contact ────────────────────────────────────────────── */
.cta { background: var(--ink-2); border-top: 1px solid var(--line); }
.cta__in { text-align: center; }
.cta__h { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); margin-inline: auto; max-width: 16ch; }
.cta__p { margin: 1.25rem auto 0; color: var(--muted); max-width: 44ch; }

.chan {
  display: grid;
  gap: .75rem;
  margin-top: 2.75rem;
  grid-template-columns: repeat(2, 1fr);
  max-width: 620px;
  margin-inline: auto;
}
.chan__i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink);
  transition: border-color .2s, transform .2s;
}
.chan__i:hover { border-color: var(--accent); transform: translateY(-3px); }
.chan__i svg { width: 24px; height: 24px; color: var(--accent); margin-bottom: .35rem; }
.chan__t { font-weight: 700; }
.chan__s { font: 400 .76rem/1.4 var(--mono); color: var(--muted); }

/* ── footer ─────────────────────────────────────────────── */
.foot {
  padding-block: 3rem 6.5rem;
  border-top: 1px solid var(--line);
}
.foot__in { display: grid; gap: .35rem; }
.foot__brand { font-weight: 800; letter-spacing: -.03em; font-size: 1.05rem; }
.foot__tag, .foot__legal {
  font: 400 .78rem/1.5 var(--mono);
  color: var(--muted);
}
.foot__legal { margin-top: .75rem; }

/* ── sticky mobile bar ──────────────────────────────────── */
.bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  gap: .5rem;
  padding: .6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(11, 11, 12, .92);          /* fallback before color-mix */
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.bar__i {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
}
.bar__i--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ── legal documents ────────────────────────────────────── */
.doc { max-width: 46rem; }
.doc h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
}
.doc h3 { margin-top: 1.75rem; font-size: 1.1rem; }
.doc p, .doc li { color: var(--muted); }
.doc p { margin-top: 1rem; }
.doc ul { margin-top: 1rem; display: grid; gap: .6rem; }
.doc li { position: relative; padding-left: 1.1rem; }
.doc li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.doc strong { color: var(--text); font-weight: 700; }
.doc code {
  font: 400 .88em/1 var(--mono);
  padding: .15em .4em;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
}
.doc a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.doc__meta {
  margin-top: .75rem;
  font: 400 .78rem/1.5 var(--mono);
  color: var(--muted);
}
.doc__draft {
  padding: .75rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  font: 500 .85rem/1.4 var(--mono);
  color: var(--accent);
}
.doc .work__more { margin-top: 3rem; }

/* ── 404 ────────────────────────────────────────────────── */
.nf__in {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sec);
}
.nf__in .sec__h { margin-top: .5rem; }

/* ── reveal on scroll ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 60ms; }
.reveal--d2 { transition-delay: 120ms; }
.reveal--d3 { transition-delay: 180ms; }

/* ── breakpoints ────────────────────────────────────────── */
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .foot__in {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .foot__legal { margin-top: 0; grid-column: 2; grid-row: 1 / span 2; text-align: right; }
}

@media (min-width: 1000px) {
  .nav { display: flex; }
  /* Only when there is a nav to divide from — the legal pages have none, and a
     lone hairline reads as a rendering glitch. */
  .nav + .hdr__right::before {
    content: "";
    align-self: stretch;
    width: 1px;
    margin-block: .85rem;
    background: var(--line);
  }
  .hdr .btn--sm { display: inline-flex; }
  .bar { display: none; }
  .foot { padding-bottom: 3rem; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .who { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .who__i { border-bottom: 0; }
}

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