/*
 * main.css — служебные стили
 * 1) Стили плавного скролла Lenis (классы .lenis-*).
 * 2) Шрифтовые фолбэки с метрикой под основной шрифт — чтобы текст
 *    не «прыгал», пока грузятся веб-шрифты.
 */
html.lenis,html.lenis body {
  height:auto
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow:clip
}

.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch] {
  overscroll-behavior:contain
}

.lenis.lenis-smooth iframe {
  pointer-events:none
}

.lenis.lenis-autoToggle {
  transition-property:overflow;
  transition-duration:1ms;
  transition-behavior:allow-discrete
}

@font-face {
  font-family:arial narrow fallback;
  src:local(Arial Narrow);
  size-adjust:93%;
  ascent-override:103%;
  descent-override:31%;
  line-gap-override:14%
}

:root {
  --font-family: "font", -apple-system, blinkmacsystemfont, avenir next, avenir, segoe ui, helvetica neue, helvetica, cantarell, ubuntu, roboto, noto, arial, sans-serif;
  --lightning-color: #8898e7;
  --ease-in-power1: cubic-bezier(.55, .085, .68, .53);
  --ease-out-power1: cubic-bezier(.25, .46, .45, .94);
  --ease-in-out-power1: cubic-bezier(.455, .03, .515, .955);
  --ease-in-power2: cubic-bezier(.55, .055, .675, .19);
  --ease-out-power2: cubic-bezier(.215, .61, .355, 1);
  --ease-in-out-power2: cubic-bezier(.645, .045, .355, 1);
  --ease-in-power3: cubic-bezier(.895, .03, .685, .22);
  --ease-out-power3: cubic-bezier(.165, .84, .44, 1);
  --ease-in-out-power3: cubic-bezier(.77, 0, .175, 1);
  --ease-in-power4: cubic-bezier(.755, .05, .855, .06);
  --ease-out-power4: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-power4: cubic-bezier(.86, 0, .07, 1);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
  --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-sine: cubic-bezier(.47, 0, .745, .715);
  --ease-out-sine: cubic-bezier(.39, .575, .565, 1);
  --ease-in-out-sine: cubic-bezier(.445, .05, .55, .95);
  --ease-in-back: cubic-bezier(.6, -.28, .735, .045);
  --ease-out-back: cubic-bezier(.175, .885, .32, 1.275);
  --ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55);
  --ease-bounce: cubic-bezier(.47, 1.64, .41, .8);
  --ease-out-bounce: cubic-bezier(.17, .67, .3, 1.33);
  --ease-out: cubic-bezier(.37, .31, 0, 1);
  --ease-out-swift: cubic-bezier(.55, 0, .1, 1);
  --ease-smooth: cubic-bezier(.32, .72, 0, 1);
  --ease-smooth-out: cubic-bezier(.4, 0, 0, 1);
  --ease-smooth-in-out: cubic-bezier(.75, 0, .25, 1);
  --ease-out-gentle: cubic-bezier(.17, 1.38, .35, .96);
  --ease-in-out-soft: cubic-bezier(.4, .15, 0, 1);
  --ease-opacity: cubic-bezier(.4, 0, .2, 1);
  --grid-margin: 1.5rem;
  --grid-columns: 6;
  --grid-gutter: 1rem;
  --grid-column-width: calc( ((var(--vw, 1vw) * 100) - (2 * var(--grid-margin))) / var(--grid-columns) - (var(--grid-gutter) * (var(--grid-columns) - 1) / var(--grid-columns)) );
  --grid: repeat(var(--grid-columns), minmax(0, 1fr))
}

@media (width >= 991px) {
  :root {
    --grid-margin: 2.5rem;
    --grid-columns: 12
  }

}

@keyframes color-blink-in {
  0% {
    color:var(--lightning-color);
    opacity:0
  }

  20% {
    opacity:1
  }

  35% {
    color:var(--lightning-color)
  }

  55% {
    opacity:.6
  }

  70% {
    color:inherit
  }

  85% {
    opacity:1
  }

  to {
    opacity:1
  }

}

@keyframes text-fade-in {
  0% {
    color:inerhit;
    opacity:1
  }

  1% {
    color:var(--lightning-color);
    opacity:1
  }

  15% {
    opacity:.2
  }

  30% {
    opacity:.8
  }

  40% {
    color:var(--lightning-color);
    opacity:1
  }

  55% {
    opacity:1
  }

  70% {
    color:inherit;
    opacity:.7
  }

  85% {
    opacity:1
  }

  to {
    opacity:1
  }

}

@keyframes blink {
  0% {
    opacity:1
  }

  20% {
    opacity:.3
  }

  35% {
    opacity:.85
  }

  55% {
    opacity:.2
  }

  70% {
    opacity:1
  }

  to {
    opacity:1
  }

}

[data-text-fade-in]:not(.is-inview) .split-word {
  animation:none;
  animation-delay:0
}

[data-text-fade-in]:not(.is-inview) .split-char {
  animation:none;
  animation-delay:0
}

@media (prefers-reduced-motion: no-preference) {
  [data-text-fade-in].is-inview .split-word {
    animation:blink .26s var(--ease-out-power2) both;
    animation-delay:calc((var(--word) - 1) * 39ms + .175s)
  }

}

@media (prefers-reduced-motion: no-preference) {
  [data-text-fade-in].is-inview .split-char {
    animation:text-fade-in .32s var(--ease-out-power2) both;
    animation-delay:calc((var(--char) - 1) * 28ms + .125s)
  }

}

html {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizelegibility;
  -webkit-text-size-adjust:none;
  -moz-text-size-adjust:none;
  text-size-adjust:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:initial;
  scrollbar-width:thin
}

html:not(.is-ready.fonts-loaded) {
  cursor:auto;
  pointer-events:none
}

html:not(.is-ready.fonts-loaded).wf-editor-mode,html:not(.is-ready.fonts-loaded).wf-design-mode,html:not(.is-ready.fonts-loaded).site-scrollbar {
  cursor:auto;
  pointer-events:auto
}

html,body {
  width:100%;
  height:100%;
  margin:0
}

@media (width >= 991px) {
  html,body {
    overscroll-behavior:none
  }

}

::-moz-selection {
  color:var(--colour--micro-black);
  background:var(--colour--light)
}

::selection {
  color:var(--colour--micro-black);
  background:var(--colour--light)
}

.logo-section {
  overflow-x:clip
}

.wf-editor-mode .w-embed.w-script,.wf-design-mode .w-embed.w-script {
  display:none
}

.wf-editor-mode .wf-empty,.wf-design-mode .wf-empty {
  padding:0
}

.wf-editor-mode .loader,.wf-design-mode .loader {
  display:none
}

@keyframes subline-move-in {
  0% {
    opacity:0
  }

  10% {
    opacity:1
  }

  29% {
    opacity:1
  }

  30% {
    opacity:0
  }

}

@media (prefers-reduced-motion: no-preference) {
  html.is-ready.fonts-loaded .hero-subline .subheading {
    animation:subline-move-in 1.2s var(--ease-out-power2) both;
    animation-delay:.35s
  }

}

@keyframes nav-bar-move-in {
  0% {
    opacity:0;
    background-color:transparent
  }

  10% {
    opacity:1
  }

  29% {
    opacity:1
  }

  30% {
    opacity:0
  }

  75% {
    background-color:transparent
  }

  to {
    background-color:#ffffff1a
  }

}

.nav-bar {
  transition:background-color .2s var(--ease-opacity)
}

@media (prefers-reduced-motion: reduce) {
  .nav-bar {
    opacity:0
  }

}

@media (prefers-reduced-motion: no-preference) {
  html.is-ready.fonts-loaded .nav-bar {
    animation:nav-bar-move-in 1.2s var(--ease-out-power2) both;
    animation-delay:.55s
  }

}

@media (prefers-reduced-motion: reduce) {
  html.is-ready.fonts-loaded .nav-bar {
    opacity:1;
    transition:opacity .2s ease-out
  }

}

@media (width <= 768px) and (prefers-reduced-motion: reduce) {
  .hero-section .icon-button {
    opacity:0
  }

}

@media (width <= 768px) and (prefers-reduced-motion: no-preference) {
  html.is-ready.fonts-loaded .hero-section .icon-button {
    animation:nav-bar-move-in .8s var(--ease-out-power2) both;
    animation-delay:.55s
  }

}

@media (width <= 768px) and (prefers-reduced-motion: reduce) {
  html.is-ready.fonts-loaded .hero-section .icon-button {
    opacity:1;
    transition:opacity .2s ease-out
  }

}

.nav-button.is-non {
  opacity:1
}

@media (prefers-reduced-motion: no-preference) {
  html.is-ready.fonts-loaded .nav-button.is-non {
    opacity:.15;
    transition:opacity .25s 1.5s ease-out
  }

}

@media (prefers-reduced-motion: reduce) {
  html.is-ready.fonts-loaded .nav-button.is-non {
    opacity:.15;
    transition:opacity .2s ease-out
  }

}

.wf-editor-mode .nav-button.is-non,.wf-design-mode .nav-button.is-non {
  opacity:1
}

.nav-wrapper,.hero-container .heading-width {
  opacity:0
}

@media (prefers-reduced-motion: no-preference) {
  html.is-ready.fonts-loaded .nav-wrapper,html.is-ready.fonts-loaded .hero-container .heading-width {
    opacity:1;
    transition:opacity .225s .8s ease-out
  }

}

@media (prefers-reduced-motion: reduce) {
  html.is-ready.fonts-loaded .nav-wrapper,html.is-ready.fonts-loaded .hero-container .heading-width {
    opacity:1;
    transition:opacity .2s ease-out
  }

}

.wf-editor-mode .nav-wrapper,.wf-design-mode .nav-wrapper,.wf-editor-mode .hero-container .heading-width,.wf-design-mode .hero-container .heading-width {
  opacity:1
}

[data-hero-title] .split-word {
  opacity:0
}

@media (prefers-reduced-motion: no-preference) {
  html.is-ready.fonts-loaded [data-hero-title] .split-word {
    animation:color-blink-in .41s var(--ease-in-out-power2) both;
    animation-delay:calc((var(--word) - 1) * 98ms)
  }

}

@media (prefers-reduced-motion: reduce) {
  html.is-ready.fonts-loaded [data-hero-title] .split-word {
    opacity:1
  }

}

@keyframes button-blink-in {
  0% {
    color:var(--lightning-color);
    opacity:0;
    background-color:#ffffff1a
  }

  20% {
    opacity:1
  }

  35% {
    color:var(--lightning-color);
    background-color:#fff3
  }

  55% {
    opacity:.6;
    background-color:#ffffff1a
  }

  70% {
    color:inherit
  }

  85% {
    opacity:1
  }

  to {
    opacity:1
  }

}

@keyframes button-dark-blink-in {
  0% {
    color:var(--lightning-color);
    opacity:0;
    background-color:#00000014
  }

  20% {
    opacity:1
  }

  35% {
    color:var(--lightning-color);
    background-color:#0000000a
  }

  55% {
    opacity:.6;
    background-color:#00000014
  }

  70% {
    color:inherit
  }

  85% {
    opacity:1
  }

  to {
    opacity:1
  }

}

[data-button] {
  position:relative;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-button]:is(:hover,:focus-visible) {
    animation:color-blink-in .32s var(--ease-in-out-power2) both
  }

}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-button].icon-button:is(:hover,:focus-visible) {
    animation:button-blink-in .32s var(--ease-in-out-power2) both
  }

}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-button].icon-button.is-dark:is(:hover,:focus-visible) {
    animation:button-dark-blink-in .32s var(--ease-in-out-power2) both
  }

}

[data-button]:after {
  content:"";
  display:block;
  position:absolute;
  inset:-.25rem
}

[data-button-text] {
  font-variant:tabular-nums;
  font-variant-numeric:tabular-nums;
  font-kerning:none
}

.centered-slider-button {
  transition:scale .15s cubic-bezier(.4,0,.2,1)
}

.centered-slider-button:active {
  scale:.97
}

[data-benefits-text-top]:not(.is-exit) .split-word {
  opacity:0
}

@media (prefers-reduced-motion: no-preference) {
  [data-benefits-text-bottom]:not(.is-exit) .split-word {
    background-color:#000
  }

}

@media (prefers-reduced-motion: reduce) {
  [data-benefits-text-top] .split-word,[data-benefits-text-bottom] .split-word {
    transition:opacity .15s ease-out
  }

}

@keyframes fade-out {
  0% {
    opacity:.6
  }

  33% {
    opacity:1
  }

  66% {
    opacity:.6
  }

  to {
    opacity:0
  }

}

@media (prefers-reduced-motion: no-preference) {
  [data-benefits-text-top].is-exit .split-word {
    animation:fade-out .2s var(--ease-in-out-power2) both;
    animation-delay:calc((var(--word) - 1) * 22ms)
  }

}

@media (prefers-reduced-motion: reduce) {
  [data-benefits-text-top].is-exit .split-word {
    opacity:0
  }

}

@media (prefers-reduced-motion: no-preference) {
  [data-benefits-text-top].is-active .split-word {
    animation:color-blink-in .32s var(--ease-in-out-power2) both;
    animation-delay:calc((var(--word) - 1) * 32ms + .125s)
  }

}

@media (prefers-reduced-motion: reduce) {
  [data-benefits-text-top].is-active .split-word {
    opacity:1
  }

}

@keyframes color-fade-out {
  to {
    background-color:#000
  }

}

@media (prefers-reduced-motion: no-preference) {
  [data-benefits-text-bottom].is-exit .split-word {
    animation:color-fade-out .15s var(--ease-in-out-power2) both;
    animation-delay:calc((var(--word) - 1) * 22ms)
  }

}

@media (prefers-reduced-motion: reduce) {
  [data-benefits-text-bottom].is-exit .split-word {
    opacity:0
  }

}

@keyframes blink-in {
  0% {
    background-color:#000
  }

  55% {
    background-color:#0006
  }

  75% {
    background-color:#000c
  }

  to {
    background-color:#0000
  }

}

[data-benefits-text-bottom].is-active {
  z-index:1
}

@media (prefers-reduced-motion: no-preference) {
  [data-benefits-text-bottom].is-active .split-word {
    animation:blink-in .32s var(--ease-in-out-power2) both;
    animation-delay:calc((var(--word) - 1) * 32ms + .1s)
  }

}

@media (prefers-reduced-motion: reduce) {
  [data-benefits-text-bottom].is-active .split-word {
    opacity:1
  }

}

[data-benefits-text-bottom] .split-word {
  padding-left:.2em;
  padding-right:.2em;
  margin-left:-.2em;
  margin-right:-.2em
}

.benefits-box {
  --border-stroke: .0625rem;
  --border-color: #0000 90deg, var(--colour--light) 0;
  --border-width: 1.5625rem 1.5625rem border-box no-repeat
}

.benefits-box:after {
  content:"";
  display:block;
  position:absolute;
  inset:0;
  background:conic-gradient(from 90deg at top var(--border-stroke) left var(--border-stroke),var(--border-color)) 0 0/var(--border-width),conic-gradient(from 180deg at top var(--border-stroke) right var(--border-stroke),var(--border-color)) 100% 0/var(--border-width),conic-gradient(from 0deg at bottom var(--border-stroke) left var(--border-stroke),var(--border-color)) 0 100%/var(--border-width),conic-gradient(from -90deg at bottom var(--border-stroke) right var(--border-stroke),var(--border-color)) 100% 100%/var(--border-width)
}

.benefits-bottom .benefits-box {
  --border-color: #0000 90deg, var(--colour--micro-black) 0
}

.benefits-nav {
  opacity:0;
  transition:opacity .1s ease-out
}

.benefits-section.is-inview .benefits-nav {
  opacity:1
}

@media (prefers-reduced-motion: no-preference) {
  [data-stats-left].is-inview .stat-number-wrap {
    animation:blink .26s var(--ease-out-power2) both;
    animation-delay:.175s
  }

}

@media (prefers-reduced-motion: no-preference) {
  [data-stats-right].is-inview .stat-number-wrap {
    animation:blink .26s var(--ease-out-power2) both;
    animation-delay:.245s
  }

}

.stat-number-circle {
  background:linear-gradient(90deg,#595959,#222) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude
}

@media (width <= 480px) {
  .stat-number-circle {
    background:linear-gradient(180deg,#595959,#222) border-box
  }

}

.micro-text {
  font-variant:tabular-nums;
  font-variant-numeric:tabular-nums
}

@keyframes moving-stroke {
  0% {
    stroke-dashoffset:0
  }

  to {
    stroke-dashoffset:4px
  }

}

@keyframes move-bg {
  to {
    background-position:0 var(--bg-size)
  }

}

.svg-guideline {
  --bg-size: 200%;
  stroke-dasharray:2px 2px 4px;
  animation:moving-stroke .45s linear infinite,move-bg 2.25s linear forwards infinite;
  background:linear-gradient(to bottom,color-mix(in hsl,#222,transparent 100%) 20%,color-mix(in hsl,var(--colour--light),transparent 55%),color-mix(in hsl,#222,transparent 100%) 80%) 0 0/100% var(--bg-size) border-box
}

.svg-guideline_outer:after {
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  background-image:linear-gradient(to bottom,#0000 0% 70%,#000)
}

@keyframes marquee {
  0% {
    transform:translate(0)
  }

  to {
    transform:translate(calc(-100% - .125rem))
  }

}

.divider-line {
  margin-right:.125rem;
  mix-blend-mode:exclusion
}

@media (prefers-reduced-motion: no-preference) {
  .divider-line {
    animation-duration:48s;
    animation-iteration-count:infinite;
    animation-name:marquee;
    animation-timing-function:linear
  }

}

@keyframes move-divider-bg {
  to {
    background-position:var(--bg-size) 0
  }

}

.divider {
  --bg-size: 200%;
  background:linear-gradient(to right,color-mix(in hsl,#222,transparent 100%) 20%,color-mix(in hsl,var(--colour--light),transparent 85%),color-mix(in hsl,#222,transparent 100%) 80%) 0 0/var(--bg-size) 100% border-box
}

@media (prefers-reduced-motion: no-preference) {
  .divider {
    animation:move-divider-bg 2.25s linear forwards infinite
  }

}

.divider:after {
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  background-image:linear-gradient(90deg,#101010,#596870 33.65%,#000 65.38%,#454545);
  mix-blend-mode:darken
}

.divider-line-short {
  position:relative
}

.divider-line-short:after {
  content:"";
  display:block;
  position:absolute;
  inset:0;
  height:.0625rem;
  z-index:1;
  background-image:linear-gradient(90deg,#141414,#383838 29.81%,#111 85.58%);
  mix-blend-mode:multiply
}

@keyframes char-move {
  0% {
    translate:0 60% 0
  }

  29% {
    translate:0 60% 0
  }

  30% {
    translate:0 0 0
  }

}

.graphic-3 {
  overflow:visible!important
}

@media (prefers-reduced-motion: no-preference) {
  .graphic-3 path:nth-child(5) {
    animation:char-move 1.2s var(--ease-out-power2) infinite;
    animation-play-state:paused
  }

}

@media (prefers-reduced-motion: no-preference) {
  .graphic-3 path:nth-child(6) {
    animation:char-move 1.2s var(--ease-out-power2) infinite;
    animation-delay:.25s;
    animation-play-state:paused
  }

}

@media (prefers-reduced-motion: no-preference) {
  .graphic-3 path:nth-child(7) {
    animation:char-move 1.2s var(--ease-out-power2) infinite;
    animation-delay:.5s;
    animation-play-state:paused
  }

}

@media (prefers-reduced-motion: no-preference) {
  .graphic-3 path:nth-child(8) {
    animation:char-move 1.2s var(--ease-out-power2) infinite;
    animation-delay:.75s;
    animation-play-state:paused
  }

}

@media (prefers-reduced-motion: no-preference) {
  .graphic-3.is-inview path:nth-child(5),.graphic-3.is-inview path:nth-child(6),.graphic-3.is-inview path:nth-child(7),.graphic-3.is-inview path:nth-child(8) {
    animation-play-state:running
  }

}

.centered-slider-row:has(.centered-slider-slide.active) .centered-slider-slide:not(.active) {
  opacity:.45
}

@keyframes number-blink-in {
  0% {
    color:var(--colour--light);
    opacity:0
  }

  20% {
    opacity:.25
  }

  35% {
    color:var(--colour--light)
  }

  55% {
    opacity:.1
  }

  70% {
    color:#141414
  }

  85% {
    opacity:1
  }

  to {
    opacity:1;
    color:#141414
  }

}

[data-number].is-inview [data-number-item] {
  animation:number-blink-in .36s var(--ease-out-power2) both;
  animation-delay:calc(var(--index) * 36ms + .2s)
}

@keyframes opacity-blinking {
  50% {
    opacity:0
  }

}

[data-typing].is-inview [data-typing-arrow] .split-char {
  animation:opacity-blinking .65s step-start infinite;
  animation-delay:calc((var(--char) - 1) * .2s)
}

[data-typing-blink]:nth-child(8) {
  animation-delay:.125s!important
}

[data-typing].is-inview [data-typing-blink] {
  animation:opacity-blinking .65s step-start infinite
}

[data-typing-shuffle] {
  display:inline-block;
  width:2.5ch
}

[data-typing-shuffle-symbols] {
  display:inline-block;
  width:1.25ch
}

.swap-list {
  transition:width .35s .05s var(--ease-out-power2);
  width:var(--width);
  will-change:width
}

.swap-list-item {
  -webkit-mask:linear-gradient(90deg,rgba(255,255,255,.5019607843) 0%,rgba(0,0,0,.2) 100%);
  mask:linear-gradient(90deg,rgba(255,255,255,.5019607843) 0%,rgba(0,0,0,.2) 100%)
}