/* ==========================================================================
   DomToday — UI components: wordmark, header buttons, hero CTA, hero chips, catalog showcase, footer
   --------------------------------------------------------------------------
   Loaded after base.css and *before* mobile.css (which only
   adapts sizes per breakpoint). Unlayered → wins over @layer utilities.

   Visual language: dark glass + orange energy. Every button has
     • a gradient hairline border (mask trick, 1px),
     • a glossy top highlight,
     • a light "sheen" that sweeps across on hover (CTA: periodically),
     • tactile press feedback (:active).
   The hero CTA additionally has a slowly orbiting light on its border and
   a breathing halo behind it. All motion is disabled for
   prefers-reduced-motion.
   ========================================================================== */

:root {
  --dt-accent: #FF6A2B;
  --dt-accent-2: #FF8A4D;
  --dt-ink: #180d08;
  --dt-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* real damped springs where linear() is supported (fallbacks: cubic-bezier) */
  --dt-spring: cubic-bezier(0.25, 1.25, 0.4, 1);
  --dt-spring-pop: var(--dt-ease-spring);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* ζ≈0.62: one soft overshoot (sheets, cards) */
    --dt-spring: linear(0, 0.0308, 0.1098, 0.2188, 0.3433, 0.4716, 0.5951, 0.708, 0.8066, 0.8891, 0.9552, 1.0055, 1.0416, 1.0651, 1.0784, 1.0833, 1.0821, 1.0763, 1.0677, 1.0576, 1.0468, 1.0364, 1.0267, 1.0181, 1.0109, 1.005, 1.0005, 0.9972, 0.995, 0.9937, 0.9931, 0.9931, 0.9935, 0.9941, 0.995, 0.9959, 0.9967, 0.9976, 0.9983, 0.9989, 1);
    /* ζ≈0.5: bouncier (pills, toasts, price pop) */
    --dt-spring-pop: linear(0, 0.0314, 0.114, 0.2309, 0.3671, 0.51, 0.6495, 0.7779, 0.89, 0.9829, 1.0553, 1.1077, 1.1415, 1.159, 1.1629, 1.156, 1.1413, 1.1215, 1.099, 1.0757, 1.0532, 1.0327, 1.015, 1.0004, 0.9892, 0.9812, 0.9762, 0.9738, 0.9735, 0.9749, 0.9775, 0.9808, 0.9845, 0.9883, 0.992, 0.9952, 0.998, 1.0003, 1.002, 1.0032, 1);
  }
}

/* registered custom properties → smoothly animatable */
@property --dt-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --dt-ring {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes dt-spin {
  to { --dt-angle: 360deg; }
}
/* one sweep per cycle, then rest */
@keyframes dt-sheen {
  0%        { transform: translateX(-75%); }
  26%, 100% { transform: translateX(75%); }
}
@keyframes dt-sheen-once {
  from { transform: translateX(-75%); }
  to   { transform: translateX(75%); }
}
@keyframes dt-breathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.08); }
}


/* 1. Wordmark -----------------------------------------------------------------
   "domtoday" in Onest SemiBold, white, lowercase, set tight as the brand
   sample. The file holds Latin letters only (a static 600 cut of the
   variable Onest, OFL), 4 KB, preloaded in index.html. */
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/onest-wordmark-600.woff2) format('woff2');
}
.dt-wordmark {
  font-family: Onest, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  color: #fff;
  display: inline-block;
}
.dt-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* the brand mark: the same picture as the bot's avatar, round as Telegram
   shows it (logo.webp, 128px for sharp 2x and 3x screens) */
.dt-logo__mark {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
/* prices in headings: same type as the heading, in brand light (the display
   font draws "5" almost like "S", a price has to read at a glance) */
.dt-hl {
  color: var(--dt-accent);
  text-shadow: 0 0 0.45em rgba(255, 106, 43, 0.45);
}


/* 2. Header buttons ----------------------------------------------------------- */
.dt-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.18s var(--dt-ease-out),
    box-shadow 0.25s ease,
    color 0.2s ease;
}
.dt-btn__icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
  transition: transform 0.3s var(--dt-ease-spring);
}
.dt-btn__label {
  font-family: 'IBM Plex Sans Condensed', Arial;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}
.dt-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* hairline gradient border (both variants) */
.dt-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* sheen (plays once on hover) */
.dt-btn::after {
  content: "";
  position: absolute;
  inset: -30% -40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0) 60%);
  transform: translateX(-75%);
}

/* --- ghost: frosted glass ("Channel") --- */
.dt-btn--ghost {
  color: rgba(255, 255, 255, 0.84);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px -16px rgba(0, 0, 0, 0.9);
}
.dt-btn--ghost::before {
  background:
    /* orbiting orange light, revealed on hover via --dt-ring */
    conic-gradient(from var(--dt-angle),
      rgba(255, 138, 77, 0) 0 62%,
      rgba(255, 170, 120, var(--dt-ring)) 76%,
      rgba(255, 138, 77, 0) 90%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.30),
      rgba(255, 255, 255, 0.07) 55%,
      rgba(255, 255, 255, 0.14));
  transition: --dt-ring 0.35s ease;
}

/* --- primary: solid energy ("Open bot") --- */
.dt-btn--primary {
  color: var(--dt-ink);
  background:
    radial-gradient(130% 150% at 50% -45%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, var(--dt-accent-2), var(--dt-accent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 10px 26px -12px rgba(255, 106, 43, 0.8);
}
.dt-btn--primary::before {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.05) 50%,
    rgba(120, 40, 0, 0.25));
}

@media (hover: hover) {
  .dt-btn:hover::after {
    animation: dt-sheen-once 0.9s var(--dt-ease-out) forwards;
  }
  .dt-btn--ghost:hover {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 12px 32px -14px rgba(255, 106, 43, 0.45);
  }
  .dt-btn--ghost:hover::before {
    --dt-ring: 0.95;
    animation: dt-spin 2.4s linear infinite;
  }
  .dt-btn--ghost:hover .dt-btn__icon {
    transform: rotate(-12deg) scale(1.08);
  }
  .dt-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.16),
      0 2px 4px rgba(0, 0, 0, 0.3),
      0 14px 34px -10px rgba(255, 106, 43, 1);
  }
  .dt-btn--primary:hover .dt-btn__icon {
    transform: translateY(-1px) scale(1.1);
  }
}


/* 2a. Header: a floating capsule ---------------------------------------------
   Fixed on top. The capsule is the page's column plus its own 20px sides,
   so the logo lines up with the content below. Clear over the hero; once
   the page scrolls (header.js adds .is-scrolled) it turns into dark glass
   with a hairline rim and a warm light along its lower edge. The section in
   view gets a pill under its link that slides from link to link (header.js
   sets --x/--w). */
html {
  scroll-behavior: smooth;
}
/* the sections the ad sitelinks open (?lang=..#catalog, #how-it-works,
   #possibilities, #questions) land under the fixed header */
#catalog,
#dns,
#top-up,
#how-it-works,
#possibilities,
#questions {
  scroll-margin-top: 96px;
}
.dt-header {
  position: fixed;
  z-index: 50;
  top: 14px;
  left: 0;
  right: 0;
  padding: 0 20px;
  pointer-events: none; /* only the capsule takes clicks */
}
.dt-nav {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1240px;
  height: 64px;
  margin: 0 auto;
  padding: 0 12px 0 20px;
  border-radius: 20px;
  pointer-events: auto;
}
.dt-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(32, 32, 36, 0.8), rgba(18, 18, 20, 0.82));
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 22px 46px -22px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.dt-nav::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 106, 43, 0), rgba(255, 156, 104, 0.9), rgba(255, 106, 43, 0));
  box-shadow: 0 0 14px 1px rgba(255, 106, 43, 0.35);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.dt-header.is-scrolled .dt-nav::before,
.dt-header.is-scrolled .dt-nav::after {
  opacity: 1;
}
.dt-nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
}
.dt-nav__links a {
  position: relative;
  z-index: 1;
  padding: 11px 14px;
  border-radius: 12px;
  font-family: 'IBM Plex Sans Condensed', Arial;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.2s ease;
}
.dt-nav__links a.is-active {
  color: #fff;
}
.dt-nav__pill {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--w, 0px);
  height: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateX(var(--x, 0px));
  opacity: 0;
  transition: transform 0.5s var(--dt-spring), width 0.5s var(--dt-spring), opacity 0.25s ease;
}
.dt-nav__links.has-active .dt-nav__pill {
  opacity: 1;
}
@media (hover: hover) {
  .dt-nav__links a:hover {
    color: #fff;
  }
}
.dt-header-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.dt-nav__links + .dt-header-actions {
  margin-left: 0;
}

/* language menu: the code of the page language opens a short list. Phones
   get the same links in the footer instead (mobile.css). The list closes on
   a click outside or Esc (header.js), which also remembers the choice. */
.dt-lang {
  position: relative;
}
.dt-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  list-style: none;
  font-family: 'IBM Plex Sans Condensed', Arial;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.dt-lang__btn::-webkit-details-marker {
  display: none;
}
.dt-lang__btn svg {
  flex: none;
  fill: currentColor;
}
.dt-lang__globe {
  width: 15px;
  height: 15px;
}
.dt-lang__caret {
  width: 10px;
  height: 10px;
  transition: transform 0.2s ease;
}
.dt-lang[open] .dt-lang__btn {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.dt-lang[open] .dt-lang__caret {
  transform: rotate(180deg);
}
.dt-lang__menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  background: #1B1B1E;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 40px -16px rgba(0, 0, 0, 0.9);
}
.dt-lang__menu a {
  padding: 10px 12px;
  border-radius: 9px;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.dt-lang__menu a[aria-current] {
  color: var(--dt-accent-2);
}
@media (hover: hover) {
  .dt-lang__btn:hover {
    color: #fff;
  }
  .dt-lang__menu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
  }
  .dt-lang__menu a[aria-current]:hover {
    color: var(--dt-accent-2);
  }
}
.dt-lang__btn:focus-visible,
.dt-lang__menu a:focus-visible {
  outline: 2px solid var(--dt-accent-2);
  outline-offset: 2px;
}
/* the links need the room of a laptop; below it the capsule keeps the logo,
   the language menu and the two buttons. Russian and Ukrainian links are
   longer and need 1100px. */
@media (max-width: 1039px) {
  .dt-nav__links {
    display: none;
  }
  .dt-nav__links + .dt-header-actions {
    margin-left: auto;
  }
}
@media (max-width: 1099px) {
  :lang(ru) .dt-nav__links,
  :lang(uk) .dt-nav__links {
    display: none;
  }
  :lang(ru) .dt-nav__links + .dt-header-actions,
  :lang(uk) .dt-nav__links + .dt-header-actions {
    margin-left: auto;
  }
}


/* the line under the hero title: centred, so its lines share the width evenly
   instead of a long line, a short one and a lone word at the end */
/* the hero title: two lines of about the same width, set a little smaller and
   without the tracking of the section headings, so it reads as one block */
.dt-hero-copy h1 {
  letter-spacing: 0;
}
@media (min-width: 1280px) {
  .dt-hero-stage[data-current-index="0"] {
    --heading-size: 64px;
  }
}
.dt-hero-lead {
  max-width: 680px;
  text-wrap: balance;
}


/* 3. Hero CTA ----------------------------------------------------------------- */
.dt-hero-cta-row {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  width: 100%;
}
/* breathing halo behind the button */
.dt-hero-cta-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(440px, 92%);
  height: 170%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 106, 43, 0.55), rgba(255, 106, 43, 0));
  filter: blur(22px);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: dt-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}

.dt-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 36px 14px 16px;
  border-radius: 18px;
  font-family: 'IBM Plex Sans Condensed', Arial;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dt-ink);
  background:
    radial-gradient(120% 160% at 50% -50%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--dt-accent-2) 0%, var(--dt-accent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 18px 50px -14px rgba(255, 106, 43, 0.85);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.18s var(--dt-ease-out),
    box-shadow 0.25s ease;
}
/* orbiting light on the border */
.dt-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--dt-angle),
    rgba(255, 255, 255, 0.12) 0deg,
    rgba(255, 255, 255, 0.12) 200deg,
    rgba(255, 255, 255, 0.75) 255deg,
    rgba(255, 255, 255, 1) 285deg,
    rgba(255, 236, 222, 0.75) 315deg,
    rgba(255, 255, 255, 0.12) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: dt-spin 4s linear infinite;
}
/* periodic sheen */
.dt-cta::after {
  content: "";
  position: absolute;
  inset: -30% -40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0) 58%);
  transform: translateX(-75%);
  animation: dt-sheen 6s var(--dt-ease-out) infinite;
}
.dt-cta__icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  color: var(--dt-ink);
  background: rgba(24, 13, 8, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(24, 13, 8, 0.08);
  transition: background 0.25s ease;
}
.dt-cta__icon svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform 0.35s var(--dt-ease-spring);
}
.dt-cta__label {
  white-space: nowrap;
}
.dt-cta:active {
  transform: translateY(0) scale(0.985);
}
@media (hover: hover) {
  .dt-cta:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18),
      0 2px 4px rgba(0, 0, 0, 0.35),
      0 24px 60px -14px rgba(255, 106, 43, 1);
  }
  .dt-cta:hover .dt-cta__icon {
    background: rgba(24, 13, 8, 0.2);
  }
  .dt-cta:hover .dt-cta__icon svg {
    transform: translate(2px, -2px) rotate(-10deg); /* the plane takes off */
  }
  .dt-cta:hover::before {
    animation-duration: 1.6s;
  }
}


/* 4. Hero chips: floating TLD tags ------------------------------------------
   The original glass look, placed in three depths. Custom properties set
   inline in index.html:
     --x/--y  position (share of the hero), --s font-size, --r tilt
     --xt/--yt  tablet position
     --z      depth, 0 far .. 1 near: drives size of the float, parallax,
              opacity and a touch of blur (far chips sit out of focus)
     --dur    length of its float loop, --ph phase in it (0..1), --in its
              place in the entrance
     --tm/--lm/--rm/--bm/--fsm  phone placement (four chips only)
   They pop in one by one, then each floats on its own loop; hero-chips.js
   adds a light pointer and scroll parallax on desktop (the `translate`
   property, so it never fights the float's `transform`).
   -------------------------------------------------------------------------- */
.tld-float {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.tld-float .tld-chip {
  --z: 0.5;
  --amp: calc((8px + 14px * var(--z)) * var(--amp-k, 1));
  position: absolute;
  top: max(var(--y), 136px);
  left: var(--x);
  display: inline-flex;
  align-items: center;
  font-size: var(--s);
  padding: 0.4em 0.9em 0.52em;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -8px 20px rgba(0, 0, 0, 0.22),
    0 22px 46px -14px rgba(0, 0, 0, 0.7);
  font-family: 'IBM Plex Sans Condensed', Arial;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  opacity: calc(0.45 + 0.55 * var(--z));
  filter: blur(calc((1 - var(--z)) * 1.4px));
  transform: rotate(var(--r));
  translate:
    calc(var(--px, 0) * var(--z) * 1px)
    calc((var(--py, 0) * var(--z) - var(--sy, 0) * (0.35 + var(--z))) * 1px);
  animation:
    tld-in 0.9s var(--dt-spring) calc(0.15s + var(--in, 0) * 0.09s) both,
    tld-float var(--dur, 9s) ease-in-out calc(var(--dur, 9s) * var(--ph, 0) * -1) infinite;
  will-change: transform;
}
/* accent chips glow like lit glass: a hot core along the edge (near white,
   then orange, then red as it falls off), light inside the glass, an
   emissive label, and a wide spill that slowly breathes (::after) */
.tld-float .tld-accent {
  color: #FFF4EC;
  background:
    radial-gradient(120% 150% at 28% -10%, rgba(255, 196, 156, 0.45), rgba(255, 196, 156, 0) 58%),
    linear-gradient(150deg, rgba(255, 138, 77, 0.40) 0%, rgba(255, 106, 43, 0.16) 55%, rgba(200, 64, 16, 0.26) 100%);
  border-color: rgba(255, 170, 120, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 224, 0.8),
    inset 0 0 14px rgba(255, 150, 90, 0.45),
    inset 0 -10px 18px rgba(110, 28, 0, 0.35),
    0 0 0 1px rgba(255, 120, 60, 0.3),
    0 0 6px rgba(255, 214, 186, 0.55),
    0 0 18px rgba(255, 138, 77, 0.5),
    0 0 42px rgba(255, 106, 43, 0.32);
  text-shadow:
    0 0 1px rgba(255, 252, 248, 0.9),
    0 0 9px rgba(255, 178, 128, 0.8),
    0 0 24px rgba(255, 106, 43, 0.6);
}
.tld-float .tld-accent::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow:
    0 0 24px 4px rgba(255, 120, 56, 0.4),
    0 14px 90px 16px rgba(255, 86, 24, 0.22);
  opacity: 0.55;
  animation: tld-glow 3.8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes tld-glow {
  to { opacity: 1; }
}
@keyframes tld-in {
  from { opacity: 0; scale: 0.6; }
  to   { opacity: calc(0.45 + 0.55 * var(--z)); scale: 1; }
}
/* a slow loop, a little sideways too, so no two chips move in step */
@keyframes tld-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r)); }
  30%      { transform: translate3d(calc(var(--amp) * 0.25), calc(var(--amp) * -0.7), 0) rotate(calc(var(--r) * 0.7)); }
  60%      { transform: translate3d(calc(var(--amp) * -0.15), calc(var(--amp) * -1), 0) rotate(calc(var(--r) * 0.5)); }
}

/* tablet: the headline fills the width, so the chips (a fifth smaller) sit
   mostly above and below it; --xt/--yt place them */
@media (min-width: 768px) and (max-width: 1279px) {
  .tld-float .tld-chip {
    top: max(var(--yt, var(--y)), 120px);
    left: var(--xt, var(--x));
    font-size: calc(var(--s) * 0.8);
  }
}

/* phone: four chips hug the copy block, no backdrop blur (GPU cost) */
@media (max-width: 767px) {
  .tld-float {
    overflow: visible;
    --amp-k: 0.45;
  }
  .tld-float .tld-chip {
    display: none;
  }
  .tld-float .tld-chip.tld-m {
    display: inline-flex;
    top: var(--tm, auto);
    left: var(--lm, auto);
    right: var(--rm, auto);
    bottom: var(--bm, auto);
    font-size: var(--fsm, 18px);
    padding: 0.42em 0.85em 0.5em;
    border-radius: 14px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: none;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 14px 30px -12px rgba(0, 0, 0, 0.7);
  }
  .tld-float .tld-chip.tld-m.tld-accent {
    background:
      radial-gradient(120% 150% at 28% -10%, rgba(255, 196, 156, 0.45), rgba(255, 196, 156, 0) 58%),
      linear-gradient(150deg, rgba(255, 138, 77, 0.42) 0%, rgba(255, 106, 43, 0.2) 55%, rgba(200, 64, 16, 0.3) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 238, 224, 0.75),
      inset 0 0 10px rgba(255, 150, 90, 0.4),
      0 0 0 1px rgba(255, 120, 60, 0.3),
      0 0 5px rgba(255, 214, 186, 0.5),
      0 0 14px rgba(255, 138, 77, 0.45),
      0 0 30px rgba(255, 106, 43, 0.3);
  }
}


/* 5. Catalog showcase (feature section) ---------------------------------------
   Replaces the raster promo: a Telegram mini-app window with the real catalog
   UI, next to the price board (.com 1.5$, other zones 1$). Everything inside the window is sized in
   em, so one font-size scales the whole device per breakpoint.
   -------------------------------------------------------------------------- */
.dt-showcase {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 25em 11.5em;
  gap: 1.9em;
  align-items: center;
  width: max-content;
  max-width: 100%;
  flex: none;
  font-size: 16px;
}
.dt-device {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 25em;
  height: 36em;
  overflow: hidden;
  transform-origin: 50% 80%;
  border-radius: 1.375em;
  background: #F7F4EC;
  color: #171717;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 50px 100px -40px rgba(0, 0, 0, 0.95),
    0 20px 40px -24px rgba(0, 0, 0, 0.7);
}
/* the whole window shows, its rounded bottom included (like the DNS and
   top-up windows) */
.dt-device-wrap {
  position: relative;
}
.dt-device__bar {
  position: relative;
  z-index: 9;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4em;
  padding: 0 1.4em 0 1.5em;
  background: #1E2430;
  color: #fff;
  font-size: 1.1875em;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.dt-device__title b {
  font-weight: 700;
}
.dt-device__actions {
  display: flex;
  align-items: center;
  gap: 1.5em;
  opacity: 0.9;
}
.dt-device__dots {
  display: block;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 -0.38em 0 #fff, 0 0.38em 0 #fff;
}
.dt-device__close {
  position: relative;
  display: block;
  width: 0.8em;
  height: 0.8em;
}
.dt-device__close::before,
.dt-device__close::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 50%;
  height: 0.09em;
  background: #fff;
  transform: rotate(45deg);
}
.dt-device__close::after {
  transform: rotate(-45deg);
}
/* the app is a viewport; its content is scrolled by showcase.js (transform) */
.dt-app {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.dt-app__scroll {
  position: relative;
  padding: 1.375em 1.5em 1.5em;
  will-change: transform;
}
.dt-app__eyebrow,
.dt-app__meta,
.dt-app__thead {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.dt-app__eyebrow {
  font-size: 0.6875em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a877f;
}
.dt-app__title {
  margin: 0.45em 0 0.7em;
  font-size: 1.6875em;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.dt-app__search {
  display: flex;
  align-items: center;
  gap: 0.75em;
  height: 3.25em;
  padding: 0 1.125em;
  border-radius: 1.625em;
  background: #FFFDF8;
  border: 1px solid #E2DED2;
  color: #8b887f;
  font-size: 0.9375em;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
/* base.css styles every <svg> inside the carousel as the orange arrow
   (size/position/rotation per breakpoint, hidden on phones) — out-specify it */
.dt-feature[data-current-slide="0"] .dt-showcase svg {
  display: block;
  position: static;
  transform: none;
  flex: none;
}
.dt-feature[data-current-slide="0"] .dt-app__search svg {
  width: 1.2em;
  height: 1.2em;
}
.dt-app__search span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-app__caret {
  width: 1.5px;
  height: 1.2em;
  margin-left: -0.45em;
  background: #171717;
  animation: dt-blink 1.1s steps(1) infinite;
}
@keyframes dt-blink {
  50% { opacity: 0; }
}
.dt-app__chips {
  display: flex;
  gap: 0.5em;
  margin-top: 0.875em;
}
.dt-app__chips span {
  display: inline-flex;
  align-items: center;
  height: 2.375em;
  padding: 0 1em;
  border-radius: 1.2em;
  font-size: 0.875em;
  background: #FFFDF8;
  border: 1px solid #DDD8CB;
}
.dt-app__chips .is-active {
  background: #141414;
  border-color: #141414;
  color: #fff;
}
.dt-app__hint,
.dt-app__found {
  margin: 1em 0 0;
  font-size: 0.8125em;
  color: #6f6d66;
}
.dt-app__found b {
  color: #171717;
}
.dt-app__table {
  margin-top: 0.75em;
  border: 1px solid #E6E1D5;
  border-radius: 0.875em;
  background: #FBF9F3;
  overflow: hidden;
}
.dt-app__thead,
.dt-app__row {
  display: grid;
  grid-template-columns: 1fr 4.5em 4.5em;
  align-items: center;
  padding: 0 1.125em;
}
.dt-app__thead {
  position: relative;
  z-index: 2; /* sticks over the rows (showcase.js translates it) */
  height: 2.75em;
  font-size: 0.6875em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a877f;
  background: #FBF9F3;
  border-bottom: 1px solid #E6E1D5;
  /* keep column widths in sync with the rows (different font-size) */
  grid-template-columns: 1fr 6.55em 6.55em;
  transition: box-shadow 0.25s ease;
}
.dt-app__thead.is-stuck {
  box-shadow: 0 0.9em 1.4em -1.1em rgba(40, 30, 10, 0.35);
}
.dt-app__thead span:nth-child(2) { text-align: center; }
.dt-app__thead span:nth-child(3) { text-align: right; }
.dt-app__sort i {
  display: inline-block;
  margin-left: 0.5em;
  border: 0.4em solid transparent;
  border-top: 0;
  border-bottom-color: #8a877f;
  vertical-align: 0.1em;
}
.dt-app__row {
  position: relative;
  overflow: hidden;
  padding-top: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #EFEBE0;
  transition: background-color 0.3s ease;
}
.dt-app__row.is-hot {
  background: #fff;
}
.dt-app__domain {
  display: block;
  font-size: 1.0625em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dt-app__domain em {
  font-style: normal;
  color: #2E8B57;
}
.dt-app__meta {
  display: block;
  margin-top: 0.45em;
  font-size: 0.75em;
  color: #8a877f;
}
.dt-app__age {
  text-align: center;
  font-size: 1em;
  color: #2a2a2a;
}
.dt-app__price {
  position: relative;
  text-align: right;
  font-size: 1em;
  font-weight: 700;
  transition: color 0.25s ease;
}
.dt-app__more {
  padding: 1.1em 0 1.2em;
  text-align: center;
  font-size: 0.8125em;
  font-weight: 600;
  color: #6f6d66;
}


/* section rhythm: 140px between sections, 48px from a heading to its
   content (the feature and video sections; mobile.css has the phone values) */
.dt-feature {
  padding-top: 100px; /* the marquee above keeps 40px of its own */
  padding-bottom: 140px;
}
.dt-video {
  gap: 48px;
}
.dt-video-title {
  margin: 0;
}
@media (min-width: 1280px) {
  /* the catalog row on the page's 1200px column, like the rows below it */
  .dt-feature[data-current-slide="0"] [data-carousel-container] {
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
}


/* 5a. Living catalog demo -------------------------------------------------------
   Driven by showcase.js: it scrolls the list, moves the "finger", opens the
   payment sheet and fires the confetti. Without JS the first screen above is
   all that shows (sheet, toast and finger stay hidden).
   -------------------------------------------------------------------------- */

/* rows: press → selected → sold */
.dt-app__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.25em;
  background: var(--dt-accent);
  transform: scaleY(0);
  transition: transform 0.35s var(--dt-ease-out);
}
.dt-app__row.is-pressed { background-color: #F1ECE0; }
.dt-app__row.is-selected { background-color: #FFF0E6; }
.dt-app__row.is-selected::before { transform: scaleY(1); }
.dt-ripple {
  position: absolute;
  width: 2em;
  height: 2em;
  margin: -1em 0 0 -1em;
  border-radius: 50%;
  background: rgba(255, 106, 43, 0.25);
  pointer-events: none;
  animation: dt-ripple 0.65s var(--dt-ease-out) forwards;
}
@keyframes dt-ripple {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(15); opacity: 0; }
}
.dt-app__price::after {
  content: "Yours";
  position: absolute;
  right: -0.35em;
  top: 50%;
  padding: 0.32em 0.6em 0.32em 1.5em;
  border-radius: 1em;
  font-size: 0.72em;
  font-weight: 650;
  white-space: nowrap;
  color: #2E8B57;
  background: #E1F1E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E8B57' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat 0.5em 50% / 0.8em 0.8em;
  opacity: 0;
  transform: translateY(-50%) scale(0.5);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.dt-app__row.is-sold .dt-app__price { color: transparent; }
.dt-app__row.is-sold .dt-app__price::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  transition: opacity 0.25s ease, transform 0.6s var(--dt-spring-pop);
}
.dt-app__row.is-sold .dt-app__domain,
.dt-app__row.is-sold .dt-app__age { color: #a29e94; }
.dt-app__row.is-sold .dt-app__domain em { color: #86b59a; }
.dt-app__domain,
.dt-app__age,
.dt-app__domain em { transition: color 0.4s ease; }

/* the demo is a show, not a widget: no hover, clicks, drags or selection */
.dt-showcase {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* "Found 41 domains": rolling digits */
.dt-odo {
  display: inline-flex;
  align-items: flex-start;
  height: 1.3em;
  overflow: hidden;
  vertical-align: top;
}
.dt-odo__col {
  display: block;
  transition: transform 0.7s var(--dt-spring);
}
.dt-odo__col span {
  display: block;
  height: 1.3em;
  line-height: 1.3em;
}
.dt-app__found {
  line-height: 1.3;
}

/* iOS-like scroll indicator */
.dt-app__scrollbar {
  position: absolute;
  z-index: 3;
  top: 0.4em;
  right: 0.22em;
  bottom: 0.4em;
  width: 0.2em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.dt-app__scrollbar.is-on {
  opacity: 1;
  transition-duration: 0.12s;
}
.dt-app__scrollbar > i {
  display: block;
  width: 100%;
  height: 20%;
  border-radius: 1em;
  background: rgba(0, 0, 0, 0.32);
}

/* pull-to-refresh spinner */
.dt-app__ptr {
  position: absolute;
  z-index: 1;
  top: 0.9em;
  left: 50%;
  width: 1.7em;
  height: 1.7em;
  margin-left: -0.85em;
  opacity: 0;
  pointer-events: none;
}
.dt-app__ptr > i {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.2em solid rgba(23, 23, 23, 0.1);
  border-top-color: var(--dt-accent);
  border-right-color: var(--dt-accent);
}
.dt-app.is-refreshing .dt-app__ptr > i {
  animation: dt-rotate 0.7s linear infinite;
}
@keyframes dt-rotate {
  to { transform: rotate(360deg); }
}

/* toast at the top of the app */
.dt-toast {
  position: absolute;
  z-index: 7;
  top: 0.75em;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.6em;
  max-width: calc(100% - 2em);
  padding: 0.55em 1em 0.55em 0.55em;
  border-radius: 2em;
  background: rgba(30, 36, 48, 0.95);
  color: #fff;
  font-size: 0.8125em;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1em 2em -0.8em rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-50%, -170%) scale(0.85);
  transition: transform 0.35s ease-in, opacity 0.3s ease;
  pointer-events: none;
}
.dt-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition: transform 0.7s var(--dt-spring-pop), opacity 0.2s ease;
}
.dt-toast b {
  font-weight: 700;
}
.dt-toast__icon {
  position: relative;
  flex: none;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #34C759;
  box-shadow: 0 0 0 0.25em rgba(52, 199, 89, 0.2);
}
.dt-toast__icon::after {
  content: "";
  position: absolute;
  left: 0.56em;
  top: 0.32em;
  width: 0.38em;
  height: 0.72em;
  border: solid #fff;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

/* payment sheet: rises from the bottom edge of the window and docks there */
.dt-sheet-scrim {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: rgba(24, 20, 14, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.dt-app.is-sheet .dt-sheet-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}
.dt-sheet {
  position: absolute;
  z-index: 6;
  left: 0.75em;
  right: 0.75em;
  bottom: 0.75em;
  padding: 0.65em 1.25em 1.25em;
  border-radius: 1.5em;
  background: #FFFDF8;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 1.6em 3em -1em rgba(0, 0, 0, 0.45);
  visibility: hidden;
  transform: translate3d(0, calc(100% + 1.5em), 0);
  transition: transform 0.42s cubic-bezier(0.55, 0, 0.75, 0.2), visibility 0s linear 0.42s;
}
.dt-app.is-sheet .dt-sheet {
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: transform 0.8s var(--dt-spring);
}
.dt-sheet__grab {
  display: block;
  width: 2.5em;
  height: 0.3em;
  margin: 0 auto 0.85em;
  border-radius: 1em;
  background: #DDD8CB;
}
.dt-sheet__domain {
  font-size: 1.625em;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.dt-sheet__domain em {
  font-style: normal;
  color: #2E8B57;
}
/* age + the date the domain works until: two cells, like a receipt */
.dt-sheet__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.9em;
  border: 1px solid #E8E3D6;
  border-radius: 0.9em;
  background: #F6F2E9;
}
.dt-sheet__fact {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  min-width: 0;
  padding: 0.6em 0.85em 0.65em;
}
.dt-sheet__fact + .dt-sheet__fact {
  border-left: 1px solid #E8E3D6;
}
.dt-sheet__fact-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.625em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a877f;
}
.dt-sheet__fact-value {
  font-size: 0.9375em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1d1c19;
  white-space: nowrap;
}
.dt-sheet__price {
  display: flex;
  align-items: baseline;
  margin: 0.95em 0 0.85em;
}
.dt-sheet__label {
  margin-right: auto;
  font-size: 0.8125em;
  color: #6f6d66;
}
.dt-sheet__amount {
  display: inline-block;
  font-size: 1.75em;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 70% 70%;
}
/* entrance choreography when the sheet opens */
.dt-sheet__domain,
.dt-sheet__facts {
  opacity: 0;
  transform: translateY(0.9em);
}
.dt-app.is-sheet .dt-sheet__domain,
.dt-app.is-sheet .dt-sheet__facts {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.7s var(--dt-spring);
}
.dt-app.is-sheet .dt-sheet__domain { transition-delay: 0.1s; }
.dt-app.is-sheet .dt-sheet__facts { transition-delay: 0.16s; }
.dt-app.is-sheet .dt-sheet__amount {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease 0.45s, transform 0.75s var(--dt-spring-pop) 0.45s;
}

/* pay button: idle, loading, done */
.dt-pay {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 3.25em;
  border-radius: 1em;
  background-color: #141414;
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0.6em 1.2em -0.7em rgba(0, 0, 0, 0.6);
  transition: background-color 0.45s ease, color 0.3s ease, transform 0.18s var(--dt-ease-out);
}
.dt-pay.is-down {
  transform: scale(0.965);
}
.dt-pay__face {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 0.5s var(--dt-spring), opacity 0.25s ease;
}
.dt-pay[data-state="idle"] .dt-pay__face--idle,
.dt-pay[data-state="loading"] .dt-pay__face--loading,
.dt-pay[data-state="done"] .dt-pay__face--done {
  opacity: 1;
  transform: none;
}
.dt-pay[data-state="loading"] .dt-pay__face--idle,
.dt-pay[data-state="done"] .dt-pay__face--idle,
.dt-pay[data-state="done"] .dt-pay__face--loading {
  transform: translateY(-110%);
}
.dt-pay[data-state="done"] {
  background-color: #2E8B57;
}
/* base.css sizes every svg in the carousel — out-specify it */
.dt-feature[data-current-slide="0"] .dt-showcase .dt-pay svg {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dt-pay svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.dt-pay[data-state="done"] svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s var(--dt-ease-out) 0.18s;
}
.dt-pay__progress {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 106, 43, 0.5), rgba(255, 138, 77, 0.85));
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.dt-pay[data-state="loading"] .dt-pay__progress {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 1.25s cubic-bezier(0.3, 0.1, 0.25, 1), opacity 0.2s ease;
}
.dt-pay::after { /* light sweep while confirming */
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 -60%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-60%);
  opacity: 0;
}
.dt-pay[data-state="loading"]::after {
  opacity: 1;
  animation: dt-sheen-once 1s linear infinite;
}
.dt-spinner {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.16em solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: dt-rotate 0.7s linear infinite;
}

/* the "finger": a touch indicator like in screen recordings */
.dt-finger {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  width: 2.7em;
  height: 2.7em;
  margin: -1.35em 0 0 -1.35em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.13em solid rgba(255, 255, 255, 0.95);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 0.45em 1.3em rgba(0, 0, 0, 0.3),
    inset 0 0 0.7em rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: background-color 0.15s ease;
}
.dt-finger.is-down {
  background-color: rgba(0, 0, 0, 0.14);
}
.dt-touch-ring {
  position: absolute;
  z-index: 8;
  width: 2.7em;
  height: 2.7em;
  margin: -1.35em 0 0 -1.35em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.12em solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
  animation: dt-touch-ring 0.5s var(--dt-ease-out) forwards;
}
@keyframes dt-touch-ring {
  from { transform: scale(0.8); opacity: 0.9; }
  to   { transform: scale(2); opacity: 0; }
}

/* success: the window flashes with brand light (same shadow count in every
   keyframe so it interpolates) */
.dt-device.is-glow {
  animation: dt-glow 1.6s var(--dt-ease-out);
}
@keyframes dt-glow {
  0% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.07),
      0 50px 100px -40px rgba(0, 0, 0, 0.95),
      0 20px 40px -24px rgba(0, 0, 0, 0.7),
      0 0 0 0 rgba(255, 106, 43, 0),
      0 0 0 0 rgba(255, 106, 43, 0);
  }
  18% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.07),
      0 50px 100px -40px rgba(0, 0, 0, 0.95),
      0 20px 40px -24px rgba(0, 0, 0, 0.7),
      0 0 0 0.18em rgba(255, 138, 77, 0.9),
      0 0 4em 0.8em rgba(255, 106, 43, 0.5);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.07),
      0 50px 100px -40px rgba(0, 0, 0, 0.95),
      0 20px 40px -24px rgba(0, 0, 0, 0.7),
      0 0 0 0.18em rgba(255, 138, 77, 0),
      0 0 7em 1.6em rgba(255, 106, 43, 0);
  }
}

/* confetti layer (created by showcase.js, fixed over the viewport) */
.dt-fx {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the price board next to the window: .com 1.5$, other zones 1$ */
.dt-deal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6em;
  color: #fff;
  font-family: 'IBM Plex Sans Condensed', Arial;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}
.dt-deal__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}
.dt-deal__zone {
  font-size: 1.25em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dt-accent);
  text-shadow: 0 0 18px rgba(255, 106, 43, 0.45);
}
.dt-deal__sum {
  font-size: 5em;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.12);
}

/* board motion: plays in once when it scrolls into view (.is-in), then the
   price of the zone just bought punches (.is-win). The hidden start state
   needs [data-demo] (set by showcase.js), so without JS it is just static. */
.dt-showcase[data-demo] .dt-deal__zone {
  transition: opacity 0.5s ease, transform 0.7s var(--dt-spring);
}
.dt-showcase[data-demo] .dt-deal__sum {
  transition: opacity 0.25s ease, transform 0.8s var(--dt-spring-pop), filter 0.45s ease;
}
.dt-showcase[data-demo] .dt-deal__item:nth-child(1) .dt-deal__zone { transition-delay: 0.1s; }
.dt-showcase[data-demo] .dt-deal__item:nth-child(1) .dt-deal__sum { transition-delay: 0.25s; }
.dt-showcase[data-demo] .dt-deal__item:nth-child(2) .dt-deal__zone { transition-delay: 0.5s; }
.dt-showcase[data-demo] .dt-deal__item:nth-child(2) .dt-deal__sum { transition-delay: 0.65s; }
.dt-showcase[data-demo] .dt-deal:not(.is-in) .dt-deal__zone {
  opacity: 0;
  transform: translateY(0.6em);
}
.dt-showcase[data-demo] .dt-deal:not(.is-in) .dt-deal__sum {
  opacity: 0;
  transform: scale(1.9);
  filter: blur(0.08em);
}
.dt-deal__item.is-win .dt-deal__sum {
  animation: dt-punch 0.9s var(--dt-ease-out);
}
@keyframes dt-punch {
  0%   { transform: none; }
  16%  {
    transform: scale(1.22) rotate(-5deg);
    color: #FFD9C4;
    text-shadow: 0 0 0.2em rgba(255, 106, 43, 0.95), 0 0 0.6em rgba(255, 106, 43, 0.55);
  }
  42%  { transform: scale(0.95) rotate(1.5deg); }
  70%  { transform: scale(1.02); }
  100% { transform: none; text-shadow: 0 0 40px rgba(255, 255, 255, 0.12); }
}


/* 5b. Mini-app demo rows (DNS editor, top-up) ----------------------------------
   More rows of the feature section, zigzagging under the catalog row: a copy
   card and a Telegram mini-app window that plays itself (dns-demo.js,
   topup-demo.js). Same rules as the catalog: display only, everything in
   the window sized in em, so one font-size per breakpoint scales it.
   -------------------------------------------------------------------------- */
/* every row of the section sits on the page's 1200px column: the outer
   items touch its edges, the arrows below are placed from its centre */
.dt-demo-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 56px auto 0;
}
/* the card leans away from its window, like "Cheap by design" */
.dt-demo-card--left {
  transform: rotate(-4deg);
  margin-bottom: 110px;
}
.dt-demo-card--right {
  transform: rotate(4deg);
  margin-top: 110px;
}
/* copy cards' headings: the two-line title on the left, an icon tile on the
   right, centred on both lines. Lucide line icons (tag, globe) on the brand
   orange, the Tether mark on Tether green; flat, slightly rounded squares */
.dt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.dt-card-title {
  display: block;
  min-width: 0;
}
.dt-hicon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--heading-font-size) * 1.75);
  height: calc(var(--heading-font-size) * 1.75);
  border-radius: calc(var(--heading-font-size) * 0.38);
  color: var(--dt-ink);
  background: var(--dt-accent);
}
.dt-hicon--usdt {
  color: #fff;
  background: #26A17B;
}
.dt-feature[data-current-slide="0"] .dt-hicon svg {
  display: block;
  position: static;
  transform: none;
  width: 50%;
  height: 50%;
  fill: currentColor;
}
/* the Tether mark is drawn by hand: its ring is a stroke */
.dt-feature[data-current-slide="0"] .dt-hicon--usdt svg {
  width: 64%;
  height: 64%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* base.css styles every <svg> in the carousel as the orange arrow: set all of it */
.dt-feature[data-current-slide="0"] .dt-demo-arrow {
  position: absolute;
  z-index: 1;
  right: auto;
  width: 300px;
  height: 173px;
  pointer-events: none;
}
/* card on the left, window on the right: the tail starts well inside the
   card (clear of its corners whatever the text wraps to), the head stops
   30px before the window */
.dt-feature[data-current-slide="0"] .dt-demo-arrow--right {
  left: calc(50% - 129px);
  top: 198px;
  transform: scaleX(-1);
}
/* window on the left, card on the right: same, mirrored */
.dt-feature[data-current-slide="0"] .dt-demo-arrow--left {
  left: calc(50% - 171px);
  top: 232px;
  transform: scaleY(-1);
}
.dt-mini {
  position: relative;
  z-index: 2;
  flex: none;
  font-size: 16px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.dt-feature[data-current-slide="0"] .dt-mini svg {
  display: block;
  position: static;
  transform: none;
  flex: none;
}

/* Telegram's main button, pinned to the bottom of the window. Faces slide
   in from below and leave upwards: idle, ready, loading, done */
.dt-mb-bar {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.7em 0.8em 0.85em;
  background: #fff;
  box-shadow: 0 -1px 0 #EFEBE0;
  transition: transform 0.5s var(--dt-spring), opacity 0.35s ease;
}
.dt-mb-bar.is-away {
  transform: translateY(110%);
}
.dt-mb {
  position: relative;
  overflow: hidden;
  height: 3.1em;
  border-radius: 0.7em;
  background-color: #5A9FDB;
  color: #fff;
  font-weight: 600;
  transition: background-color 0.45s ease, transform 0.18s var(--dt-ease-out);
}
.dt-mb.is-down {
  transform: scale(0.97);
}
.dt-mb[data-state="done"] {
  background-color: #2E8B57;
}
.dt-mb__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 0.5s var(--dt-spring), opacity 0.25s ease;
}
.dt-mb[data-state="idle"] .dt-mb__face--idle,
.dt-mb[data-state="ready"] .dt-mb__face--ready,
.dt-mb[data-state="loading"] .dt-mb__face--loading,
.dt-mb[data-state="done"] .dt-mb__face--done {
  opacity: 1;
  transform: none;
}
.dt-mb[data-state="ready"] .dt-mb__face--idle,
.dt-mb[data-state="loading"] .dt-mb__face--idle,
.dt-mb[data-state="done"] .dt-mb__face--idle,
.dt-mb[data-state="done"] .dt-mb__face--loading {
  transform: translateY(-110%);
}
.dt-feature[data-current-slide="0"] .dt-mini .dt-mb svg {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dt-mb svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.dt-mb[data-state="done"] svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s var(--dt-ease-out) 0.18s;
}


/* 5c. DNS editor ------------------------------------------------------------------
   Real bot UI: type the server IP into both A records, add a CNAME for www,
   Save (dns-demo.js). */
.dt-dns__scroll {
  position: relative;
  padding: 1.375em 1.5em 6.5em;
  will-change: transform;
}
.dt-dns__domain {
  margin-top: 0.35em;
  font-size: 1.875em;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #171717;
  transition: opacity 0.35s ease, transform 0.5s var(--dt-spring);
}
.dt-dns__lead {
  margin: 0.8em 0 0;
  font-size: 0.875em;
  line-height: 1.45;
  color: #45433d;
}
.dt-dns__head {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: 1.25em;
  font-size: 1.3125em;
  letter-spacing: -0.01em;
  color: #171717;
}
.dt-dns__count {
  display: inline-block;
  font-size: 0.62em;
  color: #8a877f;
}
.dt-dns__count.is-bump {
  animation: dt-dns-bump 0.6s var(--dt-spring-pop);
}
@keyframes dt-dns-bump {
  0%   { transform: none; color: #8a877f; }
  30%  { transform: translateY(-0.3em) scale(1.5); color: var(--dt-accent); }
  100% { transform: none; color: #8a877f; }
}
.dt-dns__card {
  margin-top: 0.85em;
  border: 1px solid #E6E1D5;
  border-radius: 1.25em;
  background: #fff;
  overflow: hidden;
}
.dt-dns__rec + .dt-dns__rec {
  border-top: 1px solid #EFEBE0;
}
.dt-dns__rec-in {
  padding: 1.05em 1.2em 1em;
}
/* the added record unfolds from zero height */
.dt-dns__rec--new {
  display: grid;
  grid-template-rows: 0fr;
  border-top-color: transparent !important;
  transition: grid-template-rows 0.6s var(--dt-spring), border-color 0.3s ease;
}
.dt-dns__rec--new > .dt-dns__rec-in {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease 0.12s;
}
.dt-dns__rec--new.is-open {
  grid-template-rows: 1fr;
  border-top-color: #EFEBE0 !important;
}
.dt-dns__rec--new.is-open > .dt-dns__rec-in {
  opacity: 1;
}
.dt-dns__types {
  display: flex;
  align-items: center;
  gap: 0.2em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.6875em;
  letter-spacing: 0.08em;
  color: #6f6d66;
}
.dt-dns__types span {
  min-width: 2.7em;
  padding: 0.75em 0.55em;
  border-radius: 0.7em;
  text-align: center;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s var(--dt-spring-pop);
}
.dt-dns__types span.is-active {
  background: #141414;
  color: #fff;
}
.dt-dns__types span.is-pressed {
  transform: scale(0.9);
}
.dt-feature[data-current-slide="0"] .dt-dns .dt-dns__trash {
  width: 1.9em;
  height: 1.9em;
  margin-left: auto;
  fill: none;
  stroke: #8a877f;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dt-dns__field {
  display: grid;
  grid-template-columns: 2.3em 1fr;
  align-items: end;
  margin-top: 0.5em;
}
.dt-dns__field > i {
  padding: 0 0 0.6em 0.3em;
  font-style: normal;
  color: #A23B2A;
}
.dt-dns__input {
  display: flex;
  align-items: center;
  height: 2.35em;
  border-bottom: 1px solid #E2DED2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.9375em;
  color: #171717;
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dt-dns__field.is-focus .dt-dns__input {
  border-bottom-color: #171717;
  box-shadow: 0 1px 0 #171717;
}
.dt-dns__text:empty::before {
  content: attr(data-placeholder);
  color: #b5afa2;
}
.dt-dns__field.is-focus .dt-dns__text:empty::before {
  content: none;
}
.dt-dns__text.is-sel {
  border-radius: 0.15em;
  background: #CFE0FF;
}
.dt-dns__caret {
  flex: none;
  width: 1.5px;
  height: 1.2em;
  margin-left: 1px;
  background: #171717;
  animation: dt-blink 1.1s steps(1) infinite;
}
.dt-dns__caret.is-typing {
  animation: none;
}
.dt-dns__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  height: 3.25em;
  margin-top: 0.85em;
  border: 1.5px dashed #D9D3C5;
  border-radius: 1.25em;
  font-size: 0.9375em;
  color: #2b2a27;
  transition: background-color 0.2s ease, transform 0.18s var(--dt-ease-out);
}
.dt-dns__add span {
  font-size: 1.35em;
  font-weight: 300;
  line-height: 1;
}
.dt-dns__add.is-pressed {
  background: #EFEADF;
  transform: scale(0.98);
}
/* between rounds: the editor fades and comes back with the next domain */
.dt-dns__scroll,
.dt-dns .dt-mb-bar {
  transition: opacity 0.35s ease;
}
.dt-dns .dt-app.is-reset .dt-dns__scroll,
.dt-dns .dt-app.is-reset .dt-mb-bar {
  opacity: 0;
}


/* 5d. Top-up ------------------------------------------------------------------------
   Two screens in one window: the bot's Balance form and the paykit invoice,
   pushed in from the right. topup-demo.js plays: 10$, Continue, the invoice
   ticks, copy the address, payment received, TRON confirmations, accepted,
   back, the balance goes up. */
.dt-top__screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.55s ease, opacity 0.35s ease;
}
.dt-top__screen--form {
  background: #F7F4EC;
}
.dt-top__screen--pay {
  z-index: 2;
  background: linear-gradient(180deg, #F4F0E8 0%, #EEE9DE 100%);
  box-shadow: -1.5em 0 3em -1.5em rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.55s, opacity 0.35s ease;
}
.dt-topup .dt-app.is-pay .dt-top__screen--form {
  transform: translateX(-28%);
  filter: brightness(0.93);
}
.dt-topup .dt-app.is-pay .dt-top__screen--pay {
  transform: none;
  visibility: visible;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
}
.dt-top__scroll {
  position: relative;
  padding: 1.375em 1.5em 6.5em;
  will-change: transform;
}
.dt-top__screen--pay .dt-top__scroll {
  padding: 0.9em 1.25em 2em;
}
/* between rounds the window fades and comes back untouched */
.dt-topup .dt-app.is-reset .dt-top__screen,
.dt-topup .dt-app.is-reset .dt-mb-bar {
  opacity: 0;
}

/* --- Balance form --- */
.dt-top__title {
  margin-top: 0.3em;
  font-size: 2.1em;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #171717;
}
.dt-top__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.6875em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6f6d66;
}
.dt-top__label--section {
  display: block;
  margin: 2em 0 1.1em;
}
.dt-top__balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.9em;
  padding: 1.15em 1.25em;
  border: 1px solid #E6E1D5;
  border-radius: 1.1em;
  background: #fff;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.dt-top__sum {
  font-size: 1.5em;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #171717;
  transition: color 0.4s ease;
}
.dt-top__balance.is-up {
  border-color: rgba(46, 139, 87, 0.55);
  box-shadow: 0 0 0 0.3em rgba(46, 139, 87, 0.12);
}
.dt-top__balance.is-up .dt-top__sum {
  color: #2E8B57;
}
.dt-top__support {
  position: relative;
  margin-top: 1.5em;
  padding: 1.3em 1.25em 1.05em;
  border: 1.5px solid #D9694A;
  border-radius: 1.1em;
  background: #fff;
  box-shadow: 0 0 0 0.35em rgba(217, 105, 74, 0.1);
}
.dt-top__badge {
  position: absolute;
  top: -1.05em;
  left: 1.6em;
  padding: 0.4em 0.8em;
  border-radius: 1em;
  background: #D9694A;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.625em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.dt-top__support-title {
  font-size: 1.0625em;
  font-weight: 500;
  color: #171717;
}
.dt-top__support-text {
  margin: 0.35em 0 0.75em;
  font-size: 0.875em;
  line-height: 1.45;
  color: #45433d;
}
.dt-top__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid #9c968a;
  font-size: 0.9375em;
  color: #171717;
}
.dt-feature[data-current-slide="0"] .dt-topup .dt-top__link svg {
  width: 0.9em;
  height: 0.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dt-top__amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
}
.dt-top__amounts span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.3em;
  border: 1px solid #E6E1D5;
  border-radius: 0.75em;
  background: #fff;
  font-size: 1.375em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #171717;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--dt-spring-pop);
}
.dt-top__amounts span.is-pressed {
  transform: scale(0.95);
}
.dt-top__amounts span.is-picked {
  border-color: #141414;
  background: #141414;
  color: #fff;
}
.dt-top__custom {
  padding: 1.1em 1.25em;
  border: 1px solid #E6E1D5;
  border-radius: 1.1em;
  background: #fff;
}
.dt-top__custom-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.5em;
  font-weight: 600;
  color: #a39d90;
}
.dt-top__custom p {
  margin: 0.35em 0 0;
  font-size: 0.8125em;
  color: #6f6d66;
}

/* --- paykit invoice --- */
.dt-top__paybar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.6em;
  margin-bottom: 0.9em;
}
.dt-top__back {
  position: absolute;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.5em;
  border-radius: 0.5em;
  font-size: 0.9375em;
  color: #45433d;
  transition: background-color 0.2s ease;
}
.dt-top__back i {
  width: 0.45em;
  height: 0.45em;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.dt-top__back.is-pressed {
  background: rgba(0, 0, 0, 0.07);
}
.dt-top__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.125em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #171717;
}
.dt-top__brand b {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.4em;
  background: #D9694A;
  color: #fff;
  font-size: 0.9em;
}
.dt-top__invoice {
  position: relative;
  overflow: hidden;
  padding: 1.15em 1.1em 1.2em;
  border: 1px solid #E6E1D5;
  border-radius: 1.4em;
  background: #fff;
  box-shadow: 0 1.2em 2.4em -1.6em rgba(60, 40, 20, 0.35);
}
/* the top edge takes the colour of the status */
.dt-top__invoice::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #D9694A;
  transition: background-color 0.5s ease;
}
.dt-top__invoice[data-state="received"]::before { background: #C99A3F; }
.dt-top__invoice[data-state="confirmed"]::before { background: #4C9A5C; }
.dt-top__chips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}
.dt-top__coin {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.65em;
  border: 1px solid #DDD8CB;
  border-radius: 0.45em;
  background: #F1EEE6;
  font-size: 0.8125em;
  color: #6f6d66;
}
.dt-top__coin b {
  font-weight: 700;
  color: #171717;
}
.dt-feature[data-current-slide="0"] .dt-topup .dt-top__coin svg {
  width: 1.35em;
  height: 1.35em;
}
.dt-top__status {
  display: grid;
  justify-items: end;
  font-size: 0.6875em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dt-top__status > span {
  grid-area: 1 / 1;
  padding: 0.6em 0.8em;
  border-radius: 0.4em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.3s ease, transform 0.45s var(--dt-spring);
}
.dt-top__status-awaiting {
  background: #F6E7C5;
  color: #A8741A;
}
.dt-top__status-received,
.dt-top__status-confirmed {
  background: #DCEBDD;
  color: #4C7A4F;
}
.dt-top__invoice[data-state="awaiting"] .dt-top__status-awaiting,
.dt-top__invoice[data-state="received"] .dt-top__status-received,
.dt-top__invoice[data-state="confirmed"] .dt-top__status-confirmed {
  opacity: 1;
  transform: none;
}
/* the invoice body and the paid body swap with a height animation */
.dt-top__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dt-top__panel-in {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dt-top__invoice[data-state="awaiting"] .dt-top__panel--awaiting,
.dt-top__invoice:not([data-state="awaiting"]) .dt-top__panel--paid {
  grid-template-rows: 1fr;
}
.dt-top__invoice[data-state="awaiting"] .dt-top__panel--awaiting > .dt-top__panel-in,
.dt-top__invoice:not([data-state="awaiting"]) .dt-top__panel--paid > .dt-top__panel-in {
  opacity: 1;
  transition: opacity 0.4s ease 0.2s;
}
.dt-top__timer {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.9em;
  padding: 0.75em 0.9em;
  border-radius: 0.65em;
  background: #F6E7C5;
  color: #A8741A;
  font-size: 0.875em;
}
.dt-top__timer b {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dt-feature[data-current-slide="0"] .dt-topup .dt-top__timer svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.dt-top__due-label {
  margin-top: 1.4em;
  text-align: center;
  font-size: 0.6875em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f6d66;
}
.dt-top__due {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35em;
  margin-top: 0.15em;
  font-size: 1.0625em;
  color: #6f6d66;
}
.dt-top__due b {
  font-size: 2em;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #171717;
}
.dt-top__split {
  display: flex;
  justify-content: center;
  margin-top: 0.5em;
}
.dt-top__split div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.1em;
  font-size: 0.9375em;
}
.dt-top__split div + div {
  border-left: 1px solid #E6E1D5;
}
.dt-top__split b {
  font-weight: 700;
  color: #171717;
}
.dt-top__split span {
  margin-top: 0.2em;
  font-size: 0.65em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a877f;
}
.dt-top__qr {
  width: 9.5em;
  margin: 1.1em auto 0;
  padding: 0.8em;
  border: 1px solid #E6E1D5;
  border-radius: 1em;
  background: #fff;
}
.dt-feature[data-current-slide="0"] .dt-topup .dt-top__qr svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  fill: #111;
}
.dt-top__addr-head {
  display: flex;
  justify-content: space-between;
  margin-top: 1.6em;
  font-size: 0.6875em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f6d66;
}
.dt-top__addr {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.5em;
  padding: 0.75em 0.75em 0.75em 0.9em;
  border-radius: 0.8em;
  background: #F1EEE6;
}
.dt-top__addr code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125em;
  line-height: 1.45;
  word-break: break-all;
  color: #171717;
}
.dt-top__copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6em 0.8em;
  border: 1px solid #D9D3C5;
  border-radius: 0.6em;
  background: #fff;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #45433d;
  transition: transform 0.18s var(--dt-ease-out), color 0.25s ease, border-color 0.25s ease;
}
.dt-top__copy i {
  font-style: normal;
}
.dt-top__copy.is-pressed {
  transform: scale(0.94);
}
.dt-top__copy.is-done {
  border-color: rgba(46, 139, 87, 0.45);
  color: #2E8B57;
}
.dt-feature[data-current-slide="0"] .dt-topup .dt-top__copy svg {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dt-feature[data-current-slide="0"] .dt-topup .dt-top__copy .dt-top__copy-done,
.dt-feature[data-current-slide="0"] .dt-topup .dt-top__copy.is-done .dt-top__copy-icon {
  display: none;
}
.dt-feature[data-current-slide="0"] .dt-topup .dt-top__copy.is-done .dt-top__copy-done {
  display: block;
  stroke-width: 2.6;
}
.dt-top__mark {
  display: grid;
  place-items: center;
  width: 4.6em;
  height: 4.6em;
  margin: 1.4em auto 0;
  border-radius: 50%;
  background: #F7E3C0;
  color: #A8741A;
  transition: background-color 0.5s ease, color 0.5s ease, transform 0.6s var(--dt-spring-pop);
}
.dt-top__invoice[data-state="confirmed"] .dt-top__mark {
  background: #DDEBDD;
  color: #3E7A45;
  transform: scale(1.06);
}
.dt-feature[data-current-slide="0"] .dt-topup .dt-top__mark svg {
  width: 2em;
  height: 2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dt-top__paid-title {
  margin-top: 0.8em;
  text-align: center;
  font-size: 1.3125em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #171717;
}
.dt-top__paid-text {
  margin: 0.35em 0 0;
  text-align: center;
  font-size: 0.875em;
  color: #6f6d66;
}
.dt-top__paid-text b {
  color: #45433d;
  font-variant-numeric: tabular-nums;
}
.dt-top__when-confirmed,
.dt-top__invoice[data-state="confirmed"] .dt-top__when-received {
  display: none;
}
.dt-top__invoice[data-state="confirmed"] .dt-top__when-confirmed {
  display: inline;
}
.dt-top__progress {
  height: 0.4em;
  margin: 1em 0.4em 0;
  overflow: hidden;
  border-radius: 1em;
  background: #EFEBE0;
  transition: height 0.4s ease, margin 0.4s ease, opacity 0.3s ease;
}
.dt-top__progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #B07A26, #4C7A4F);
  transition: width 0.25s ease-out;
}
.dt-top__invoice[data-state="confirmed"] .dt-top__progress {
  height: 0;
  margin-top: 0;
  opacity: 0;
}
.dt-top__hash {
  margin-top: 1.1em;
  padding: 0.8em 0.9em;
  border-radius: 0.8em;
  background: #F1EEE6;
}
.dt-top__hash span {
  display: block;
  font-size: 0.625em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a877f;
}
.dt-top__hash code {
  display: block;
  margin-top: 0.35em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.75em;
  line-height: 1.5;
  word-break: break-all;
  color: #45433d;
}


/* 5e. Video play button --------------------------------------------------------
   Covers the poster until the visitor starts the video (index.html script
   adds .is-ready, then .is-playing; on "ended" it comes back for a replay).
   Without JS the native controls stay and the button is never shown. */
.dt-play {
  display: none;
}
.dt-video-frame.is-ready:not(.is-playing) .dt-play {
  display: grid;
}
.dt-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 16px;
  /* a light dim so the button reads; the poster stays sharp */
  background: rgba(10, 10, 12, 0.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.3s ease;
}
.dt-play__icon {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  color: #111;
  background: #fff;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the optical offset lives in the path itself (index.html), no margins here */
.dt-play__icon svg {
  width: 40%;
  height: 40%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .dt-play:hover .dt-play__icon {
    transform: scale(1.05);
  }
}

/* 5f. Under the video: statement and FAQ ----------------------------------------
   A plain editorial paragraph that lights up word by word as it scrolls
   past (about.js wraps the words; without JS it is simply white), then
   the questions: native <details>, about.js only animates the height.
   Phone/tablet sizes live in mobile.css. */
.dt-about {
  width: 100%;
  padding: 140px 40px 0;
}
.dt-about__in,
.dt-faq__in {
  max-width: 1200px;
  margin: 0 auto;
}
.dt-statement {
  margin: 0;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.3vw, 46px);
  line-height: 1.24;
  letter-spacing: -0.018em;
  color: #fff;
  text-wrap: pretty;
}
.dt-statement em {
  font-style: normal;
  color: var(--dt-accent);
}
.dt-statement.is-reveal .dt-w {
  opacity: var(--o, 0.16);
  transition: opacity 0.2s linear;
}

.dt-faq {
  width: 100%;
  padding: 140px 40px 0;
}
.dt-faq__in {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 80px;
  align-items: start;
}
.dt-faq__side {
  position: sticky;
  top: 120px;
}
.dt-faq__title {
  margin: 0;
  text-align: left;
}
/* "покупкой" / "покупкою" is far wider than "buy": one line in the side column */
@media (min-width: 1280px) {
  :lang(ru) .dt-faq__title .heading--variant_scream,
  :lang(uk) .dt-faq__title .heading--variant_scream {
    font-size: 72px;
  }
}
.dt-faq__note {
  max-width: 30ch;
  margin: 28px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.dt-faq__ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 138, 77, 0.5);
  font-family: 'IBM Plex Sans Condensed', Arial;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dt-accent-2);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.dt-faq__ask svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform 0.25s var(--dt-ease-out);
}
.dt-faq__list {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dt-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dt-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  list-style: none;
  cursor: pointer;
  font-family: 'IBM Plex Sans Condensed', Arial;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}
.dt-faq__q::-webkit-details-marker {
  display: none;
}
.dt-faq__q::marker {
  content: "";
}
/* a plus in a hairline circle; open: it turns into a cross on the accent */
.dt-faq__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: transform 0.35s var(--dt-ease-out), background-color 0.25s ease, box-shadow 0.25s ease;
}
.dt-faq__icon::before,
.dt-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: #fff;
  transition: background-color 0.25s ease;
}
.dt-faq__icon::after {
  transform: rotate(90deg);
}
.dt-faq__item[open] .dt-faq__icon {
  transform: rotate(45deg);
  background: var(--dt-accent);
  box-shadow: none;
}
.dt-faq__item[open] .dt-faq__icon::before,
.dt-faq__item[open] .dt-faq__icon::after {
  background: var(--dt-ink);
}
.dt-faq__a {
  overflow: hidden;
}
.dt-faq__a a {
  color: var(--dt-accent-2);
  text-decoration: underline;
  text-decoration-color: rgba(255, 138, 77, 0.45);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.dt-faq__a p {
  max-width: 62ch;
  margin: 0;
  padding: 0 56px 28px 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
@media (hover: hover) {
  .dt-faq__q:hover {
    color: var(--dt-accent-2);
  }
  .dt-faq__q:hover .dt-faq__icon {
    box-shadow: inset 0 0 0 1px rgba(255, 138, 77, 0.6);
  }
  .dt-faq__item[open] .dt-faq__q:hover .dt-faq__icon {
    box-shadow: none;
  }
  .dt-faq__ask:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
  }
  .dt-faq__ask:hover svg {
    transform: translate(2px, -2px);
  }
  .dt-faq__a a:hover {
    color: #fff;
  }
}
.dt-faq__q:focus-visible,
.dt-faq__ask:focus-visible {
  outline: 2px solid var(--dt-accent-2);
  outline-offset: 4px;
  border-radius: 4px;
}


/* 6. Focus & motion preferences ---------------------------------------------- */
.dt-btn:focus-visible,
.dt-cta:focus-visible,
.dt-play:focus-visible,
.dt-logo:focus-visible,
.dt-nav__links a:focus-visible,
.dt-footer-links a:focus-visible,
.dt-footer-langs a:focus-visible {
  outline: 2px solid var(--dt-accent-2);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .dt-cta::before,
  .dt-cta::after,
  .dt-hero-cta-row::before,
  .dt-btn::after,
  .dt-btn--ghost::before,
  .tld-float .tld-chip,
  .tld-float .tld-accent::after,
  .dt-app__caret {
    animation: none;
  }
  .dt-btn,
  .dt-btn__icon,
  .dt-cta,
  .dt-cta__icon,
  .dt-cta__icon svg {
    transition: none;
  }
  /* the catalog demo doesn't autoplay here (showcase.js); manual taps still
     work, every state change is instant */
  .dt-showcase *,
  .dt-showcase *::before,
  .dt-showcase *::after,
  .dt-mini *,
  .dt-mini *::before,
  .dt-mini *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* 7. Footer ------------------------------------------------------------------
   The closing call (title, the buy button), then one plain line: copyright
   on the left, the Telegram links on the right. Phone/tablet sizes live in
   mobile.css. */
.dt-footer {
  padding: 140px 40px 0;
}
.dt-footer-cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
.dt-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin-top: 120px;
  padding: 24px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  line-height: 20px;
}
.dt-footer-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
}
.dt-footer-links,
.dt-footer-langs {
  display: flex;
  gap: 28px;
}
/* the header has the language menu from 768px up */
.dt-footer-langs {
  display: none;
}
.dt-footer-langs a[aria-current] {
  color: #fff;
}
.dt-footer-links a,
.dt-footer-langs a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}
@media (hover: hover) {
  .dt-footer-links a:hover,
  .dt-footer-langs a:hover {
    color: #fff;
  }
}


/* 5h. Cookie bar (assets/tracking.js) and the privacy notice -----------------
   Shown only to visitors from the EU/EEA, the UK and Switzerland (and from
   Privacy settings). A compact dark card at the bottom with the header's own
   Channel / Buy now buttons; it never covers the page. The notice is a plain
   text page (privacy/, ru/privacy/, ua/privacy/). */
.dt-cookie {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 10px 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: #171717;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  color: rgba(255, 255, 255, 0.78);
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  transform: translateX(-50%);
}
.dt-cookie[hidden] {
  display: none;
}
.dt-cookie__text {
  margin: 0;
  white-space: nowrap;
}
.dt-cookie__text a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}
.dt-cookie__actions {
  display: flex;
  flex: none;
  gap: 8px;
}
@media (max-width: 767px) {
  .dt-cookie {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: auto;
    max-width: none;
    padding: 14px 12px 12px;
    transform: none;
  }
  .dt-cookie__text {
    flex: 1 1 100%;
    text-align: center;
    white-space: normal;
  }
  .dt-cookie__actions {
    flex: 1 1 100%;
  }
  .dt-cookie__actions .dt-btn {
    flex: 1;
    min-height: 44px;
  }
}

.dt-legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 96px;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
.dt-legal h1 {
  margin: 32px 0 24px;
  color: #fff;
  font-family: 'IBM Plex Sans Condensed', Arial, sans-serif;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.1;
}
.dt-legal p {
  margin: 0 0 18px;
}
.dt-legal a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dt-legal__back {
  font-size: 15px;
}
.dt-legal__settings {
  min-height: 40px;
  margin: 0 0 28px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font: 600 14px/1 'IBM Plex Sans', Arial, sans-serif;
  cursor: pointer;
}