/* USER DECISION: no small uppercase mono labels or corner captions; the headline, visual, and body text carry the page. */
:root {
  color-scheme: dark;
  --dt-bg: #0a0a0b;
  --dt-ink: #f2f1ec;
  --dt-muted: rgba(242, 241, 236, 0.56);
  --dt-faint: rgba(242, 241, 236, 0.34);
  --dt-line: rgba(242, 241, 236, 0.12);
  --dt-lime: #d4f85a;
  --dt-paper: #eeebe4;
  --dt-card: #141416;
  --dt-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* The Vaibik studio's floating glass (ui-floating-surface), so the page is made of the product's material. */
  --dt-glass: rgba(45, 45, 45, 0.34);
  --dt-glass-filter: blur(18px) saturate(1.4);
  --dt-glass-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --dt-glass-item: rgba(255, 255, 255, 0.055);
  --dt-glass-item-hover: rgba(255, 255, 255, 0.085);
  --dt-gutter: clamp(16px, 3.4vw, 48px);
  font-family: "TikTok Sans", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  margin: 0;
  background: var(--dt-bg);
}

body {
  overflow-x: clip;
  color: var(--dt-ink);
  font-weight: 400;
  letter-spacing: -0.02em;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
}

a {
  color: inherit;
}

.dt-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dt-bar,
.dt-move-form,
.dt-keep__visual,
.dt-panel__visual {
  background-color: var(--dt-glass);
  box-shadow: var(--dt-glass-shadow);
  -webkit-backdrop-filter: var(--dt-glass-filter);
  backdrop-filter: var(--dt-glass-filter);
}

.dt-bar {
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 8px 8px 20px;
  border-radius: 18px;
}

.dt-bar__brand img {
  width: auto;
  height: 22px;
}

.dt-bar__form {
  display: flex;
  flex: 0 1 460px;
  gap: 4px;
  margin: 0 auto;
  padding: 3px;
  border-radius: 13px;
  background: var(--dt-glass-item);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.35s var(--dt-ease), transform 0.35s var(--dt-ease);
}

.dt-bar.has-form .dt-bar__form {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.dt-bar__form input {
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  outline: none;
  color: var(--dt-ink);
  background: transparent;
  font: inherit;
  font-size: 15px;
}

.dt-bar__form input::placeholder {
  color: var(--dt-faint);
}

.dt-bar__form button {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  color: #0a0a0b;
  background: var(--dt-lime);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.dt-bar__login {
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--dt-glass-item);
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.dt-bar__login:hover {
  background: var(--dt-glass-item-hover);
}

/* Opening: a wall of real Vaibik sites, tilted and drifting, behind the promise and the address field.
   As the visitor scrolls, the promise blurs away and the wall stands up and comes forward. */
.dt-hero {
  --h: 0;
  position: relative;
  height: 165svh;
}

.dt-hero__stage {
  position: sticky;
  top: 0;
  display: grid;
  height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.dt-hero__content {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: clamp(22px, 2.6vw, 34px);
  width: 100%;
  padding: 72px var(--dt-gutter) 0;
  text-align: center;
  opacity: calc(1 - var(--h) * 3);
  filter: blur(calc(var(--h) * 36px));
  transform: translate3d(0, calc(var(--h) * -110px), 0) scale(calc(1 - var(--h) * 0.08));
}

.dt-hero.is-past .dt-hero__content {
  pointer-events: none;
}

/* The field of sites: cards are placed, sized, faded and softened by the script, one clock for all. */
.dt-space {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.dt-space__card {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  outline: 1px solid rgba(242, 241, 236, 0.1);
  outline-offset: -1px;
  background-color: #151517;
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Dark enough behind the words to read them, open at the edges so the sites show; it lifts with the scroll. */
.dt-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(42% 38% at 50% 50%, rgba(10, 10, 11, 0.9), rgba(10, 10, 11, 0.55) 60%, transparent 100%);
  opacity: calc(1 - var(--h) * 1.25);
}

/* The glow and grain go out with the field, so the opening leaves nothing behind but the page's own dark. */
.dt-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: calc(1 - var(--h));
  background:
    radial-gradient(50% 36% at 50% 104%, rgba(212, 248, 90, 0.16), transparent 70%),
    linear-gradient(180deg, transparent 84%, var(--dt-bg));
}

.dt-hero__glow::after {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.35;
  content: "";
}

.dt-hero__title {
  font-size: clamp(52px, min(8vw, 14svh), 140px);
  font-stretch: 78%;
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.035em;
}

.dt-hero__title em {
  color: var(--dt-lime);
  font-style: normal;
}

/* Тильда is crossed out and fades back, so the eye lands on what comes instead. */
.dt-strike {
  position: relative;
  text-decoration: none;
  animation: dt-strike-dim 0.9s var(--dt-ease) 1.65s forwards;
}

.dt-strike::after {
  position: absolute;
  top: 54%;
  left: -2%;
  right: -2%;
  height: 0.05em;
  background: var(--dt-lime);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: dt-strike 0.9s var(--dt-ease) 1.55s forwards;
  content: "";
}

@keyframes dt-strike {
  to { transform: scaleX(1); }
}

@keyframes dt-strike-dim {
  to { color: #5a5955; }
}

/* The opening arrives out of blur: the wall comes up from the dark, the promise surfaces letter by
   letter, then the line and the address field follow. */
.dt-line {
  display: block;
  padding-bottom: 0.06em;
}

.dt-glyphs {
  display: inline-block;
  white-space: nowrap;
}

.dt-glyph {
  display: inline-block;
  animation: dt-glyph 1.15s var(--dt-ease) both;
  animation-delay: calc(var(--i) * 30ms + 150ms);
}

@keyframes dt-glyph {
  from {
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(0, 0.14em, 0);
  }
}

.dt-hero__action {
  display: grid;
  justify-items: center;
  width: 100%;
  gap: 24px;
}

.dt-hero__lead,
.dt-hero .dt-move-form,
.dt-bar {
  animation: dt-blur-in 1.1s var(--dt-ease) both;
}

.dt-hero__lead {
  animation-delay: 0.95s;
}

.dt-hero .dt-move-form {
  animation-delay: 1.1s;
}

.dt-bar {
  animation-delay: 0.3s;
}

@keyframes dt-blur-in {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 18px, 0);
  }
}

.dt-space {
  animation: dt-space-in 2.2s var(--dt-ease) backwards;
}

@keyframes dt-space-in {
  from {
    opacity: 0;
    transform: scale(1.08);
  }
}

.dt-hero__lead {
  max-width: 600px;
  color: #bdbcb6;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.35;
  text-wrap: balance;
}

.dt-hero .dt-move-form {
  width: min(640px, 100%);
}

.dt-move-form {
  display: flex;
  width: min(560px, 100%);
  gap: 6px;
  padding: 6px;
  border-radius: 20px;
  transition: box-shadow 0.3s ease;
}

.dt-move-form:focus-within {
  box-shadow: var(--dt-glass-shadow), 0 0 0 1px rgba(212, 248, 90, 0.55);
}

.dt-move-form input {
  flex: 1;
  min-width: 0;
  padding: 0 20px;
  border: 0;
  outline: none;
  color: var(--dt-ink);
  background: transparent;
  font: inherit;
  font-size: 18px;
  text-align: left;
}

.dt-move-form input::placeholder {
  color: var(--dt-faint);
}

.dt-move-form button {
  flex: none;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  color: #0a0a0b;
  background: var(--dt-lime);
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dt-move-form button:hover {
  background: #e4ff82;
}

/* A statement whose letters sharpen out of blur as it scrolls in. */
/* The statement rises over the last stretch of the opening, so it arrives as the sites dissolve. */
.dt-blur {
  position: relative;
  z-index: 3;
  margin-top: -30svh;
  padding: 10vh var(--dt-gutter) 24vh;
}

.dt-blur__text {
  max-width: 1320px;
  font-size: clamp(36px, 5.4vw, 88px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.dt-word {
  white-space: nowrap;
}

.dt-char {
  display: inline-block;
  --l: clamp(0, calc((var(--p, 0) * (var(--n) + 16) - var(--i)) / 16), 1);
  filter: blur(calc((1 - var(--l)) * 14px));
  opacity: calc(0.1 + var(--l) * 0.9);
}

.dt-steps__head h2 {
  font-size: clamp(52px, 7.4vw, 124px);
  font-stretch: 78%;
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.035em;
}

/* A lead as it lands in Telegram: the bot's chat, the message, and the buttons the team presses. */
.dt-tg {
  display: grid;
  width: min(520px, 100%);
  gap: 12px;
  font-size: 17px;
  line-height: 1.35;
}

.dt-tg__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dt-tg__head p {
  display: grid;
}

.dt-tg__head small {
  color: var(--dt-faint);
  font-size: 13px;
}

.dt-tg__app {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2aabee;
}

.dt-tg__app svg {
  width: 20px;
  height: 20px;
  margin-left: -2px;
}

.dt-tg__bot {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: #0a0a0b;
  background: var(--dt-lime);
  font-size: 20px;
  font-weight: 600;
}

.dt-tg__message {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border-radius: 18px 18px 18px 6px;
  background: var(--dt-glass-item);
}

.dt-tg__message p {
  display: flex;
  gap: 12px;
}

.dt-tg__message span {
  flex: none;
  width: 108px;
  color: var(--dt-faint);
}

.dt-tg__message b {
  font-weight: 400;
}

.dt-tg__title,
.dt-tg__title b {
  font-weight: 500;
}

.dt-tg__state {
  align-items: center;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--dt-line);
  color: var(--dt-muted);
  font-size: 15px;
  animation: dt-blur-in 0.6s var(--dt-ease) both;
}

.dt-tg__state::before {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #f5c542;
  content: "";
}

.dt-tg__state[data-state="done"]::before {
  background: var(--dt-lime);
}

.dt-tg__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dt-tg__buttons[hidden] {
  display: none;
}

.dt-tg__buttons button {
  position: relative;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  color: var(--dt-ink);
  background: var(--dt-glass-item);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.dt-tg__buttons button:hover {
  background: var(--dt-glass-item-hover);
}

.dt-tg__buttons button:active {
  transform: scale(0.97);
}

.dt-tg__buttons [data-lead-take] {
  color: #0a0a0b;
  background: var(--dt-lime);
}

.dt-tg__buttons [data-lead-take]:hover {
  background: #e4ff82;
}

.dt-tg__buttons [data-lead-take]:disabled {
  color: var(--dt-muted);
  background: var(--dt-glass-item);
  cursor: default;
  transform: none;
}

/* Until the visitor presses something, the first button breathes so it reads as pressable. */
.dt-tg:not(.is-touched) [data-lead-take]::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(212, 248, 90, 0.55);
  animation: dt-press-me 2s ease-out infinite;
  content: "";
}

@keyframes dt-press-me {
  70%,
  100% { box-shadow: 0 0 0 12px rgba(212, 248, 90, 0); }
}

.dt-tg.is-arriving .dt-tg__message {
  animation: dt-blur-in 0.8s var(--dt-ease) both;
}

/* What stays with the owner: three plain promises, each shown as the thing itself. */
.dt-keep {
  display: grid;
  gap: clamp(88px, 12vw, 180px);
  padding: 4vh var(--dt-gutter) 22vh;
}

.dt-keep__title {
  max-width: 1200px;
  font-size: clamp(52px, 8vw, 140px);
  font-stretch: 78%;
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.035em;
}

.dt-keep__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.dt-keep__row--flip .dt-keep__text {
  order: 2;
}

.dt-keep__text {
  display: grid;
  gap: 20px;
  max-width: 540px;
}

.dt-keep__text h3 {
  font-size: clamp(34px, 3.8vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.dt-keep__text p {
  color: var(--dt-muted);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.45;
}

.dt-keep__row {
  position: relative;
  isolation: isolate;
  --dt-row-glow: rgba(212, 248, 90, 0.34);
}

.dt-keep__row:nth-of-type(1) {
  --dt-row-glow: rgba(42, 171, 238, 0.42);
}

.dt-keep__row:nth-of-type(2) {
  --dt-row-glow: rgba(252, 63, 29, 0.34);
}

.dt-keep__row::before {
  position: absolute;
  top: 50%;
  right: 12%;
  z-index: -1;
  width: min(34vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--dt-row-glow), transparent 64%);
  filter: blur(30px);
  transform: translateY(-50%);
  content: "";
}

.dt-keep__row--flip::before {
  right: auto;
  left: 12%;
}

.dt-keep__visual {
  display: grid;
  min-height: clamp(340px, 36vw, 520px);
  place-items: center;
  padding: clamp(24px, 4vw, 56px);
  overflow: hidden;
  border-radius: 24px;
}

/* Whatever was plugged into the Тильда site comes along: the services arrive one by one on the way over. */
/* The services a Тильда site is wired to, as an even grid of equal tiles under the Тильда → Вайбик line. */
.dt-links {
  display: grid;
  width: min(600px, 100%);
  gap: 22px;
}

.dt-links__ends {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.dt-links__end {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--dt-glass-item);
  font-size: 17px;
}

.dt-links__end img {
  width: 26px;
  height: 26px;
}

.dt-links__end--to {
  background: var(--dt-lime);
}

.dt-links__end--to img {
  width: auto;
  height: 22px;
  filter: invert(1);
}

.dt-links__wire {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, rgba(212, 248, 90, 0.15), var(--dt-lime));
}

.dt-links__wire::after {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dt-lime);
  box-shadow: 0 0 12px var(--dt-lime);
  animation: dt-wire 1.8s ease-in-out infinite;
  content: "";
}

@keyframes dt-wire {
  0% { left: 0; opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

.dt-links__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dt-links__chips li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 64px;
  padding: 0 14px;
  border-radius: 16px;
  color: var(--dt-ink);
  background: var(--dt-glass-item);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  transition:
    opacity 0.9s var(--dt-ease),
    filter 0.9s var(--dt-ease),
    transform 0.9s var(--dt-ease);
  transition-delay: calc(0.3s + var(--d) * 90ms);
}

.is-in .dt-links__chips li {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.dt-links__chips img,
.dt-links__chips svg {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.dt-links__chips .dt-links__word {
  width: auto;
  max-width: 100%;
  height: 19px;
}

/* Things arrive out of blur as they come into view. */
[data-in] {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(28px);
  transition:
    opacity 1.1s var(--dt-ease),
    filter 1.1s var(--dt-ease),
    transform 1.1s var(--dt-ease);
  transition-delay: calc(var(--d, 0) * 140ms);
}

[data-in].is-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.dt-serp {
  display: grid;
  width: min(580px, 100%);
  gap: 14px;
}

.dt-serp__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 10px;
  border-radius: 999px;
  color: var(--dt-ink);
  background: var(--dt-glass-item);
  font-size: 17px;
}

.dt-serp__logo svg {
  display: block;
  width: 30px;
  height: 30px;
}

.dt-serp__bar b {
  margin-left: auto;
  padding: 10px 18px;
  border-radius: 999px;
  color: #111;
  background: #ffdb4d;
  font-size: 15px;
  font-weight: 500;
}

.dt-serp__hit {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--dt-glass-item);
  outline: 1px solid rgba(212, 248, 90, 0.5);
  outline-offset: -1px;
}

.dt-serp__hit h4 {
  margin: 0;
  color: #b9d8ff;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
}

.dt-serp__hit p {
  color: var(--dt-muted);
  font-size: 15px;
  line-height: 1.4;
}

.dt-serp__url {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dt-muted);
  font-size: 14px;
}

.dt-serp__url i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--dt-lime);
}

.dt-serp__hit--other {
  opacity: 0.4;
  outline: 0;
}

.dt-serp__hit--other .dt-serp__url i {
  background: #3a3b3f;
}

.dt-browser {
  width: min(640px, 100%);
  overflow: hidden;
  border-radius: 14px;
  background: var(--dt-glass-item);
}

.dt-browser__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
}

.dt-browser__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a3b3f;
}

.dt-browser__bar span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--dt-ink);
  background: rgba(0, 0, 0, 0.32);
  font-size: 14px;
}

.dt-browser__bar svg {
  width: 13px;
  height: 13px;
  color: var(--dt-lime);
}

.dt-browser img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
}

/* What it costs, shown as what it buys: the price rolls into place like a counter, then the sites it pays
   for fly out from behind it one by one and settle in a fan while the count keeps up. */
.dt-price {
  position: relative;
  height: 260svh;
}

.dt-price__stage {
  position: sticky;
  top: 0;
  display: grid;
  height: 100svh;
  align-content: center;
  justify-items: center;
  gap: clamp(6px, 1.4vh, 16px);
  padding: 90px var(--dt-gutter) 40px;
  overflow: hidden;
  text-align: center;
}

.dt-price__sum {
  position: relative;
  z-index: 2;
  display: flex;
  color: var(--dt-lime);
  font-size: clamp(120px, min(26vw, 34svh), 420px);
  font-stretch: 78%;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.dt-odo {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

.dt-odo > span {
  display: block;
  transform: translate3d(0, calc(var(--r, 1) * (10 + var(--v)) * -1em), 0);
}

.dt-odo i {
  display: block;
  height: 1em;
  font-style: normal;
}

.dt-odo__gap {
  width: 0.18em;
}

.dt-price__cur {
  margin-left: 0.06em;
}

.dt-price__count {
  position: relative;
  z-index: 3;
  font-size: clamp(34px, 4.4vw, 72px);
  font-stretch: 78%;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.dt-price__count b {
  font-weight: 600;
}

.dt-price__fan {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(120px, 16vw, 200px);
}

.dt-price__site {
  position: absolute;
  top: 24px;
  left: 50%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  outline: 1px solid rgba(242, 241, 236, 0.12);
  outline-offset: -1px;
  background-color: #151517;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.dt-price__note {
  max-width: 560px;
  color: var(--dt-muted);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45;
  opacity: clamp(0, calc((var(--p, 1) - 0.8) * 6), 1);
}

/* Steps: a track that slides sideways while the page scrolls down. */
.dt-steps {
  position: relative;
  height: 320vh;
}

.dt-steps__stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: center;
  gap: clamp(28px, 4vw, 56px);
  height: 100svh;
  overflow: hidden;
}

.dt-steps__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--dt-gutter);
}

.dt-steps__track {
  display: flex;
  width: max-content;
  gap: 20px;
  padding: 0 var(--dt-gutter);
  list-style: none;
  will-change: transform;
}

.dt-panel {
  display: grid;
  width: min(600px, 80vw);
  align-content: start;
  gap: 16px;
}

.dt-panel__visual {
  display: grid;
  height: min(44svh, 400px);
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  background-image: radial-gradient(70% 60% at 50% 110%, rgba(212, 248, 90, 0.12), transparent 70%);
}

.dt-panel h3 {
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.dt-panel p {
  max-width: 480px;
  color: var(--dt-muted);
  font-size: 17px;
  line-height: 1.45;
}

.dt-typed {
  display: flex;
  align-items: center;
  width: min(80%, 380px);
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--dt-glass-item);
  font-size: 20px;
}

.dt-typed span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: dt-type 4.5s steps(9) infinite;
}

.dt-typed i {
  width: 2px;
  height: 24px;
  margin-left: 2px;
  background: var(--dt-lime);
  animation: dt-caret 0.9s steps(1) infinite;
}

@keyframes dt-type {
  0% { width: 0; }
  40%, 100% { width: 9ch; }
}

@keyframes dt-caret {
  50% { opacity: 0; }
}

.dt-typed img {
  flex: none;
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

/* Step two: the new site, with the test lead landing in Telegram. */
.dt-panel__visual--site {
  position: relative;
  place-items: start center;
  padding: clamp(16px, 2vw, 28px);
}

.dt-panel__visual--site .dt-browser {
  width: 100%;
}

.dt-toast {
  --d: 4;
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 12px;
  border-radius: 14px;
  color: #0a0a0b;
  background: #f2f1ec;
  font-size: 14px;
  line-height: 1.25;
}

.dt-toast img {
  width: 30px;
  height: 30px;
}

.dt-toast b {
  display: block;
  font-weight: 600;
}

/* Step three: one switch, from Тильда to Вайбик. */
.dt-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: min(82%, 380px);
  height: 96px;
  padding: 8px;
  border-radius: 999px;
  background: var(--dt-glass-item);
}

.dt-switch__from,
.dt-switch__to {
  position: relative;
  z-index: 1;
  justify-self: center;
  transition: opacity 0.6s ease 1s, filter 0.6s ease 1s;
}

.dt-switch__from {
  width: 44px;
  height: 44px;
}

.dt-switch__to {
  width: auto;
  height: 26px;
}

.dt-switch__knob {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: calc(50% - 8px);
  border-radius: 999px;
  background: #2a2b2f;
  transition: transform 0.9s var(--dt-ease) 0.7s, background 0.9s ease 0.7s;
}

.dt-switch.is-in .dt-switch__knob {
  transform: translateX(100%);
  background: var(--dt-lime);
}

.dt-switch.is-in .dt-switch__from {
  opacity: 0.35;
}

.dt-switch.is-in .dt-switch__to {
  filter: invert(1);
}

/* The end: a lime circle opens around the address field, then the page lifts away and the footer is
   waiting underneath, its wordmark trailing the pointer in thin slices. */
.dt-end {
  position: relative;
  height: 270svh;
  margin-top: clamp(60px, 8vw, 120px);
}

.dt-final-hold {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 170svh;
}

.dt-final {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  border-radius: 0 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px);
  background: var(--dt-bg);
}

.dt-final__fill {
  display: grid;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: clamp(24px, 3vw, 40px);
  padding: 0 var(--dt-gutter);
  color: #0a0a0b;
  background: var(--dt-lime);
  text-align: center;
  clip-path: circle(calc(var(--p, 0) * 110%) at 50% 58%);
}

.dt-final h2 {
  font-size: clamp(60px, 10vw, 172px);
  font-stretch: 78%;
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.035em;
}

.dt-final .dt-move-form {
  background: #0a0a0b;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dt-footer {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100svh;
  overflow: hidden;
}

.dt-footer canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.dt-footer__legal {
  position: absolute;
  left: var(--dt-gutter);
  right: var(--dt-gutter);
  bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 28px;
  color: var(--dt-faint);
  font-size: 13px;
}

.dt-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0;
  list-style: none;
}

.dt-footer a {
  text-decoration: none;
}

.dt-footer a:hover {
  color: var(--dt-ink);
}

@media (max-width: 760px) {
  .dt-bar {
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 6px 6px 6px 16px;
  }

  .dt-bar__brand img {
    height: 20px;
  }

  .dt-bar__form {
    margin: 0 0 0 12px;
  }

  .dt-bar.has-form .dt-bar__login {
    display: none;
  }

  .dt-hero__content {
    padding-top: 56px;
  }

  .dt-hero__title {
    font-size: 14.5vw;
  }

  .dt-move-form {
    flex-direction: column;
    border-radius: 26px;
  }

  .dt-move-form input {
    min-height: 54px;
  }

  .dt-tg__message span {
    width: 88px;
  }

  .dt-keep__row {
    grid-template-columns: 1fr;
  }

  .dt-keep__row--flip .dt-keep__text {
    order: 0;
  }

  .dt-keep__visual {
    min-height: 0;
    padding: 20px;
  }

  .dt-links__chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dt-price__fan {
    height: 150px;
  }

  .dt-steps {
    height: auto;
  }

  .dt-steps__stage {
    position: static;
    height: auto;
    padding: 20vh 0 10vh;
  }

  .dt-steps__track {
    flex-direction: column;
    width: auto;
    gap: 48px;
  }

  .dt-panel {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dt-strike {
    animation: none;
    color: #5a5955;
  }

  .dt-strike::after {
    animation: none;
    transform: none;
  }

  .dt-links__wire::after {
    animation: none;
  }

  .dt-links__chips li,
  .dt-switch__knob,
  .dt-switch__from,
  .dt-switch__to {
    transition: none;
  }

  .dt-links__chips li {
    opacity: 1;
    filter: none;
    transform: none;
  }

  [data-in] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .dt-glyph,
  .dt-hero__lead,
  .dt-hero .dt-move-form,
  .dt-bar,
  .dt-space,
  .dt-typed span,
  .dt-typed i {
    animation: none;
  }
}