/* ---------- tokens ---------- */
:root {
  --red: #e02a1e;
  --ink: #211f1f;
  --fg: var(--ink);
  --em: var(--red);
  --rule: var(--red);
  --cta-bg: var(--red);
  --cta-fg: #fff;
  --pad: 4rem;
  --serif: "Oranienbaum", Georgia, serif;           /* headings: has Cyrillic */
  --display: "Instrument Serif", Georgia, serif;    /* the wordmark and numerals: Latin only */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: min(.6944vw, 10px);      /* 1rem = 10 design px at 1440, scales down below it */
  background: #fff;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  font-family: "Roboto Flex", Inter, system-ui, sans-serif;
  font-stretch: 85%;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--fg);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, canvas { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 400; font-size: inherit; }
em { font-style: normal; color: var(--em); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- type ---------- */
h2 { font-family: var(--serif); font-stretch: normal; font-size: 10.4rem; line-height: .92; letter-spacing: -.02em; }
.h-xl { font-size: 15rem; letter-spacing: -.01em; }
.label { font-size: 2rem; line-height: 1.02; color: var(--em); }
.num { font-family: var(--display); font-stretch: normal; font-size: 15rem; line-height: .8; color: var(--em); letter-spacing: 0; }
.t20 { font-size: 2rem; }
.t22 { font-size: 2.2rem; line-height: 1.04; }
.t32-body { font-size: 3.2rem; line-height: 1.04; letter-spacing: -.025em; }
.t56 { font-size: 5.6rem; line-height: .95; letter-spacing: -.03em; }
.note { max-width: 55.5rem; }
.note--lg { max-width: 44rem; font-size: 3.2rem; letter-spacing: -.025em; }
.stack { display: flex; flex-direction: column; gap: 2.4rem; }
.arrow { display: inline-block; width: .56em; height: .56em; margin-left: .2em; fill: none; stroke: currentColor; stroke-width: 1.5; overflow: visible; }

/* ---------- page and grid: 12 columns of 9.5rem, gutter 2rem, margin 4rem ---------- */
.page { width: 144rem; margin: 0 auto; padding: 0 var(--pad); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; }
.c-1-7 { grid-column: 1 / 7; }
.c-1-9 { grid-column: 1 / 9; }
.c-9-13 { grid-column: 9 / 13; }

/* ---------- first screen: the wordmark and the live lollipop ---------- */
.hero { position: relative; height: 100vh; min-height: 60rem; }
.hero__stage { position: absolute; inset: 0; overflow: hidden; }
.hero__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the wordmark is real type, on screen before any 3D: the canvas above it draws only the candy */
.hero__word {
  position: absolute;
  left: -.019em;
  right: -1em;
  top: calc(4rem - .055em);
  font-family: "Instrument Serif", serif;
  font-stretch: normal;
  font-size: min(33.2437rem, 40vh);
  line-height: .87;
  letter-spacing: 0;
  white-space: nowrap;
}
.phone-only { display: none; }
.hero__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.2rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2rem;
  align-items: end;
  pointer-events: none;
}
.hero__foot a { pointer-events: auto; }
.slogan { grid-column: 1 / 8; font-family: var(--serif); font-stretch: normal; font-size: 6.4rem; line-height: .96; letter-spacing: -.01em; color: var(--em); }
.hero__cta { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 1.6rem; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 6.4rem;
  width: 100%;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 2rem;
  letter-spacing: -.01em;
}
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.btn--tall { height: 8rem; }

/* ---------- sections ---------- */
.sec { padding: 2.7rem 0 12rem; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6.4rem; }
.sec--red, .sec--red + .sec { padding-top: 2.8rem; border-top: 0; }   /* a colour change is already the boundary: no line on top of it */
.sec--process { padding-top: 0; }
.sec--final { padding-bottom: 4rem; }
/* a red block runs edge to edge and ends on a hard line */
.sec--red {
  --fg: #fff;
  --em: var(--ink);
  --rule: #fff;
  --cta-bg: #fff;
  --cta-fg: var(--red);
  color: var(--fg);
  background: var(--red);
  box-shadow: 0 0 0 100vmax var(--red);
  clip-path: inset(0 -100vmax);
}
.sec--ink { --rule: var(--ink); }
.sec--ink .sec__head .label, .sec--ink .num { color: var(--fg); }
.sec__head { display: flex; justify-content: space-between; align-items: flex-start; }

.rows { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2rem;
  align-items: start;
  padding: 3.2rem 0;
  position: relative;
}
.row::before, .step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
}
.sec--final .rows { gap: 5rem; }
.row__link::after { content: ""; position: absolute; inset: 0; }    /* the whole row is the link */
.row__link:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.row > :first-child { grid-column: 1 / 9; }
.row > :last-child { grid-column: 9 / 13; }
.row--icon { align-items: center; padding: 2.4rem 0; }
.row--icon > .icon { grid-column: 1 / 3; }
.row--icon > h3 { grid-column: 3 / 9; }
.icon img { width: 21rem; height: 21rem; object-fit: contain; }

/* the media block, whole from the label to the statement: the coin sits beside the headline */
.doctrine__head { position: relative; height: 89.3rem; }
.doctrine__head h2 { position: relative; z-index: 1; }
.doctrine__statement { max-width: 120.9rem; }

/* ---------- how it works: head, intro and the mic share one tall field above the steps ---------- */
.process__top { position: relative; height: 112rem; }
.process__head { position: absolute; left: 0; right: 0; top: 2.7rem; z-index: 1; }
.process__title { position: absolute; left: 0; top: 14rem; width: 101.5rem; z-index: 1; }
.process__intro { position: absolute; left: 0; bottom: 8rem; width: 55.5rem; z-index: 1; }

/* big objects, placed by hand in the layout */
.obj { position: absolute; pointer-events: none; }
.obj img { display: block; width: 100%; height: auto; }
.obj--coin { left: 27.7rem; top: 16.3rem; width: 79.7rem; }
.obj--mic { left: 47.1rem; top: 23.4rem; width: 91rem; }
.obj--plane { left: 70.5rem; top: 2rem; width: 62.6rem; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 2rem; }
.step { position: relative; padding-top: 4.1rem; display: flex; flex-direction: column; gap: 4rem; }
.step__n { font-family: var(--display); font-stretch: normal; font-size: 11rem; line-height: .9; letter-spacing: 0; color: var(--fg); }

/* ---------- authors ---------- */
.people { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2rem; }
.person__photo { position: relative; height: 60rem; overflow: hidden; background: var(--red); }
.person__photo img { position: absolute; max-width: none; }
.p-grigory { width: 70rem; height: 70rem; left: -7.5rem; top: -4.6rem; filter: brightness(1.18); }
.p-artem { width: 44rem; height: 60rem; left: 0; top: 0; }
.person__info { padding-top: 1.9rem; }
.person__name { font-family: var(--serif); font-stretch: normal; font-size: 7.2rem; line-height: .9; letter-spacing: -.01em; color: var(--em); }
.person__role { margin-top: 1.2rem; font-size: 2.2rem; line-height: 1.1; }
.person__info .t22 { margin-top: 1.2rem; }

/* ---------- tariffs ---------- */
.tariffs { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2rem; }
.tariff { display: flex; flex-direction: column; gap: 1.6rem; padding-top: 2rem; border-top: 1px solid var(--rule); min-height: 92rem; }
.tariff__pic { height: 36rem; }
.tariff__pic img { width: 100%; height: 100%; object-fit: contain; }
.tariff__price { font-size: 9.6rem; line-height: .9; letter-spacing: -.04em; }
.bullets { list-style: none; display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.2rem; }
.bullets li { position: relative; padding-left: 2rem; font-size: 2.2rem; line-height: 1.04; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .74rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--red); }
.tariff .btn { margin-top: auto; }
.tariff--accent h3, .tariff--accent .tariff__price { color: var(--em); }

/* ---------- final ---------- */
/* the last screen: with the section's bottom padding it is exactly one viewport tall, headline on top, offer pinned to the bottom */
.final { position: relative; display: flex; flex-direction: column; gap: 3.6rem; height: calc(100vh - 4rem); min-height: 64rem; padding-top: 3.6rem; border-top: 1px solid var(--rule); }
.final > :not(.obj) { position: relative; z-index: 1; }
.final__title { font-size: min(10.4rem, 12.2vh); }
.final__text { max-width: 67rem; margin-top: auto; }
.final__cta { width: 67rem; }
.final > .label { width: 67rem; text-align: center; color: var(--fg); }

/* ---------- reveal, step by step ---------- */
.ln { display: block; overflow: hidden; padding: .16em 0; margin: -.16em 0; }
.ln + .ln { margin-top: -.32em; }      /* adjoining negative margins collapse: this keeps the layout's leading */
.ln__in { display: block; }
.anim .ln__in { transform: translateY(118%); }
.anim .in .ln__in { transform: none; transition: transform 1.1s var(--out) calc(var(--d, 0ms) + var(--n, 0) * 120ms); }

/* reveal transitions apply only until .done, so afterwards the hover transitions below are in charge */
.anim .rv:not(.in) { opacity: 0; transform: translateY(2.4rem); }
.anim .rv.in:not(.done) { transition: opacity .7s var(--ease) var(--d, 0ms), transform .9s var(--out) var(--d, 0ms); }

/* a row draws its line, then the icon pops, then the words arrive */
.anim .row:not(.in)::before, .anim .step:not(.in)::before { transform: scaleX(0); }
.anim .row.in:not(.done)::before, .anim .step.in:not(.done)::before { transition: transform 1s var(--out) var(--d, 0ms); }
.anim .row:not(.in) > *, .anim .step:not(.in) > * { opacity: 0; transform: translateY(1.6rem); }
.anim .row:not(.in) > .icon { transform: scale(.72) rotate(-10deg); }
.anim .row.in:not(.done) > *, .anim .step.in:not(.done) > * {
  transition: opacity .6s var(--ease) calc(var(--d, 0ms) + var(--c, 0) * 110ms + 140ms),
              transform .8s var(--out) calc(var(--d, 0ms) + var(--c, 0) * 110ms + 140ms);
}
.anim .row.in:not(.done) > .icon { transition-timing-function: var(--ease), var(--spring); }
.row > :nth-child(2), .step > :nth-child(2) { --c: 1; }
.row > :nth-child(3) { --c: 2; }

/* one big object per block: it arrives once and then stays put */
.anim .obj img { opacity: 0; transform: translate3d(5rem, 9rem, 0) rotate(-12deg) scale(.84); }
.anim .obj.in img {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease) calc(var(--d, 0ms) + 260ms), transform 1.3s var(--spring) calc(var(--d, 0ms) + 260ms);
}

/* first screen, in reading order: wordmark, slogan, offer. The candy lands whenever the 3D is ready */
.anim .hero.in .hero__word .ln__in { transform: none; transition: transform 1.1s var(--out) calc(var(--n, 0) * 110ms); }
.anim .hero.in .slogan .ln__in { transform: none; transition: transform 1.1s var(--out) calc(300ms + var(--n, 0) * 110ms); }
.anim .hero__cta { opacity: 0; transform: translateY(2.4rem); }
.anim .hero.in .hero__cta { opacity: 1; transform: none; transition: opacity .7s var(--ease) 560ms, transform .9s var(--out) 560ms; }

/* ---------- interactions: what you point at takes the accent, pictures lift one small step ---------- */
.row h3, .step__n, .tariff h3, .tariff__price { transition: color .2s ease; }
.row::before, .step::before { transition: background-color .2s ease; }
.arrow, .icon img, .tariff__pic img, .person__photo img { transition: transform .25s var(--out); }
.person__photo img { transform-origin: 50% 100%; }
.btn { transition: background-color .2s ease, color .2s ease, transform .12s var(--out); }
.btn:active { transform: scale(.985); }

@media (hover: hover) and (pointer: fine) {
  .row:hover h3, .step:hover .step__n, .tariff:hover h3, .tariff:hover .tariff__price { color: var(--em); }
  .row:hover::before, .row:hover + .row::before, .step:hover::before { background: var(--em); }
  .btn:hover { background: var(--ink); color: #fff; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .row:hover .arrow { transform: translate(.3rem, -.3rem); }
  .row--icon:hover .icon img, .tariff:hover .tariff__pic img { transform: translateY(-.6rem); }
  .person:hover .person__photo img { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- phones: one column, 1rem = 10px of the 390 layout ---------- */
@media (max-width: 767px) {
  :root { --pad: 1.6rem; }
  html { font-size: min(2.5641vw, 13px); }
  .page { width: 39rem; }

  h2 { font-size: 5.2rem; }
  .h-xl { font-size: 6.4rem; }
  .label { font-size: 1.4rem; }
  .num { font-size: 8.8rem; }
  .t20 { font-size: 1.4rem; }
  .t22 { font-size: 1.6rem; }
  .t32-body { font-size: 2rem; }
  .t56 { font-size: 3.6rem; }
  .note { max-width: none; }
  .note--lg { max-width: none; font-size: 2rem; }
  .stack { gap: 1.4rem; }
  .grid { display: flex; flex-direction: column; gap: 2.8rem; }
  .btn { height: 5.6rem; }
  .btn--tall { height: 6.4rem; }

  /* first screen: the slogan and the note stand either side of the stick */
  .hero { height: 100svh; }
  .hero__word { top: calc(1.6rem - .055em); font-size: min(10.4526rem, 12.5svh); }
  .phone-only { display: inline; }
  .hero__foot { display: block; bottom: 1.6rem; }
  .slogan { position: absolute; left: 0; bottom: 8.4rem; width: 16.5rem; font-size: 2.8rem; }
  .hero__cta { gap: 2rem; }
  .hero__cta .t20 { width: 15.7rem; margin-left: auto; }

  .sec { padding: 1.6rem 0 5.6rem; gap: 2.8rem; }
  .sec--red, .sec--red + .sec { padding-top: 2rem; }
  .sec--red { padding-bottom: 6.4rem; }
  .sec--process { padding-top: 2rem; }
  .sec--final { padding-bottom: 1.6rem; }
  .sec--final .rows { gap: 0; }

  .row { display: flex; flex-direction: column; gap: .8rem; padding: 1.4rem 0 2rem; }
  .row--icon { display: grid; grid-template-columns: 9.6rem 1fr; gap: 1.2rem; padding: 1.2rem 0 2rem; }
  .row--icon > .icon { grid-column: 1; }
  .row--icon > h3 { grid-column: 2; }
  .row--icon > :last-child { grid-column: 1 / -1; }
  .icon img { width: 9.6rem; height: 9.6rem; }

  /* big objects join the flow, shifted the way the layout has them */
  .doctrine__head { height: auto; display: flex; flex-direction: column; gap: 2.8rem; }
  .doctrine__head h2 { order: 1; }
  .obj--coin { order: 2; position: relative; left: 1.9rem; top: -2.4rem; width: 32rem; height: 28rem; }
  .doctrine__statement { max-width: none; font-size: 4.4rem; }

  .process__top { height: auto; display: flex; flex-direction: column; gap: 2.8rem; }
  .process__head, .process__title, .process__intro { position: static; width: auto; }
  .process__head { order: 1; }
  .process__title { order: 2; }
  .obj--mic { order: 3; position: relative; left: -1.1rem; top: -3.4rem; width: 38rem; height: 31rem; }
  .process__intro { order: 4; }

  .steps { display: flex; flex-direction: column; }
  .step { flex-direction: row; align-items: center; gap: 1.2rem; padding: 1.3rem 0 1.6rem; }
  .step__n { flex: none; width: 8.4rem; font-size: 6.4rem; }

  .people { display: flex; flex-direction: column; gap: 2.8rem; }
  .person__photo { height: 48.8rem; }
  .p-grigory { width: 57rem; height: 57rem; left: -6.1rem; top: -3.74rem; }
  .p-artem { width: 35.8rem; height: 48.8rem; }
  .person__info { padding-top: 1.4rem; }
  .person__name { font-size: 4.8rem; }
  .person__role { margin-top: .8rem; font-size: 1.6rem; }
  .person__info .t22 { margin-top: .8rem; }

  .tariffs { display: flex; flex-direction: column; gap: 2.8rem; }
  .tariff { min-height: 0; gap: 1.2rem; padding: 1.2rem 0 1.6rem; }
  .tariff__pic { height: 26rem; }
  .tariff__price { font-size: 7.2rem; }
  .tariff .btn { margin-top: 0; }
  .bullets { gap: 1rem; margin-top: .6rem; }
  .bullets li { padding-left: 1.6rem; font-size: 1.6rem; }
  .bullets li::before { top: .53rem; width: .6rem; height: .6rem; }

  .final { gap: 2.8rem; height: auto; min-height: calc(100svh - 1.6rem); padding-top: 2.8rem; }
  .final__title { order: -1; font-size: 5.2rem; }
  .obj--plane { position: relative; left: 2.9rem; top: 0; width: 30rem; height: 27rem; }
  .final__text { max-width: none; }
  .final__cta, .final > .label { width: 100%; }
}