:root {
  /* One night sky under the whole page: the words light, the cards a faint glass over the stars. */
  --background: #050b1a;
  --foreground: #f2f2f5;
  --muted: #a3a8c3;
  --surface: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.1);
  /* The brand: deep sky blue, and its light sky for highlights. */
  --accent: #1e63e9;
  --accent-light: #4fc3f7;
  --accent-foreground: #ffffff;
  --radius: 16px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #00030a;
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.1;
  margin: 16px 0;
}

h2 {
  font-size: 1.75rem;
  margin: 64px 0 24px;
}

h3 {
  font-size: 1.125rem;
  margin: 0 0 8px;
}

p {
  margin: 0;
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 57px);
  overflow: hidden;
  padding: 48px 0 88px;
  /* Under the page's one night sky: only its glow is the hero's own. */
  color: #ffffff;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The portfolio's night sky behind the whole page, standing still while the page goes by. As tall
   as the screen with the browser's bar hidden (lvh), so a phone's bar sliding away while scrolling
   never resizes it. */
.sky {
  position: fixed;
  /* A little past the screen's edges: the field leans after the pointer without showing a gap. */
  top: -24px;
  right: -24px;
  left: -24px;
  height: calc(100vh + 48px);
  height: calc(100lvh + 48px);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.sky canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The glow behind it all: the brand's light sky blue, blurred. */
.hero-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: rgba(79, 195, 247, 0.22);
  filter: blur(120px);
  opacity: 0.6;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.hero .lead {
  color: #c7c9ea;
}

.hero .hero-note {
  color: #a3a6d1;
  /* One line on a computer; on a phone two even ones, never a word left alone on the second. */
  text-wrap: balance;
}

/* The start button with as much room above as below, by the words, not their boxes: 24 px under the
   lead, 25 over the note (its line has 1 px less air than the lead's: 3.5 against 4.5). */
.hero .lead {
  margin-bottom: 24px;
}

.hero .hero-note {
  margin-top: 25px;
}

.hero .badge,
.hero .demo-who {
  background: rgba(255, 255, 255, 0.08);
  color: #c7c9ea;
}

.hero .demo-dots span {
  background: rgba(255, 255, 255, 0.2);
}

.hero .demo-dots span.on {
  background: var(--accent-light);
}

.hero .demo-phone {
  box-shadow:
    0 0 0 calc(1 * var(--u)) #999999,
    0 0 0 calc(2 * var(--u)) #000000,
    0 24px 80px rgba(30, 99, 233, 0.35);
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.875rem;
}

.lead {
  max-width: 640px;
  color: var(--muted);
  font-size: 1.125rem;
  margin-bottom: 32px;
}

/* The text sits in the middle of the button by its letters, not its line: as much room above the
   capitals as below the baseline (text-box trims the font's own spacing where the browser can). */
.button {
  display: inline-block;
  padding: 20px 28px;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #2f86ee);
  color: var(--accent-foreground);
  font-weight: 600;
  text-decoration: none;
}

.button:hover {
  opacity: 0.9;
}

.steps {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: step;
}

.steps li,
.features article,
.plan {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-weight: 700;
}

.steps p,
.features p,
.plan li,
.note,
details p {
  color: var(--muted);
}

.features {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.note {
  margin-bottom: 16px;
}

.plans {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.plan-accent {
  border-color: var(--accent);
}

.price {
  font-size: 1.5rem;
  font-weight: 700;
}

.price-year,
.plan-for {
  color: var(--muted);
  font-size: 0.9375rem;
}

.plan-for {
  margin-bottom: 8px;
}


.plan ul {
  margin: 16px 0 0;
  padding-left: 20px;
}

details {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

summary {
  cursor: pointer;
  font-weight: 600;
}

details p {
  margin-top: 8px;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 32px;
  padding-bottom: 48px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

/* Top bar: brand, language switcher and the start button, always at hand. */
.topbar {
  position: sticky;
  top: 0;
  /* Over everything on the page, the phones' islands (z-index 20) included. */
  z-index: 100;
  background: rgba(0, 3, 10, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: var(--foreground);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  display: block;
  width: 28px;
  height: 28px;
}

.lang {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 0.875rem;
}

/* The header's language menu: the page's language as a chip, every language by its own name on a
   tap (a <details>: it works without the script, which only closes it on a tap elsewhere). */
.lang-menu {
  position: relative;
  font-size: 0.875rem;
}

.lang-menu summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--foreground);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.lang-menu summary::-webkit-details-marker {
  display: none;
}

.lang-menu summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.lang-menu[open] summary::after {
  margin-top: 3px;
  transform: rotate(225deg);
}

.lang-menu .lang {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--background);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.lang-menu .lang a,
.lang-menu .lang span {
  padding: 8px 10px;
  white-space: nowrap;
}

.lang a,
.lang span {
  padding: 4px 6px;
  border-radius: 8px;
}

.lang a {
  color: var(--muted);
  text-decoration: none;
}

.lang a:hover {
  color: var(--foreground);
}

.lang [aria-current] {
  background: var(--surface);
  color: var(--foreground);
  font-weight: 600;
}

.button-small {
  padding: 13px 16px;
  font-size: 0.875rem;
  white-space: nowrap;
}

.hero-note,
.fine {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.875rem;
}

.report {
  max-width: 640px;
  margin: 0;
  padding: 24px;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1.0625rem;
}

.plan-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}

.note a,
details a,
.legal a {
  color: var(--accent);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.footer-links a {
  color: var(--muted);
}

/* Who made it: the studio's name, a link to its site. */
/* «Сделано [D] Dakaio.com»: the team's mark before its name, on the line's own height. */

.footer-credit {
  display: flex;
  align-items: center;
}

.footer-credit a {
  margin-left: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  color: var(--foreground);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-credit img {
  display: block;
  width: 20px;
  height: 20px;
}

.footer-credit a:hover {
  color: var(--accent-light);
}

/*
 * «BelaDay v1.3.0»: the release, written in at deploy (landing.yml), quieter than its line. No box
 * of its own: its text stays one flex item with the words around it and wraps as they do.
 */
.footer-version {
  display: contents;
  font-size: 0.875em;
  font-variant-numeric: tabular-nums;
}

/* Privacy policy and terms. */
.legal {
  max-width: 720px;
  padding-top: 32px;
}

.legal h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  /* «конфиденциальности» is wider than a 320 px phone: it breaks rather than scrolls. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.legal h2 {
  font-size: 1.25rem;
  margin: 40px 0 12px;
}

.legal .meta {
  color: var(--muted);
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: 12px;
}

.legal ul {
  margin: 0;
  padding-left: 20px;
}

.legal li + li {
  margin-top: 6px;
}

/* The hero: the words, and beside them (under them on a phone) the bot at work. */
.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 860px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* The phone: the bot's own messages as Telegram shows them, played by demo.js. */
.demo {
  --chat-bg: #dfe7ef;
  --bubble: #ffffff;
  --bubble-text: #16161a;
  --key: rgba(255, 255, 255, 0.55);
  --key-text: #1f3b57;
  --frame: #16161a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
}

/* The chats as Telegram draws them in its «Dark» theme (Dark Blue): every colour read off Telegram
   Web K — the bar and the bubbles, the keys and plates over the wallpaper, the blue of a sent one. */
.demo {
  --chat-bg: #141f2e;
  --bubble: #1a2b40;
  --bubble-text: #ffffff;
  --out-bubble: #3d6a95;
  --key: rgba(13, 29, 47, 0.4);
  --key-text: #ffffff;
  --key-pressed: rgba(255, 255, 255, 0.18);
  --tg-blue: #0088ff;
  --tg-muted: #d4f1ff;
  --tg-hint: #a2acb4;
  --frame: #2a2a32;
  /* The Mini App's rule for its own screens (not Telegram's chat): anything tappable is blue, never
     grey. On the night theme its words and lines take the light sky, its cards a 15% wash of the
     brand's blue. */
  --brand-ink: #4fc3f7;
  --tap-wash: 15%;
}

.demo-who {
  min-height: 1.5em;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

/* The iPhone 17 Pro, after the owner's Framer mockup: an outer black line and a metal ring (the two
   shadows), the bezel, the screen's black edge, a 402 × 874 view, squircle corners, the Dynamic
   Island and the side keys where Framer puts them. 442 units across in all, shown at 288 px. */
.demo-phone {
  --u: calc(288px / 442);
  --phone-button: 38px;
  /* Room under the last thing on a screen, clear of the rounded bottom edge. */
  --phone-bottom: 10px;
  position: relative;
  width: calc(438 * var(--u));
  max-width: 100%;
  aspect-ratio: 438 / 910;
  height: auto;
  padding: calc(8 * var(--u));
  border-radius: calc(104 * var(--u) * 0.71);
  background: #2c2c2c;
  box-shadow:
    0 0 0 calc(1 * var(--u)) #999999,
    0 0 0 calc(2 * var(--u)) #000000,
    0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Pinned to the body's edges, not `height: 100%`: Safari on iPhone does not take a height made by
   aspect-ratio for a percentage, so the screen grew with its content past the body. */
.phone-screen {
  position: absolute;
  inset: calc(8 * var(--u));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: calc(10 * var(--u)) solid #000000;
  border-radius: calc(96 * var(--u) * 0.71);
  background: var(--chat-bg);
}

/* Where the browser draws squircles, Framer's full radii; elsewhere a smaller round corner looks
   the closest (its own fallback, 0.71). */
@supports (corner-shape: superellipse(1.6)) {
  .demo-phone {
    border-radius: calc(104 * var(--u));
    corner-shape: superellipse(1.6);
  }

  .phone-screen {
    border-radius: calc(96 * var(--u));
    corner-shape: superellipse(1.6);
  }
}

.phone-island {
  position: absolute;
  top: calc(34 * var(--u));
  left: 50%;
  z-index: 20;
  width: calc(124 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 999px;
  background: #000000;
  transform: translateX(-50%);
}

/* The keys sit behind the body, a hair showing. They stay put on hover. */
.phone-key {
  position: absolute;
  z-index: -1;
  width: calc(32 * var(--u));
  border: 1px solid #656565;
  border-radius: 2px;
  background: #2b2b2b;
}

.phone-silent,
.phone-volume-up,
.phone-volume-down {
  left: calc(-6 * var(--u));
}

.phone-silent {
  top: calc(150 * var(--u));
  height: calc(42 * var(--u));
}

.phone-volume-up {
  top: calc(220 * var(--u));
  height: calc(64 * var(--u));
}

.phone-volume-down {
  top: calc(300 * var(--u));
  height: calc(64 * var(--u));
}

.phone-power {
  top: calc(262 * var(--u));
  right: calc(-6 * var(--u));
  height: calc(100 * var(--u));
}

.demo-head {
  display: flex;
  color: var(--foreground);
  align-items: center;
  gap: 10px;
  padding: 38px 14px 10px;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.demo-avatar {
  display: block;
  width: 36px;
  height: 36px;
  flex: none;
}

.demo-head strong {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.demo-head span {
  color: var(--muted);
  font-size: 0.75rem;
}

.demo-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 12px calc(12px + var(--phone-bottom));
  overflow: hidden;
}

.demo-message,
.demo-note,
.demo-typing {
  animation: demo-in 0.3s ease-out both;
}

.demo-bubble {
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--bubble);
  color: var(--bubble-text);
  font-size: 0.875rem;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.demo-keyboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.demo-row {
  display: flex;
  gap: 4px;
}

/* Every button in a phone: one height, one size of text (the keyboard's, the Mini App's, the salon's,
   the report's). */
.demo-button,
.mock-button,
.salon-book,
.demo-phone .stats-button {
  height: var(--phone-button);
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: var(--phone-button);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-button {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--key);
  color: var(--key-text);
  transition:
    transform 0.15s,
    background 0.15s;
}

.demo-button.pressed {
  transform: scale(0.96);
  background: var(--key-pressed);
  color: var(--key-text);
}

.demo-note {
  align-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(22, 22, 26, 0.35);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
}

.demo-typing {
  display: flex;
  gap: 4px;
  align-self: flex-start;
  padding: 12px 14px;
  border-radius: 14px 14px 14px 4px;
  background: var(--bubble);
}

.demo-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: demo-dot 1s infinite;
}

.demo-typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.demo-typing i:nth-child(3) {
  animation-delay: 0.3s;
}

/* The scene's case, in the phone itself: pinned at the top of the screen, under the bot's name,
   the bot's answer coming in at the bottom — read top to bottom, the eye never leaves the phone,
   and the case stays where it is while the messages come. */
.demo-case {
  align-self: center;
  max-width: 92%;
  margin-bottom: auto;
  padding: 10px 14px;
  border: 1px solid rgba(79, 195, 247, 0.3);
  border-radius: 14px;
  background: rgba(5, 11, 26, 0.55);
  color: #dbe6f5;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  animation: demo-in 0.4s ease-out both;
}

.demo-dots {
  display: flex;
  gap: 6px;
}

.demo-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition:
    width 0.2s,
    background 0.2s;
}

.demo-dots span.on {
  width: 18px;
  border-radius: 3px;
  background: var(--accent);
}

@keyframes demo-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes demo-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}

/* «Листайте вниз»: a mouse's wheel, breathing, at the hero's foot. */
.scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  z-index: 1;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  transform: translateX(-50%);
}

.scroll-hint span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: #ffffff;
  transform: translateX(-50%);
  animation: scroll-wheel 1.8s ease-in-out infinite;
}

@keyframes scroll-wheel {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
}

.section {
  padding-top: 32px;
  padding-bottom: 32px;
}

.section h2 {
  margin: 64px 0 56px;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

/* «Как это работает»: three steps, each with its own small phone. */
.steps-phones {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  text-align: center;
}

.steps-phones > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.steps-phones h3::before {
  counter-increment: step;
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 0.875rem;
}

/* The step's own words only: not the messages in its phone. */
.steps-phones > li > p {
  max-width: 300px;
  color: var(--muted);
}

/* The steps are centred; what is on their phones' screens reads from the left, as in Telegram. */
.steps-phones .phone-screen {
  text-align: left;
}

/* «Что умеет бот»: the words and the phone side by side, every other row the other way round. */
.feature-row {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 48px 0;
}

@media (min-width: 860px) {
  .feature-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }

  .feature-row:nth-of-type(even) .feature-text {
    order: 2;
  }
}

.feature-text h3 {
  margin-bottom: 16px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

.feature-text p:last-child {
  color: var(--muted);
  font-size: 1.0625rem;
}

.kicker {
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--accent-light), #a5e4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The phones below the hero: a static scene, played once it comes into view. */
.phone-scene {
  justify-self: center;
}

.demo-in {
  align-self: flex-start;
}

.demo-out {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.demo-out .demo-bubble {
  max-width: 100%;
  border-radius: 14px 14px 4px 14px;
  background: var(--out-bubble);
}

.demo-in .demo-bubble {
  max-width: 100%;
}

.demo-out .demo-keyboard {
  width: 100%;
  max-width: none;
}


/* A link preview in a message, as Telegram's night theme draws one: a darker plate under the bubble's
   blue, a light-blue bar, the title in light blue, the line under it light. */
.demo-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent-light);
  border-radius: 8px;
  background: rgba(5, 11, 26, 0.45);
  text-align: left;
}

.demo-card img {
  flex: none;
}

.demo-card b,
.demo-card small {
  display: block;
  line-height: 1.25;
}

.demo-card b {
  color: #7fd3fa;
}

.demo-card small {
  color: #dbe6f5;
}

.demo-avatar-photo {
  border-radius: 50%;
  object-fit: cover;
}

/* Telegram's own chat around the messages, as in the promo video: the Dark Blue wallpaper (its
   four-colour gradient, tg/wall.png, and the doodles over it in soft light), the floating bar with
   the back arrow and the menu, bubbles with their tail, the keys and plates in the wallpaper's tint,
   and the input row: the bot's menu button, the field, the mic (icons: Telegram Web's, tg/icons/). */
.phone-screen:has(> .demo-head) {
  background: var(--chat-bg) url('tg/wall.png') center / cover;
}

.phone-screen:has(> .demo-head)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('tg/pattern.webp') center / cover;
  mix-blend-mode: soft-light;
  opacity: 0.38;
  pointer-events: none;
}

.phone-screen:has(> .demo-head) > * {
  position: relative;
}

.phone-screen > .demo-head {
  margin: 36px 6px 0;
  padding: 3px 10px 3px 6px;
  gap: 8px;
  border: 0;
  border-radius: 22px;
  background: var(--bubble);
  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.21);
}

.demo-head::before,
.demo-head::after {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: url('tg/icons/back.svg') center / contain no-repeat;
}

.demo-head::after {
  margin-left: auto;
  mask-image: url('tg/icons/more.svg');
}

.demo-head .demo-avatar {
  width: 32px;
  height: 32px;
}

.demo-head span {
  color: var(--tg-muted);
}

.phone-screen:has(> .demo-head) > .demo-chat {
  gap: 6px;
  padding: 10px 8px 8px;
}

.demo-message:not(.demo-out) {
  align-self: flex-start;
  max-width: calc(100% - 24px);
}

.demo-message:not(.demo-out):has(.demo-keyboard) {
  width: calc(100% - 24px);
}

.demo-bubble,
.demo-typing {
  position: relative;
  margin-left: 7px;
  padding: 7px 10px 8px;
  border-radius: 13px 13px 13px 0;
  box-shadow: 0 1px 2px rgba(16, 35, 47, 0.15);
}

.demo-bubble::before,
.demo-typing::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -7px;
  width: 8px;
  height: 15px;
  background: inherit;
  mask: url('tg/icons/tail.svg') right bottom / 100% 100% no-repeat;
}

.demo-message:has(.demo-keyboard) .demo-bubble {
  border-bottom-right-radius: 4px;
}

.demo-out .demo-bubble {
  margin: 0 7px 0 0;
  border-radius: 13px 13px 0 13px;
}

.demo-out .demo-bubble::before {
  left: auto;
  right: -7px;
  transform: scaleX(-1);
}

.demo-keyboard {
  gap: 2px;
  margin: 2px 0 0 7px;
}

.demo-row {
  gap: 2px;
}

.demo-button {
  border-radius: 6px;
  font-weight: 500;
}

.demo-row:last-child .demo-button:first-child {
  border-bottom-left-radius: 16px;
}

.demo-row:last-child .demo-button:last-child {
  border-bottom-right-radius: 16px;
}

.demo-note {
  background: var(--key);
  border-radius: 12px;
  font-weight: 500;
}

.demo-input {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 38px;
  margin: 0 6px calc(6px + var(--phone-bottom));
  padding: 0 3px;
  border-radius: 19px;
  background: var(--bubble);
  box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.12);
  color: var(--bubble-text);
  font-size: 0.8125rem;
}

.demo-open {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 8px 0 6px;
  border-radius: 16px;
  background: var(--tg-blue);
  font-size: 0.75rem;
  font-weight: 500;
}

.demo-open::before,
.demo-icon,
.demo-mic::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url('tg/icons/app.svg') center / contain no-repeat;
}

.demo-icon {
  width: 19px;
  height: 19px;
  margin: 0 3px;
}

.demo-attach {
  mask-image: url('tg/icons/attach.svg');
}

.demo-smile {
  mask-image: url('tg/icons/smile.svg');
}

.demo-hint {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--tg-hint);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-mic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  border-radius: 16px;
  background: var(--tg-blue);
}

.demo-mic::before {
  width: 18px;
  height: 18px;
  mask-image: url('tg/icons/mic.svg');
}

.who-face {
  width: 20px;
  height: 20px;
  margin: -2px 6px 0 -6px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.demo-avatar-letter {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #ffffff;
  font-weight: 700;
}

/* A screen of the Mini App: the master's page with services. */
.mock-app {
  padding: 40px 12px calc(14px + var(--phone-bottom));
  background: var(--background);
  color: var(--foreground);
  text-align: left;
}

.mock-top b {
  display: block;
  font-size: 1.375rem;
}

.mock-top small {
  display: block;
  color: var(--muted);
}

.mock-top span {
  display: block;
  margin-top: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.mock-app ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.mock-app li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in oklab, var(--brand-ink) 35%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) var(--tap-wash), var(--background));
  font-size: 0.8125rem;
}

/* The service's checkbox, as in the Mini App: a blue outline, filled blue with a tick once chosen. */
.mock-app li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid color-mix(in oklab, var(--brand-ink) 60%, transparent);
  border-radius: 4px;
}

.mock-app li > span {
  flex: 1;
  min-width: 0;
}

/* The chosen one: the brand's blue line and the same 15% of it inside. */
.mock-app li:first-child {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 15%, var(--background));
}

.mock-app li:first-child::before {
  border-color: var(--accent);
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E")
    center / 10px no-repeat;
}

.mock-app li b,
.mock-app li small {
  display: block;
}

.mock-app li small {
  color: var(--muted);
}

.mock-app li em {
  flex: none;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.mock-button {
  flex: none;
  margin-top: auto;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-foreground);
}

/* «А ещё»: the smaller features as tiles. */
.more-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.more-grid article {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.more-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(30, 99, 233, 0.12);
}

.more-grid p {
  color: var(--muted);
}

/* Line icons (Lucide's, inline) in white on the brand's blue tile, lit from above; on hover the
   icon tips a little. */
.more-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1e63e9, #4fc3f7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px rgba(30, 99, 233, 0.35);
  color: #ffffff;
}

.more-icon svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.more-grid article:hover .more-icon svg {
  transform: rotate(-8deg) scale(1.1);
}

/* The pain points and the plans, a little livelier. */
#pain .features article,
.plan {
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

#pain .features article:hover,
.plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(30, 99, 233, 0.12);
}

.plan-accent {
  border: 2px solid transparent;
  background:
    linear-gradient(#0a0f1d, #0a0f1d) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-light)) border-box;
}

/* The last call: a glow over the page's night sky. */
.cta {
  margin-top: 64px;
  padding: 72px 0;
  background: radial-gradient(55% 60% at 50% 50%, rgba(79, 195, 247, 0.16), transparent 70%);
  color: #ffffff;
  text-align: center;
}

.cta h2 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.cta p {
  margin-bottom: 28px;
  color: #c7c9ea;
}

.cta + .footer,
main + .footer {
  margin-top: 0;
}

/* Reveal on scroll (landing.js marks what came into view); the phones play their messages. */
.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
}

.js .reveal.seen {
  opacity: 1;
  transform: none;
}

.js .phone-scene .demo-chat > *,
.js .phone-scene .mock-app li,
.js .phone-scene .mock-button {
  animation: none;
  opacity: 0;
}

.js .phone-scene.play .demo-chat > *,
.js .phone-scene.play .mock-app li,
.js .phone-scene.play .mock-button {
  opacity: 1;
  animation: demo-in 0.45s ease-out both;
  animation-delay: calc(var(--i, 0) * 0.9s + 0.3s);
}

.js .phone-scene.play [data-tap] {
  animation: demo-tap 0.3s ease-out both;
  animation-delay: calc(var(--t, 1) * 0.9s + 0.1s);
}

@keyframes demo-tap {
  from {
    background: var(--key);
    color: var(--key-text);
  }
  50% {
    transform: scale(0.95);
  }
  to {
    background: var(--key-pressed);
    color: var(--key-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .phone-scene .demo-chat > *,
  .js .phone-scene .mock-app li,
  .js .phone-scene .mock-button {
    opacity: 1;
    animation: none;
  }

  .scroll-hint span {
    animation: none;
  }
}

/* A short screen: less room round the hero instead of a smaller phone, so every phone on the page,
   and every button in one, is the same size. */
@media (max-height: 860px) and (min-width: 860px) {
  .hero {
    padding: 16px 0 40px;
  }
}

/* The Mini App's real screens in a phone, one after another: under the Dynamic Island as under the
   status bar, the whole width of the screen. The shots are taken at the proportions of the room
   left (340 × 683 CSS pixels at 2x, 680 × 1366), so they fill it; held to its bottom, where the
   button is, should a phone draw it a pixel shorter. */
.phone-slides {
  padding-top: 34px;
  background: #17212b;
}

.phone-slide {
  position: absolute;
  inset: 34px 0 var(--phone-bottom);
  width: 100%;
  height: calc(100% - 34px - var(--phone-bottom));
  object-fit: cover;
  object-position: center bottom;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.phone-slide.on {
  opacity: 1;
}

/* «Горящие окна»: a radar in the brand's blue, the bot looking for someone to take the time. */
.radar-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.radar-wrap p {
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 600;
}

.radar {
  position: relative;
  flex: none;
  width: 140px;
  height: 140px;
  overflow: hidden;
  border: 1px solid rgba(30, 99, 233, 0.35);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.12), rgba(30, 99, 233, 0.04) 70%);
  box-shadow: 0 16px 40px rgba(30, 99, 233, 0.2);
}

.radar::before,
.radar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(30, 99, 233, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.radar::before {
  width: 76%;
  height: 76%;
}

.radar::after {
  width: 36%;
  height: 36%;
}

.radar-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 100%;
  border-top: 1px dashed var(--accent);
  transform-origin: top left;
  animation: radar-turn 2.4s linear infinite;
}

.radar-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-light);
  transform: rotate(-55deg);
  transform-origin: top left;
  filter: blur(24px);
  opacity: 0.55;
}

/* What the radar finds: the clients' faces, lighting up as the sweep passes. */
.radar img {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 26px;
  height: 26px;
  border: 2px solid var(--accent-light);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 12px rgba(79, 195, 247, 0.7);
  transform: translate(-50%, -50%);
  animation: radar-blip 2.4s ease-out infinite;
  animation-delay: var(--d);
}

@keyframes radar-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes radar-blip {
  0%,
  100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.85);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* «Бот спас»: the month's card (after the «Monthly Balance» card) in the brand's colours, like the
   Pro plan: a deep-blue wash over the night, a light-blue edge and glow. */
.stats-card {
  position: relative;
  justify-self: center;
  width: min(340px, 100%);
  overflow: hidden;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(79, 195, 247, 0.35);
  background: linear-gradient(160deg, rgba(30, 99, 233, 0.3), rgba(10, 15, 29, 0.95) 55%), #0a0f1d;
  color: var(--foreground);
  box-shadow: 0 0 40px rgba(30, 99, 233, 0.25);
}

.stats-glow {
  position: absolute;
  top: -50%;
  left: 50%;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  background: rgba(79, 195, 247, 0.18);
  filter: blur(48px);
  transform: translateX(-50%);
  transition: background 0.7s;
}

.stats-card:hover .stats-glow {
  background: rgba(79, 195, 247, 0.28);
}

.stats-card > *:not(.stats-glow) {
  position: relative;
}

.stats-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(79, 195, 247, 0.16);
}

.stats-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(30, 99, 233, 0.35);
}

.stats-icon svg {
  width: 20px;
  height: 20px;
}

.stats-title {
  color: var(--foreground);
  font-weight: 600;
}

.stats-sub,
.stats-label {
  color: var(--muted);
  font-size: 0.75rem;
}

.stats-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0;
}

.stats-metrics > div + div {
  padding-left: 20px;
  border-left: 1px solid rgba(79, 195, 247, 0.16);
}

.stats-value {
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 600;
  /* A sum stays on one line: «+Rp 900 rb» never leaves «rb» below. */
  white-space: nowrap;
}

.stats-note {
  margin-top: 2px;
  color: var(--accent-light);
  font-size: 0.75rem;
  font-weight: 500;
}

.stats-chart {
  position: relative;
  height: 96px;
}

.stats-chart svg {
  width: 100%;
  height: 100%;
}

.js .stats-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

.js .seen .stats-line {
  animation: stats-draw 1.6s ease-out 0.3s forwards;
}

.stats-dot {
  position: absolute;
  top: 16%;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 14px rgba(79, 195, 247, 0.7);
  transform: translate(50%, -50%);
  animation: stats-pulse 1.8s ease-in-out infinite;
}

@keyframes stats-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes stats-pulse {
  50% {
    box-shadow: 0 0 0 8px rgba(79, 195, 247, 0.15), 0 0 14px rgba(79, 195, 247, 0.7);
  }
}

.stats-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(79, 195, 247, 0.16);
  color: var(--muted);
  font-size: 0.875rem;
}

/* The sum, in the brand's light blue: what the card is about. */
.stats-total b {
  background: linear-gradient(90deg, var(--accent-light), #a5e4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.5rem;
}

.stats-button {
  display: block;
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #2f86ee);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(30, 99, 233, 0.35);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.3s,
    color 0.3s;
}

.stats-button:hover {
  background: linear-gradient(135deg, #2a6ff0, var(--accent-light));
}

/* ИИ: the orb (the owner's loader, in the brand's blues), the list of what works and what is next. */
.ai-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 860px) {
  .ai-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
}

.ai-text h2 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  text-align: left;
}

.ai-lead {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 1.0625rem;
}

.ai-list-title {
  margin-top: 16px;
  font-weight: 700;
}

.ai-list {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.ai-list li + li {
  margin-top: 6px;
}

.soon {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(30, 99, 233, 0.12);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

/* In the uppercase gradient kicker the pill stays as everywhere else. */
.kicker .soon {
  letter-spacing: normal;
  text-transform: none;
}

/* Business: a band of its own, the salon's profile in a phone beside the list. */
.business {
  margin-top: 64px;
  padding: 72px 0;
  background:
    radial-gradient(70% 90% at 10% 50%, rgba(79, 195, 247, 0.16), transparent 70%),
    linear-gradient(180deg, transparent, rgba(30, 99, 233, 0.06) 50%, transparent);
}

.business-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 860px) {
  .business-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
}

.business-text h2 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.business-text > p {
  color: var(--muted);
  font-size: 1.0625rem;
}

.business-list {
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.business-list li {
  position: relative;
  padding-left: 28px;
}

.business-list li + li {
  margin-top: 10px;
}

.business-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
}

.business-price {
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 700;
}

.business-price small {
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

.salon {
  background: var(--background);
  color: var(--foreground);
}

.salon-cover {
  display: grid;
  place-items: end start;
  height: 118px;
  padding: 0 14px;
  /* The salon's own photo (Unsplash), darkened a little at the bottom under the logo. */
  background:
    linear-gradient(180deg, rgba(5, 11, 26, 0) 45%, rgba(5, 11, 26, 0.55)),
    url('salon/cover.webp') center / cover,
    #1e63e9;
}

.salon-cover img {
  margin-bottom: -26px;
  border: 3px solid var(--background);
  border-radius: 50%;
  background: #ffffff;
}

.salon-body {
  padding: 32px 14px 0;
  overflow: hidden;
}

.salon-name {
  display: block;
  font-size: 1.125rem;
}

.salon-body small,
.salon-line,
.salon-about {
  color: var(--muted);
  font-size: 0.75rem;
}

.salon-line {
  margin-top: 4px;
}

.salon-site {
  color: var(--brand-ink);
}

.salon-about {
  margin-top: 8px;
}

.salon-section {
  margin: 12px 0 6px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.salon-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

/* The works: real photos (Unsplash), square. */
.salon-tiles img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface);
}

.salon-book {
  position: absolute;
  right: 14px;
  bottom: calc(14px + var(--phone-bottom));
  left: 14px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--accent);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .radar-sweep,
  .radar img,
  .stats-dot {
    animation: none !important;
  }

  .js .stats-line {
    stroke-dashoffset: 0;
  }
}

/* The start buttons: the owner's «send» button — the plane flies off and the words slide away on
   hover — in the brand's blue. */
.button-send {
  display: inline-flex;
  align-items: center;
  padding: 0.7em 1.1em 0.7em 0.9em;
  border-radius: 16px;
  font-size: 1.125rem;
  line-height: 1;
  text-box: none;
  overflow: hidden;
  transition: transform 0.2s;
}

.button-send.button-small {
  padding: 0.55em 0.9em 0.55em 0.7em;
  border-radius: 12px;
  font-size: 0.875rem;
}

.button-send .send-text {
  display: block;
  margin-left: 0.4em;
  transition: transform 0.3s ease-in-out;
}

.button-send svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

.button-send:hover {
  opacity: 1;
}

.button-send:hover .send-wrap {
  display: block;
  animation: send-fly 0.6s ease-in-out infinite alternate;
}

/* To the middle of the button (landing.js measures how far), whatever the words' length. */
.button-send:hover svg {
  transform: translateX(var(--to-middle, 1.2em)) rotate(45deg) scale(1.1);
}

/* Out of the button whatever its length: the original's 5em was for one short word. */
.button-send:hover .send-text {
  transform: translateX(calc(100% + 2em));
}

.button-send:active {
  transform: scale(0.95);
}

@keyframes send-fly {
  from {
    transform: translateY(0.1em);
  }
  to {
    transform: translateY(-0.1em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-send:hover .send-wrap {
    animation: none;
  }
}

/* «Знакомо?»: the owner's glowing card, in the brand's blues. A gradient edge around a dark card,
   its glow brighter on hover. */
.glow-cards article {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(137deg, var(--accent) 0%, var(--accent-light) 100%);
  filter: drop-shadow(0 0 24px rgba(79, 195, 247, 0.35));
  transition: filter 0.3s ease;
}

.glow-cards article::after {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 28px;
  background: #0a0f1d;
  transition: inset 0.3s ease;
}

.glow-cards article:hover {
  filter: drop-shadow(0 0 30px rgba(79, 195, 247, 0.9));
}

.glow-cards article:hover::after {
  inset: 3px;
}

.glow-cards h3 {
  color: var(--accent-light);
}

/* The plans in the owner's SaaS pricing style, in the brand's blues: a «monthly / yearly» switch,
   three dark glass cards with a big price, ticks and a button each; Pro raised, its badge on top. */
.period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 40px;
}

/* Without the script both prices stay in view, so the switch has nothing to do. */
html:not(.js) .period {
  display: none;
}

.period-label {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s;
}

.period-label.on {
  color: var(--foreground);
}

.period-switch {
  position: relative;
  width: 52px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.3s;
}

.period-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.3s ease;
}

.period-switch[aria-checked='true'] {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
}

.period-switch[aria-checked='true'] span {
  transform: translateX(24px);
}

.period-save {
  padding: 3px 10px;
  border: 1px solid rgba(79, 195, 247, 0.35);
  border-radius: 999px;
  background: rgba(79, 195, 247, 0.12);
  color: var(--accent-light);
  font-size: 0.8125rem;
  font-weight: 600;
}

.plans {
  align-items: stretch;
  gap: 24px;
}

/* Pro is the plan for most: its column a little wider than the free one's and Business's. */
@media (min-width: 900px) {
  .plans:has(> .plan-accent:nth-child(2)):has(> :nth-child(3):last-child) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.plan,
.plan-accent {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background: rgba(10, 15, 29, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.plan-accent {
  border: 1px solid rgba(79, 195, 247, 0.45);
  background: linear-gradient(180deg, rgba(30, 99, 233, 0.22), rgba(10, 15, 29, 0.85) 60%);
  box-shadow: 0 0 40px rgba(30, 99, 233, 0.25);
}

@media (min-width: 860px) {
  .plan-accent {
    transform: translateY(-16px);
  }

  .plan-accent:hover {
    transform: translateY(-20px);
  }
}

.plan h3 {
  font-size: 1.375rem;
}

.plan-for {
  min-height: 3em;
  margin-bottom: 0;
}

.plan .plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  padding: 4px 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.price {
  margin: 20px 0 4px;
  font-size: 1rem;
  font-weight: 400;
}

.price b {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.price small {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* «Пока идёт бета, всё бесплатно» and its badges ([data-beta]): with the script hidden until the
   API answers that plans are not enforced yet (landing.js adds .beta-on), so no free promise is
   left once they are switched on or the API is silent. Without the script, shown as written. */
.js:not(.beta-on) [data-beta] {
  display: none;
}

.js .plans:not(.yearly) .per-year,
.js .plans.yearly .per-month {
  display: none;
}

/* A discount from the API (landing.js): the full price struck through by the new one, and
   «−30 % до 1 ноября» in the light sky's pill, as «2 месяца в подарок» above the plans. */
.stars-full {
  color: var(--muted);
  font-weight: 500;
  text-decoration-thickness: 2px;
}

/* In a plan's card the full price goes on its own line above the big one, the label under it:
   side by side they would not fit a card's width. */
.price .stars-full {
  display: block;
  margin-bottom: 6px;
  font-size: 1.25rem;
  line-height: 1;
}

.price .deal {
  display: table;
  margin-top: 10px;
}

.deal {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(79, 195, 247, 0.35);
  border-radius: 999px;
  background: rgba(79, 195, 247, 0.12);
  color: var(--accent-light);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

.plan ul {
  flex: 1;
  margin: 20px 0 28px;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
}

.plan li {
  position: relative;
  padding-left: 28px;
}

.plan li + li {
  margin-top: 10px;
}

.plan li::before {
  content: '';
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--accent-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan-cta {
  display: block;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--foreground);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.plan-cta:hover {
  border-color: rgba(79, 195, 247, 0.5);
  background: rgba(79, 195, 247, 0.12);
}

.plan-cta-main {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), #2f86ee);
  color: var(--accent-foreground);
  box-shadow: 0 10px 30px rgba(30, 99, 233, 0.35);
}

.plan-cta-main:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #2a6ff0, var(--accent-light));
}

/* «Бот спас» in a phone: the Mini App's stats screen, the card across it. */
.stats-screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 44px 12px calc(12px + var(--phone-bottom));
  background: var(--background);
  color: var(--foreground);
  text-align: left;
}

.stats-screen-top b {
  display: block;
  font-size: 1.375rem;
  line-height: 1.2;
}

.stats-screen-top small {
  color: var(--muted);
  font-size: 0.8125rem;
}

.stats-screen .stats-card {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  box-shadow: none;
}

/* Short of room – a longer language, a phone's wider letters – only the chart gives way: the sum
   and the button stay on the screen. */
.stats-screen .stats-card > * {
  flex-shrink: 0;
}

.stats-screen .stats-head {
  padding-bottom: 14px;
}

.stats-screen .stats-metrics {
  margin: 14px 0;
}

.stats-screen .stats-metrics > div + div {
  padding-left: 12px;
}

.stats-screen .stats-value {
  font-size: 1.125rem;
}

/* Two lines for every label in the phone's narrow columns: the sums stand on one line. */
.stats-screen .stats-label {
  min-height: 2.5em;
  line-height: 1.25;
}

.stats-screen .stats-chart {
  flex: 0 1 80px;
  height: auto;
  min-height: 32px;
}

.stats-screen .stats-button {
  margin-top: 14px;
  padding: 0 12px;
}

.stats-screen .stats-total {
  gap: 8px;
}

/* «≈ 455 €» on one line, next to the words, which wrap instead. */
.stats-screen .stats-total b {
  flex-shrink: 0;
  font-size: 1.25rem;
  white-space: nowrap;
}

/* The salon's «бот спас» (business.html): each master's share under the two sums, where the
   master's card has its chart. */
.stats-screen .stats-by {
  min-height: 0;
  margin-bottom: 8px;
}

.stats-masters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

.stats-masters li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-masters img {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.stats-masters b {
  margin-left: auto;
  color: var(--accent-light);
  font-weight: 600;
  white-space: nowrap;
}

/* A feature with a checklist under its words: the words muted, as a last paragraph's are. */
.feature-text > p:has(+ .business-list) {
  color: var(--muted);
  font-size: 1.0625rem;
}

.feature-text .business-list {
  margin-bottom: 0;
}

/* The AI assistant in a phone: its orb on top, then the chat. */
.ai-screen {
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
}

.ai-screen-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 38px 12px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
}

.ai-screen-top small {
  color: var(--muted);
  font-size: 0.75rem;
}

/* A voice message, as Telegram draws one: play, the wave, its length, the words under it. */
.demo-voice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-width: 210px;
}

.voice-play {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
}

.voice-play::before {
  content: '';
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #ffffff;
}

.voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}

.voice-wave i {
  flex: 1;
  height: calc(var(--h) * 1%);
  min-height: 3px;
  border-radius: 2px;
  background: var(--accent-light);
}

.js .phone-scene.play .voice-wave i {
  animation: voice-wave 1.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--h) * -12ms);
}

.voice-time {
  color: var(--muted);
  font-size: 0.75rem;
}

.voice-text {
  grid-column: 1 / -1;
  color: var(--bubble-text);
  font-size: 0.8125rem;
  font-style: italic;
  opacity: 0.85;
}

@keyframes voice-wave {
  to {
    transform: scaleY(0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .phone-scene.play .voice-wave i {
    animation: none;
  }
}

/* «Вопросы и ответы»: glass cards; the round plus turns into a cross and fills with the brand's blue,
   the open card is lit with a light-blue edge, the answer slides open (landing.js). */
.faq details {
  margin-bottom: 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.3s,
    background 0.3s;
}

.faq details:hover {
  border-color: rgba(79, 195, 247, 0.25);
}

.faq details[open] {
  border-color: rgba(79, 195, 247, 0.45);
  background: rgba(30, 99, 233, 0.12);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  list-style: none;
  font-size: 1.0625rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--accent-light);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    rgba(79, 195, 247, 0.12);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.3s,
    color 0.3s;
}

.faq details[open] summary::after {
  color: #ffffff;
  background-color: var(--accent);
  transform: rotate(45deg);
}

/* Closing: the card and its cross go back at once, while the height follows. */
.faq details.faq-closing {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.faq details.faq-closing summary::after {
  color: var(--accent-light);
  background-color: rgba(79, 195, 247, 0.12);
  transform: none;
}

.faq summary:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: -2px;
  border-radius: 16px;
}

.faq details p {
  margin: 0;
  padding: 0 20px 18px;
}

.faq details[open] p {
  animation: faq-in 0.35s ease both;
}

@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after {
    transition: none;
  }

  .faq details[open] p {
    animation: none;
  }
}

/* The hero's two actions: the start button and «Как это работает», the video, side by side; on a
   narrow screen the video's link goes under the button. One row, so the room above and below stays. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.watch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 6px;
  border: 1px solid rgba(79, 195, 247, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--foreground);
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.watch small {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.watch:hover {
  border-color: rgba(79, 195, 247, 0.6);
  background: rgba(79, 195, 247, 0.08);
}

/* A round play key in the brand's blues, breathing a little so the eye finds it. */
.watch-play {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 6px 16px rgba(30, 99, 233, 0.4);
  animation: watch-pulse 2.4s ease-in-out infinite;
}

.watch-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #ffffff;
  transform: translate(-50%, -50%);
}

@keyframes watch-pulse {
  50% {
    box-shadow:
      0 0 0 7px rgba(79, 195, 247, 0.14),
      0 6px 16px rgba(30, 99, 233, 0.4);
  }
}

/* The video over the page: a dark glass frame with the light-blue edge, the night dimmed behind;
   Esc, the cross or a click beside it closes it. */
.video-modal {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(79, 195, 247, 0.35);
  border-radius: 20px;
  background: #050b1a;
  box-shadow: 0 0 60px rgba(30, 99, 233, 0.35);
}

.video-modal::backdrop {
  background: rgba(0, 3, 10, 0.82);
  backdrop-filter: blur(6px);
}

.video-modal[open] {
  animation: video-in 0.3s ease-out both;
}

.video-modal[open]::backdrop {
  animation: video-fade 0.3s ease-out both;
}

.video-modal video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 19px;
  background: #050b1a;
}

.video-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.video-close::before,
.video-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: #ffffff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.video-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.video-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

@keyframes video-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes video-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .watch-play,
  .video-modal[open],
  .video-modal[open]::backdrop {
    animation: none;
  }
}

/* The header's pages: «Для бизнеса» beside the languages. A phone's bar has no room for it, so
   there it stands in a strip of its own under the bar and goes away with the page as it scrolls. */
.menu {
  display: flex;
  font-size: 0.875rem;
}

.menu a {
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.menu a:hover {
  color: var(--foreground);
}

.menu a[aria-current] {
  background: var(--surface);
  color: var(--foreground);
}

.subnav {
  display: none;
}

@media (max-width: 639px) {
  .topbar .menu {
    display: none;
  }

  .subnav {
    display: block;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 3, 10, 0.45);
  }

  .subnav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
  }

  .subnav a[aria-current] {
    color: var(--accent-light);
  }

  .subnav svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--accent-light);
  }

  .subnav svg:last-child {
    margin-left: auto;
    color: var(--muted);
  }
}

/* A second action beside the start button: a glass pill with the light-blue edge, as «Как это
   работает». */
.button-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border: 1px solid rgba(79, 195, 247, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--foreground);
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.button-ghost:hover {
  border-color: rgba(79, 195, 247, 0.6);
  background: rgba(79, 195, 247, 0.08);
}

/* The salon's calendar in a phone: a column for each master with the day's bookings, a break, the
   free time and the line of «now»; they come in one by one once the phone is seen. The day runs
   10:00–19:00: a booking's place is its hour from 10 (--at) and its length in hours (--len). */
.cal-screen {
  padding: 40px 10px calc(12px + var(--phone-bottom));
  background: var(--background);
  color: var(--foreground);
  text-align: left;
}

.cal-top b {
  display: block;
  font-size: 1.375rem;
  line-height: 1.2;
}

.cal-top small {
  color: var(--muted);
  font-size: 0.8125rem;
}

.cal-masters,
.cal-grid {
  display: grid;
  grid-template-columns: 24px repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.cal-masters {
  margin: 12px 0 8px;
}

.cal-masters span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.cal-masters img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.cal-grid {
  flex: 1;
  min-height: 0;
  margin-bottom: 10px;
}

.cal-hours {
  display: grid;
  grid-template-rows: repeat(9, 1fr);
  color: var(--muted);
  font-size: 0.625rem;
  line-height: 1;
}

.cal-col {
  position: relative;
  border-radius: 8px;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px calc(100% / 9)),
    rgba(255, 255, 255, 0.02);
}

.cal-item,
.cal-break,
.cal-free {
  position: absolute;
  top: calc(var(--at) / 9 * 100% + 1px);
  right: 2px;
  left: 2px;
  height: calc(var(--len) / 9 * 100% - 2px);
  overflow: hidden;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: 0.625rem;
  font-style: normal;
  line-height: 1.25;
}

.cal-item {
  border-left: 3px solid var(--accent-light);
  background: color-mix(in oklab, var(--accent) 38%, var(--background));
  color: #dbe6f5;
}

.cal-item b {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-break {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 4px, transparent 4px 8px);
  color: var(--muted);
}

.cal-free {
  border: 1px dashed color-mix(in oklab, var(--brand-ink) 70%, transparent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--brand-ink);
  font-weight: 600;
}

.cal-now {
  position: absolute;
  top: calc(var(--at) / 9 * 100%);
  right: 0;
  left: 0;
  z-index: 1;
  height: 2px;
  background: #ff5a5f;
}

.cal-now::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a5f;
}

/* The dot of «now» once, on the first master's column: the line goes on through the others. */
.cal-col + .cal-col .cal-now::before {
  content: none;
}

.js .phone-scene :is(.cal-item, .cal-break, .cal-free, .cal-now) {
  opacity: 0;
}

.js .phone-scene.play :is(.cal-item, .cal-break, .cal-free, .cal-now) {
  opacity: 1;
  animation: demo-in 0.45s ease-out both;
  animation-delay: calc(var(--i, 0) * 0.2s + 0.3s);
}

@media (prefers-reduced-motion: reduce) {
  .js .phone-scene :is(.cal-item, .cal-break, .cal-free, .cal-now) {
    opacity: 1;
    animation: none;
  }
}

/* Screens of the Mini App that are lists, not a choice: no checkbox, nothing picked. */
.mock-plain li::before {
  content: none;
}

.mock-plain li:first-child {
  border-color: color-mix(in oklab, var(--brand-ink) 35%, transparent);
}

.mock-app li time {
  flex: none;
  width: 38px;
  color: var(--brand-ink);
  font-weight: 700;
}

.mock-app li.mock-free {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
}

.mock-emoji {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
}

/* The emoji's circle keeps its size: `.mock-app li > span` stretches the text beside it. */
.mock-app li > .mock-emoji {
  flex: none;
}

.mock-face {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.mock-faces {
  display: flex;
  flex: none;
}

.mock-faces img {
  width: 22px;
  height: 22px;
  border: 2px solid var(--background);
  border-radius: 50%;
  object-fit: cover;
}

.mock-faces img + img {
  margin-left: -9px;
}

/* «Вы в календаре Ани · Выйти»: the plate over a master's screens opened by the salon's admin. */
.as-master {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 32%, var(--background));
  font-size: 0.75rem;
  font-weight: 600;
}

.as-master img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.as-master span {
  margin-left: auto;
  color: var(--brand-ink);
}

/* The business page: the two salon modes as two cards, the plans as two. */
.modes,
.plans-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.modes .plan ul {
  margin-bottom: 0;
}

.plan.mode-default {
  border-color: rgba(79, 195, 247, 0.45);
}

.price b.price-word {
  font-size: 2.25rem;
}

.fine-center {
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center;
}

/* Enterprise under the plans: one wide card, the button beside the words (under them on a phone). */
.enterprise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 24px;
  padding: 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background: rgba(10, 15, 29, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.enterprise > div {
  flex: 1 1 260px;
}

.enterprise h3 {
  font-size: 1.375rem;
}

.enterprise p {
  color: var(--muted);
}

.enterprise .plan-cta {
  flex: none;
}

@media (max-width: 559px) {
  .enterprise .plan-cta {
    width: 100%;
  }
}

.business-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}