@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root {
  color-scheme: light;
  --ink: #161a23;
  --secondary: #5b6375;
  --indigo: #4f46e5;
  --mint: #0e9f76;
  --paper: #f6f7fb;
}
* {
  box-sizing: border-box;
}
html {
  min-width: 280px;
  background: var(--paper);
}
body {
  margin: 0;
  color: var(--ink);
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: #dcdafb;
  color: #262067;
}
.intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 72px 24px;
  overflow: hidden;
}
.intro-bg {
  position: absolute;
  inset: 0;
  background: var(--paper);
}
.intro.done {
  visibility: hidden;
  pointer-events: none;
}
.intro .hero {
  position: relative;
  text-align: center;
  padding-bottom: 2vh;
  animation: arrive 650ms ease-out both;
}
.intro .cabinet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 16px 28px;
  border-radius: 14px;
  background: var(--indigo);
  color: #fff;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 14px 30px rgb(79 70 229 / 26%);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}
.intro .cabinet:hover {
  background: #4338ca;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgb(79 70 229 / 32%);
}
.intro .cabinet:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}
.intro .cabinet span {
  transition: transform 150ms ease;
}
.intro .cabinet:hover span {
  transform: translateX(3px);
}
.intro p {
  margin: 28px auto 0;
  max-width: 620px;
  color: var(--secondary);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.65;
  letter-spacing: -0.022em;
  font-weight: 450;
}
.intro strong {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.intro .signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 38px;
}
.intro .signature span {
  width: 38px;
  height: 1px;
  background: #d5d9e3;
}
.intro .signature i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
}
.intro .canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.intro .canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 42% 42% at 50% 50%, rgb(246 247 251 / 0.9), transparent);
}
.intro .glow {
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 50%;
}
.intro .glow-indigo {
  right: -260px;
  top: -370px;
  background: radial-gradient(circle, #e6e5fa 0%, rgb(230 229 250 / 0.3) 42%, transparent 70%);
}
.intro .glow-mint {
  left: -350px;
  bottom: -460px;
  background: radial-gradient(circle, #dcefe8 0%, rgb(220 239 232 / 0.25) 45%, transparent 70%);
}
.intro .orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 940px;
  height: 570px;
  border: 1px solid rgb(108 117 149 / 0.1);
  border-radius: 50%;
}
.intro .orbit-one {
  transform: translate(-50%, -50%) rotate(-24deg);
}
.intro .orbit-two {
  transform: translate(-50%, -50%) rotate(24deg);
  border-color: rgb(108 117 149 / 0.065);
}
.intro .orbit-three {
  width: 1190px;
  height: 730px;
  transform: translate(-50%, -50%) rotate(-24deg);
  border-style: dashed;
  border-color: rgb(108 117 149 / 0.065);
}
.intro .orbit i {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #9691e8;
  border: 2px solid var(--paper);
  border-radius: 50%;
  left: 8%;
  top: 20%;
}
.intro .orbit-two i {
  left: auto;
  right: 8%;
  top: auto;
  bottom: 20%;
  background: #8bc6b2;
}
.intro .edge {
  position: absolute;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e5ee 25%, #e2e5ee 75%, transparent);
}
.intro .edge-top {
  top: 40px;
}
.intro .edge-bottom {
  bottom: 40px;
}
@keyframes arrive {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 600px) {
  .intro .cabinet {
    margin-top: 28px;
    font-size: 16px;
  }
  .intro {
    padding: 56px 20px;
  }
  .intro .hero {
    padding-bottom: 5vh;
  }
  .intro p {
    max-width: 340px;
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.65;
  }
  .intro .desktop-break {
    display: none;
  }
  .intro .signature {
    margin-top: 30px;
  }
  .intro .orbit {
    width: 610px;
    height: 420px;
  }
  .intro .orbit-three {
    width: 780px;
    height: 560px;
  }
  .intro .edge {
    left: 20px;
    right: 20px;
  }
  .intro .edge-top {
    top: 24px;
  }
  .intro .edge-bottom {
    bottom: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro .hero {
    animation: none;
  }
  .cabinet,
  .intro .cabinet span {
    transition: none;
  }
}