/* Glavbook marketing landing — prototype.
   Colors mirror resources/styles/glavbook-theme.scss so the site and the app
   read as one product; layout rhythm follows the Ramp / Attio reference. */
:root {
  --bg-canvas: #EEF0F4;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F4F6F9;
  --bg-surface-3: #EEF1F5;
  --bg-sidebar: #12151B;
  --border-subtle: #EFF1F5;
  --border: #E4E7EC;
  --border-strong: #C9D0DA;
  --text-primary: #171A20;
  --text-secondary: #5B6472;
  --text-muted: #8A909B;
  --text-faint: #A2A8B3;
  --brand: #12A17A;
  --brand-hover: #0C7A5C;
  --brand-soft: #E6F5F0;
  --brand-ring: rgba(18, 161, 122, .18);
  --mark-yellow: #EFC03A;
  --mark-orange: #E1922B;
  --st-ok-bg: #D7F0E7;   --st-ok-stripe: #12A17A;   --st-ok-fg: #0B4A39;
  --st-warn-bg: #FBEDD5; --st-warn-stripe: #D98E1F; --st-warn-fg: #5A3B08;
  --st-info-bg: #DCE9F9; --st-info-stripe: #2E7FD1; --st-info-fg: #123A62;
  --st-block-bg: #E7EAEF; --st-block-stripe: #8A909B; --st-block-fg: #3A414C;
  --shadow-overlay: 0 18px 44px rgba(15, 23, 42, .16);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .10);

  --gutter: 64px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: 400 16px/1.5 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

section[id], .dcard[id] { scroll-margin-top: 88px; }
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn--ghost { color: var(--text-primary); }
.btn--ghost:hover { background: var(--bg-surface-2); }
.btn--dark { background: var(--text-primary); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--lg { height: 48px; font-size: 16px; width: 100%; }

/* ---------- Announcement ---------- */
.announce {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 48px; background: var(--bg-sidebar); color: #E8EBF0;
  font-size: 14px;
}
.announce__inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.announce__tag { padding: 2px 8px; border-radius: 6px; background: rgba(18, 161, 122, .22); color: #6FD9B5; font-size: 12px; font-weight: 600; }
.announce__text { color: #C9CED6; }
.announce__link { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.announce__link:hover { text-decoration-color: #fff; }
.announce__close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: #98A0AE; cursor: pointer;
}
.announce__close:hover { background: rgba(255,255,255,.08); color: #fff; }
.announce__close .ic { width: 16px; height: 16px; }
.announce.is-hidden { display: none; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.header.is-scrolled, .header.is-open { border-bottom-color: var(--border); }
.header.is-open { background: #fff; }
.header__bar { display: flex; align-items: center; height: var(--header-h); gap: 40px; }

.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.logo img { width: 30px; height: 30px; margin-left: -4px; }

.nav { flex: 1; }
.nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__trigger, .nav__link {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; font-size: 15px; font-weight: 500;
  color: var(--text-primary); cursor: pointer; transition: color .15s, background-color .15s;
}
/* Chevron matches the Ramp reference: ~10px glyph in the label's own colour.
   Cyrillic labels are mostly lowercase with descenders (р, д, у), so the
   chevron sits on the x-height centre, 1px below the cap centre. */
.nav__trigger .ic--chev { position: relative; top: 1px; width: 20px; height: 20px; stroke-width: 2; transition: transform .2s var(--ease); }
.nav__trigger[aria-expanded="true"] .ic--chev { transform: rotate(180deg); }
/* Ramp-style focus: while a menu is open, the other items recede */
.nav.has-open .nav__trigger:not([aria-expanded="true"]), .nav.has-open .nav__link { color: var(--text-muted); }
.nav__trigger:hover, .nav__link:hover { color: var(--text-primary) !important; }

.header__actions { display: flex; align-items: center; gap: 8px; }

.burger {
  display: none; place-items: center; width: 44px; height: 44px; margin-left: auto; margin-right: -10px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.burger .ic { width: 24px; height: 24px; }
.burger .ic--close { display: none; }
.burger[aria-expanded="true"] .ic--open { display: none; }
.burger[aria-expanded="true"] .ic--close { display: block; }

/* ---------- Mega menu ---------- */
.mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 8px; }
.mega[hidden] { display: none; }
.mega__surface {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-overlay);
  transform-origin: top center;
  animation: megaIn .22s var(--ease);
  transition: height .26s var(--ease);
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.mega__panel { display: grid; grid-template-columns: 1fr 300px; }
.mega__panel:has(.mega__cols--4) { grid-template-columns: 1fr 264px; }
.mega__panel[hidden] { display: none; }
.mega__panel.is-entering { animation: panelIn .22s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateX(var(--dir, 0)); } to { opacity: 1; transform: none; } }

.mega__cols { display: grid; gap: 8px 16px; padding: 28px 24px 24px; }
.mega__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__title {
  margin: 0 0 8px; padding: 0 8px 10px; border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.mega__group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.mitem { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: 12px; transition: background-color .15s; }
.mitem:hover, .mitem:focus-visible { background: var(--bg-surface-2); }
.mitem__ic {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-surface-2); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  transition: background-color .15s, color .15s, border-color .15s;
}
.mitem:hover .mitem__ic { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.mitem__ic--logo { background: #fff; border-color: var(--border); }
.mitem:hover .mitem__ic--logo { background: #fff; border-color: var(--border); }
.mitem__ic--logo img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.mitem b { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }
.mitem small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--text-muted); }

.mega__feature { padding: 28px 24px 24px; background: var(--bg-surface-2); border-left: 1px solid var(--border-subtle); }
.mega__feature .mega__title { border-bottom-color: var(--border); }
.fcard { display: flex; flex-direction: column; gap: 4px; padding: 10px; margin: 0 -10px; border-radius: 12px; transition: background-color .15s; }
.fcard:hover { background: #fff; }
.fcard b { margin-top: 10px; font-size: 15px; font-weight: 500; }
.fcard small { font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
.fcard__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--brand-hover); }
.fcard__more .ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.fcard:hover .fcard__more .ic { transform: translateX(3px); }
.fcard__art {
  position: relative; display: flex; height: 132px; border-radius: 12px; overflow: hidden;
  background: #fff; border: 1px solid var(--border);
  background-image: radial-gradient(circle, #DDE2E9 1px, transparent 1.3px); background-size: 12px 12px;
}
.fcard__art--finance { align-items: flex-end; gap: 10px; padding: 18px 22px 0; }
.fbar { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: #D7F0E7; }
.fbar--hi { background: var(--brand); }
.fcard__art--bars { flex-direction: column; justify-content: center; gap: 10px; padding: 0 22px; }
.fcard__art--bars span { display: block; width: var(--w); height: 18px; margin-left: var(--x, 0); border-radius: 9px; background: var(--c); }
.fcard__art--logos { align-items: center; justify-content: center; gap: 12px; }
.fcard__art--logos img { width: 40px; height: 40px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(15,23,42,.06); object-fit: contain; }
.fcard__art--assistant { align-items: center; justify-content: center; }
.fcard__art--assistant img { width: 104px; height: 104px; }

.scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(23, 26, 32, .16);
  animation: fadeIn .2s ease;
}
.scrim[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- Mobile menu ---------- */
.mmenu {
  position: fixed; z-index: 49; left: 0; right: 0; bottom: 0; top: var(--mmenu-top, var(--header-h));
  display: flex; flex-direction: column; background: #fff; overflow-y: auto;
  animation: fadeIn .18s ease;
}
.mmenu[hidden] { display: none; }
.mmenu__body { flex: 1; padding: 8px 16px; }
.mmenu__sec { border-bottom: 1px solid var(--border-subtle); }
.mmenu__sec summary, .mmenu__plain {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font-size: 18px; font-weight: 500; list-style: none; cursor: pointer;
}
.mmenu__sec summary::-webkit-details-marker { display: none; }
.mmenu__sec summary .ic { color: var(--text-muted); transition: transform .2s var(--ease); }
.mmenu__sec[open] summary .ic { transform: rotate(180deg); }
.mmenu__plain { border-bottom: 1px solid var(--border-subtle); }
.mmenu__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 0 0 16px; }
.mmenu__links a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--text-secondary); }
.mmenu__foot { display: grid; gap: 8px; padding: 16px; border-top: 1px solid var(--border); background: #fff; position: sticky; bottom: 0; }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 72px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px;
  font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
}
.hero__eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(18, 161, 122, 0); } }
.hero__title {
  margin: 0;
  /* Sized so the longest rotating line («Больше свободного времени.», ≈14.5em) fits the container */
  font-size: clamp(38px, 6vw, 88px); font-weight: 500; line-height: 1.1; letter-spacing: -.045em;
}
.br-phone { display: none; }

/* Rotating benefit pill, drawn like a booking bar in the Glavbook calendar:
   soft status fill, text in the status ink, and a left stripe that follows
   the rounded corner like a bracket. Proportions copy the calendar bar
   (radius ≈ .25 and stripe ≈ .07 of its height).
   Geometry for Golos Text: with line-height 1 the word's line box spans
   baseline −.88em…+.12em; .14em of extra bottom padding puts the pill centre
   at baseline −.31em, the optical centre between cap height (.70) and
   x-height (.53). Pill top stays at −.88em so it never touches the
   descenders of the line above (line pitch 1.1em). */
.swap {
  display: inline-flex; align-items: baseline;
  padding: 0 .26em .14em .3em; border-radius: .28em;
  background: var(--swap-bg); color: var(--swap-fg);
  box-shadow: inset .08em 0 0 var(--swap-stripe);
  line-height: 1; font-weight: 400; letter-spacing: -.035em;
  vertical-align: baseline; white-space: nowrap;
  clip-path: inset(0 round .28em);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease);
}
.swap__track { display: inline-grid; transition: width .55s var(--ease); }
.swap__word {
  grid-area: 1 / 1; justify-self: start; white-space: nowrap;
  transition: transform .55s var(--ease), opacity .4s ease, filter .55s var(--ease);
}
.swap__word.is-in { transform: translateY(.7em); opacity: 0; filter: blur(6px); transition: none; }
.swap__word.is-out { transform: translateY(-.7em); opacity: 0; filter: blur(6px); }
.hero__lead {
  margin: 24px 0 0; max-width: 34em;
  font-size: clamp(18px, 1.55vw, 22px); line-height: 1.45; color: var(--text-secondary); text-wrap: balance;
}

.signup {
  display: flex; gap: 6px; width: 100%; max-width: 500px; margin-top: 36px; padding: 6px;
  background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.signup:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); background: #fff; }
.signup__input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--text-primary); outline: none;
}
.signup__input::placeholder { color: var(--text-muted); }
.signup__btn {
  /* 1px bottom padding centres the cap height exactly (measured: equal gaps above caps and below baseline) */
  height: 48px; padding: 0 22px 1px; border: 0; border-radius: 10px; background: var(--brand); color: #fff;
  font-size: 16px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .15s, transform .15s;
}
.signup__btn:hover { background: var(--brand-hover); }
.signup__btn:active { transform: translateY(1px); }

/* ---------- Product stage ---------- */
.stage {
  position: relative; margin-top: 64px; height: 600px; border-radius: 20px; overflow: hidden;
  background-color: var(--bg-surface-2);
  background-image: radial-gradient(circle, #D5DAE2 1px, transparent 1.4px);
  background-size: 16px 16px;
  border: 1px solid var(--border-subtle);
}
.app {
  position: absolute; left: 17%; right: 4%; top: 64px; bottom: -24px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card);
  overflow: hidden;
}
.app__top { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.app__title { font-size: 15px; font-weight: 600; white-space: nowrap; }
.app__title span { margin-left: 6px; font-weight: 400; color: var(--text-muted); }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #F1F3F6; margin-left: 8px; }
.seg span { display: flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.seg .is-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.app__search {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 280px; height: 34px; margin-left: auto; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text-faint); white-space: nowrap; overflow: hidden;
}
.app__search .ic { width: 15px; height: 15px; }
.app__new { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 500; }
.app__new .ic { width: 15px; height: 15px; stroke-width: 2.2; }

/* Calendar grid: 1 label column + 14 days; bookings sit on 28 half-day tracks */
.cal { --label: 176px; --row: 46px; position: relative; flex: 1; display: grid; grid-template-columns: var(--label) 1fr; grid-auto-rows: var(--row); font-size: 12px; overflow: hidden; }
.cal__corner { display: flex; align-items: center; padding: 0 16px; height: 44px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.cal__days { display: grid; grid-template-columns: repeat(14, 1fr); height: 44px; border-bottom: 1px solid var(--border); }
.cal__day { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; border-left: 1px solid var(--border-subtle); color: var(--text-secondary); }
.cal__day small { font-size: 10.5px; color: var(--text-muted); text-transform: lowercase; }
.cal__day b { font-size: 13px; font-weight: 500; }
.cal__day.is-weekend { background: #F7F8FA; }
.cal__day.is-today b { display: grid; place-items: center; width: 24px; height: 20px; border-radius: 6px; background: var(--brand); color: #fff; }
.cal__label { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border); min-width: 0; }
.cal__label b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__label small { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.cal__row { position: relative; display: grid; grid-template-columns: repeat(28, 1fr); align-items: center; border-bottom: 1px solid var(--border-subtle);
  background-image: linear-gradient(to right, var(--border-subtle) 1px, transparent 1px); background-size: calc(100% / 14) 100%; }
.cal__row .wk { position: absolute; top: 0; bottom: 0; background: rgba(247, 248, 250, .9); z-index: 0; }
.cal__row .today { position: absolute; top: 0; bottom: 0; background: rgba(18, 161, 122, .07); z-index: 0; }

.bk {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 32px; margin: 0 2px; padding: 0 8px 0 10px;
  border-radius: 8px; background: var(--bg); color: var(--fg); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden;
  box-shadow: inset 3px 0 0 var(--stripe);
}
.bk img { width: 14px; height: 14px; flex: none; border-radius: 3px; }
.bk span { overflow: hidden; text-overflow: ellipsis; }
.bk--ok { --bg: var(--st-ok-bg); --fg: var(--st-ok-fg); --stripe: var(--st-ok-stripe); }
.bk--warn { --bg: var(--st-warn-bg); --fg: var(--st-warn-fg); --stripe: var(--st-warn-stripe); }
.bk--info { --bg: var(--st-info-bg); --fg: var(--st-info-fg); --stripe: var(--st-info-stripe); }
.bk--block { --bg: var(--st-block-bg); --fg: var(--st-block-fg); --stripe: var(--st-block-stripe);
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(138,144,155,.12) 6px 12px); }
.bk--cut { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; box-shadow: none; }

/* The animated "new booking" bar */
.bk--new { transform-origin: left center; transform: scaleX(0); opacity: 0; transition: opacity .4s, transform 0s .4s; }
.stage.s-accept .bk--new { transform: scaleX(1); opacity: 1; transition: transform .55s var(--ease), opacity .2s; animation: glow 1.6s .4s ease-out; }
@keyframes glow { 0% { box-shadow: inset 3px 0 0 var(--stripe), 0 0 0 0 rgba(18,161,122,.45); } 100% { box-shadow: inset 3px 0 0 var(--stripe), 0 0 0 10px rgba(18,161,122,0); } }

/* Floating cards */
.fl {
  position: absolute; z-index: 3; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card);
  font-size: 13px;
}
.fl small { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.fl b { font-weight: 600; }
.ava { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #FCF2E2; color: #8A5A10; font-size: 13px; font-weight: 600; }
.ava--sm { width: 24px; height: 24px; font-size: 11px; background: var(--brand-soft); color: var(--brand-hover); }

.fl--stat { left: 2.5%; top: 132px; width: 176px; padding: 14px 16px 10px; }
.fl__big { margin-top: 2px; font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.fl__big span { font-size: 18px; color: var(--text-muted); font-weight: 500; }
.spark { width: 100%; height: 34px; margin-top: 6px; overflow: visible; }
.spark path { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark .spark__fill { fill: rgba(18,161,122,.10); stroke: none; }

.fl--request { right: 2%; top: 150px; width: 312px; padding: 14px; }
.fl__head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.fl__head img { width: 18px; height: 18px; border-radius: 4px; }
.fl__head time { margin-left: auto; color: var(--text-faint); font-weight: 400; }
.fl__guest { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.fl__guest b { font-size: 15px; }
.fl__row { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-surface-2); }
.fl__row span { color: var(--text-secondary); }
.fl__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fl__btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 10px; font-weight: 500; transition: transform .15s, background-color .15s, box-shadow .2s; }
.fl__btn .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.fl__btn--ghost { border: 1px solid var(--border); color: var(--text-secondary); }
.fl__btn--ok { background: var(--brand); color: #fff; }
.stage.s-press .fl__btn--ok { transform: scale(.96); background: var(--brand-hover); box-shadow: 0 0 0 4px var(--brand-ring); }

.fl--tg { left: 2.5%; bottom: 48px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; max-width: 360px; }
.fl--tg img { width: 36px; height: 36px; }
.fl--tg b { display: block; font-size: 14px; }

.fl--clean { right: 5%; bottom: 56px; width: 268px; padding: 14px; }
.fl--clean > b { display: block; margin-top: 8px; font-size: 15px; }
.fl__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mark-yellow); }
.fl__who { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-weight: 500; }
.fl__chip { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--bg-surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 500; }

/* Scene choreography: JS toggles s-request → s-press → s-accept → s-tg → s-clean */
.fl--request, .fl--tg, .fl--clean { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none; }
.stage.s-request .fl--request { opacity: 1; transform: none; }
.stage.s-accept .fl--request { opacity: 0; transform: translateY(-10px) scale(.97); }
.stage.s-tg .fl--tg { opacity: 1; transform: none; }
.stage.s-clean .fl--clean { opacity: 1; transform: none; }

/* Static, fully-revealed scene for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Placement platforms (under the product stage, Notion-style logo row) ---------- */
.platforms { margin-top: 56px; text-align: center; }
.platforms__title { margin: 0; font-size: 15px; color: var(--text-muted); }
.platforms__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 56px;
  margin: 24px 0 0; padding: 0; list-style: none;
}
.platforms__list li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--text-secondary);
  transition: color .2s;
}
.platforms__list img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.platforms__list li:hover { color: var(--text-primary); }
.platforms__list li:hover img { filter: none; opacity: 1; }

/* ---------- Features (Ramp-style bento) ---------- */
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }
.btn--xl { height: 48px; padding: 0 22px; font-size: 16px; }

.features { padding: 120px 0 40px; }
.features__head { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; margin-bottom: 56px; }
.features__title {
  margin: 0; max-width: 21em;
  font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em;
}
.features__title span { display: block; color: var(--text-muted); }

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.fcell {
  position: relative; display: block; grid-column: span 2; height: 480px; padding: 32px; overflow: hidden;
  background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: 20px;
  transition: border-color .2s, box-shadow .2s;
}
.fcell--wide { grid-column: span 3; height: 520px; }
.fcell:hover { border-color: var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.fcell__head { position: relative; z-index: 4; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.fcell__title { margin: 0; max-width: 15em; font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.fcell__title span { color: var(--text-muted); }
.fcell:hover .fcell:hover 
.fcell__art { position: absolute; inset: 0; z-index: 1; }

/* Shared UI window used inside cards */
.mock {
  position: absolute; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-card); font-size: 13px; color: var(--text-primary);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mock__bar { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mock__bar b { font-size: 14px; font-weight: 600; }
.mock__bar > span { color: var(--text-muted); }
.mock__foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); font-weight: 500; }
.mock__muted { margin-left: auto; color: var(--text-muted); font-weight: 400; }

.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; white-space: nowrap;
  background: var(--bg-surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 500;
}
.chip--ok { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.chip--warn { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.chip--info { background: var(--st-info-bg); color: var(--st-info-fg); }

.toast {
  position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: 12px; max-width: 320px; padding: 12px 16px 12px 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card);
}
.toast b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.toast small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.toast__ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); }
.toast__ic .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.toast--warn .toast__ic { background: #FDEBE8; color: #C9432F; }

/* 1. Calendar card: the same half-day booking bars as the hero */
.art-cal .mock { left: 32px; right: -40px; top: 140px; bottom: -24px; }
.mcal { --lab: 140px; position: relative; }
.mcal::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--lab); right: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--border-subtle) 1px, transparent 1px); background-size: calc(100% / 7) 100%;
}
.mcal::after {
  content: ''; position: absolute; top: 0; bottom: 0; pointer-events: none;
  left: calc(var(--lab) + (100% - var(--lab)) * 3 / 7); width: calc((100% - var(--lab)) / 7); background: rgba(18, 161, 122, .07);
}
.mcal__row {
  position: relative; display: grid; grid-template-columns: var(--lab) repeat(14, minmax(0, 1fr)); align-items: center;
  height: 52px; border-bottom: 1px solid var(--border-subtle);
}
.mcal__row > span { grid-column: 1; padding: 0 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; }
.mcal__row--head { height: 48px; }
.mcal__row--head i { grid-column: span 2; display: flex; flex-direction: column; align-items: center; font-style: normal; font-size: 11px; line-height: 1.2; color: var(--text-muted); }
.mcal__row--head i b { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.mcal__row--head i.is-today b { display: grid; place-items: center; width: 24px; height: 20px; border-radius: 6px; background: var(--brand); color: #fff; }
.mcal__row--head i.is-we { color: var(--text-faint); }
.mcal .bk { grid-row: 1; height: 30px; font-style: normal; }
.bk--draw { transform-origin: left center; }
.toast--cal { right: 28px; top: 116px; }

/* 2. Requests card */
.art-req .mock { left: 32px; right: 32px; top: 140px; bottom: -24px; }
.mseg { display: flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 10px; background: #F1F3F6; }
.mseg i { display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.mseg i.is-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.reqs { margin: 0; padding: 0; list-style: none; }
.req {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 128px; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--border-subtle);
}
.req img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.req b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.req small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req__when { text-align: right; }
.req .chip { justify-self: end; }
.req--new { background: #F6FAFE; box-shadow: inset 3px 0 0 var(--st-info-stripe); }

/* 3. Cleaning card */
.art-clean .mock { left: 28px; right: 28px; top: 172px; bottom: -24px; }
.tasks { margin: 0; padding: 0; list-style: none; }
.task { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); }
.task b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task__box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); color: #fff; }
.task__box .ic { width: 13px; height: 13px; stroke-width: 3; }
.task.is-done .task__box { background: var(--brand); border-color: var(--brand); }
.task.is-done b { color: var(--text-secondary); }

/* 4. Finance card */
.art-fin .mock { left: 28px; right: 28px; top: 172px; bottom: -24px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-subtle); }
.kpis div { padding: 12px; }
.kpis div + div { border-left: 1px solid var(--border-subtle); }
.kpis small { display: block; font-size: 12px; color: var(--text-muted); }
.kpis b { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 168px; padding: 20px 20px 32px; }
.bars span { position: relative; flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: #D7F0E7; transform-origin: bottom; transition: transform .45s var(--ease); }
.bars span.is-now { background: var(--brand); }
.bars i { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--text-muted); }

/* 5. Guests card */
.guest { left: 28px; right: 28px; top: 172px; padding: 18px; }
.guest__top { display: flex; align-items: center; gap: 12px; }
.guest__top b { display: block; font-size: 15px; font-weight: 600; }
.ava--lg { width: 48px; height: 48px; font-size: 16px; background: var(--brand-soft); color: var(--brand-hover); }
.stars { display: flex; gap: 2px; margin-top: 4px; color: #EFC03A; }
.stars .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.guest__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; padding: 12px 0; border-block: 1px solid var(--border-subtle); }
.guest__stats b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; }
.guest__stats small { display: block; font-size: 12px; color: var(--text-muted); }
.guest__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.toast--warn { left: 44px; right: 20px; bottom: 28px; max-width: none; }

/* Hover: the window lifts, the toast follows with a little parallax, and each
   card performs its own small action, as if the system just did the work. */
/* Hover: the cards and windows stay put; only the content changes, in two
   steps ~1.4s apart so each one can be read (e.g. a CIAN booking lands,
   then an Avito one). Keyframe animations, because a transition can only
   show one change. Leaving the card resets it instantly. */
@media (hover: hover) {
  /* Step 1, immediately */
  .fcell:hover :is(.xswap, .chip-swap):not(.s2) > :first-child { animation: swapOut .35s ease both; }
  .fcell:hover :is(.xswap, .chip-swap):not(.s2) > :nth-child(2) { animation: swapIn .45s var(--ease) both; }
  .fcell:hover .bk--hover { animation: drawIn .6s var(--ease) both; }
  .fcell:hover .req--new { animation: toConfirmed .4s ease both; }
  .fcell:hover .task--next .task__box { animation: tickBox .3s ease both; }
  .fcell:hover .task--next .task__box .ic { animation: tickIcon .3s var(--ease) .1s both; }
  .js .fcell.is-visible:hover .bars span { transform: scaleY(1.22); }
  .fcell:hover .stars .ic { animation: starPop .55s var(--ease) both; }
  .fcell:hover .stars .ic:nth-child(2) { animation-delay: .07s; }
  .fcell:hover .stars .ic:nth-child(3) { animation-delay: .14s; }
  .fcell:hover .stars .ic:nth-child(4) { animation-delay: .21s; }
  .fcell:hover .stars .ic:nth-child(5) { animation-delay: .28s; }
  /* Step 2, after a pause */
  .fcell:hover :is(.xswap, .chip-swap).s2 > :first-child { animation: swapOut .35s ease 1.4s both; }
  .fcell:hover :is(.xswap, .chip-swap).s2 > :nth-child(2) { animation: swapIn .45s var(--ease) 1.4s both; }
  .fcell:hover .xswap.xswap3:not(.s2) > :nth-child(2) { animation: swapIn .45s var(--ease) both, swapOut .35s ease 1.4s forwards; }
  .fcell:hover .xswap.xswap3:not(.s2) > :nth-child(3) { animation: swapIn .45s var(--ease) 1.4s both; }
  .fcell:hover .bk--hover2 { animation: drawIn .6s var(--ease) 1.4s both; }
  .fcell:hover .req--incoming { animation: rowIn .55s var(--ease) 1.4s both; }
}
@keyframes swapOut { to { opacity: 0; transform: translateY(-.6em); filter: blur(3px); } }
@keyframes swapIn { from { opacity: 0; transform: translateY(.6em); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes drawIn { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes toConfirmed { to { background: #F2FAF7; box-shadow: inset 3px 0 0 var(--st-ok-stripe); } }
@keyframes rowIn {
  from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom-width: 0; }
  to { max-height: 80px; padding-top: 14px; padding-bottom: 14px; opacity: 1; border-bottom-width: 1px; }
}
@keyframes tickBox { to { background: var(--brand); border-color: var(--brand); } }
@keyframes tickIcon { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes starPop { 0% { transform: scale(1); } 45% { transform: scale(1.45) rotate(-12deg); } 100% { transform: scale(1); } }

/* Resting state of everything the hover reveals */
.bk--hover, .bk--hover2 { transform-origin: left center; transform: scaleX(0); opacity: 0; }
.chip-swap { display: inline-grid; justify-self: end; justify-items: end; }
.xswap { display: inline-grid; }
.kpis .xswap, .guest__stats .xswap { display: grid; }
.chip-swap > *, .xswap > * { grid-area: 1 / 1; }
.chip-swap > :not(:first-child), .xswap > :not(:first-child) { opacity: 0; transform: translateY(.6em); filter: blur(3px); }
/* Incoming request is collapsed until step 2 opens it on top of the list */
.req--incoming {
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; border-bottom-width: 0;
  background: #F6FAFE; box-shadow: inset 3px 0 0 var(--st-info-stripe);
}
.task--next .task__box .ic { opacity: 0; transform: scale(.6); }

/* Scroll reveal. Hidden only when JS runs, so the page still reads without it. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .fcell .toast { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s var(--ease) .8s, transform .5s var(--ease) .8s; }
.js .fcell.is-visible .toast { opacity: 1; transform: none; }
.js .fcell .bk--draw { transform: scaleX(0); transition: transform .7s var(--ease) .45s; }
.js .fcell.is-visible .bk--draw { transform: none; }
.js .fcell .req--new { opacity: 0; transform: translateY(-10px); transition: opacity .5s var(--ease) .45s, transform .5s var(--ease) .45s, background-color .35s ease, box-shadow .35s ease; }
.js .fcell.is-visible .req--new { opacity: 1; transform: none; }
.js .fcell .bars span { transform: scaleY(0); transition: transform .7s var(--ease); }
.js .fcell.is-visible .bars span { transform: none; }
.js .fcell.is-visible .bars span:nth-child(2) { transition-delay: .06s; }
.js .fcell.is-visible .bars span:nth-child(3) { transition-delay: .12s; }
.js .fcell.is-visible .bars span:nth-child(4) { transition-delay: .18s; }
.js .fcell.is-visible .bars span:nth-child(5) { transition-delay: .24s; }
.js .fcell.is-visible .bars span:nth-child(6) { transition-delay: .3s; }
/* After the first reveal the entrance delays must not slow hover feedback */
.js .fcell.is-settled .toast, .js .fcell.is-settled .req--new, .js .fcell.is-settled .bk--draw { transition-delay: 0s; }
.js .fcell.is-settled { transition-delay: 0s; }

@media (max-width: 1279px) {
  .fcell { padding: 28px; }
  .fcell__title { font-size: 24px; }
}
/* Three regular cards get too narrow for their windows below 1200px */
@media (max-width: 1199px) {
  /* Header: tighter nav items so logo, menu and buttons keep clear gaps down to 1024px */
  .header__bar { gap: 20px; }
  .nav__trigger, .nav__link { padding: 0 8px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .fcell { grid-column: span 1; height: 440px; }
  .fcell--wide, .fcell:last-child { grid-column: span 2; }
  .fcell--wide { height: 480px; }
}
@media (max-width: 1023px) {
  .features { padding: 88px 0 24px; }
}
@media (max-width: 767px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fcell, .fcell--wide, .fcell:last-child { grid-column: auto; height: 440px; }
  .art-clean .mock, .art-fin .mock, .guest { top: 140px; }
}
@media (max-width: 639px) {
  .features { padding: 72px 0 16px; }
  .features__head { margin-bottom: 32px; }
  .fcell, .fcell--wide, .fcell:last-child { height: 440px; padding: 24px; border-radius: 16px; }
  .fcell__title { font-size: 22px; }
    .kpis b { font-size: 15px; }
  .art-cal .mock { left: 20px; right: auto; width: 600px; top: 140px; }
  .art-req .mock { left: 20px; right: 20px; top: 140px; }
  .req { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .req__when { display: none; }
  .art-clean .mock, .art-fin .mock { left: 20px; right: 20px; top: 156px; }
  .guest { left: 20px; right: 20px; top: 156px; }
  .toast--cal { left: 20px; right: 20px; top: auto; bottom: 20px; max-width: none; }
  .toast--warn { left: 28px; right: 12px; bottom: 20px; }
}

/* ---------- Mobile app banner ---------- */
.appcta { padding: 40px 0 120px; }
.appcta__card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 480px; overflow: hidden;
  border-radius: 24px; border: 1px solid #D3EEE4;
  background: radial-gradient(120% 140% at 100% 0%, #F3FBF8 0%, #E6F5F0 55%, #DDF1E9 100%);
}
.appcta__text { position: relative; z-index: 2; align-self: center; padding: 64px 0 64px 64px; }
.appcta__eyebrow { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-hover); }
.appcta__title { margin: 0; font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.appcta__lead { margin: 18px 0 0; max-width: 30em; font-size: 18px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.appcta__actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.store {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 12px; border-radius: 14px;
  background: var(--text-primary); color: #fff; transition: background-color .15s, transform .15s;
}
.store:hover { background: #000; }
.store:active { transform: translateY(1px); }
.store .store__logo { width: 32px; height: 32px; stroke: none; }
.store span { display: flex; flex-direction: column; line-height: 1.15; }
.store small { font-size: 12px; color: rgba(255, 255, 255, .7); }
.store b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.appcta__qr { display: flex; align-items: center; gap: 14px; }
.appcta__qr img { width: 88px; height: 88px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid #D3EEE4; image-rendering: pixelated; }
.appcta__qr small { max-width: 9.5em; font-size: 13px; line-height: 1.35; color: var(--text-secondary); }
.appcta__meta { margin: 20px 0 0; font-size: 14px; color: var(--text-muted); }

/* Phone mock, cropped by the card's bottom edge */
.appcta__art { position: relative; min-height: 480px; }
.phone {
  position: absolute; left: 50%; top: 56px; width: 292px; height: 600px; margin-left: -146px;
  padding: 10px; border-radius: 46px; background: #171A20;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 30px 60px rgba(15, 23, 42, .22);
}
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 37px; background: #F4F6F9; padding: 0 14px; font-size: 12px; color: var(--text-primary); }
.phone__status { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 12px; font-size: 13px; }
.phone__sig { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.phone__sig i { width: 3px; border-radius: 1px; background: var(--text-primary); }
.phone__sig i:nth-child(1) { height: 4px; } .phone__sig i:nth-child(2) { height: 6px; } .phone__sig i:nth-child(3) { height: 8px; } .phone__sig i:nth-child(4) { height: 10px; }
.papp__head { display: flex; align-items: center; gap: 10px; margin: 6px 2px 14px; }
.papp__head img { width: 32px; height: 32px; padding: 3px; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.papp__head b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.papp__head small { display: block; font-size: 11.5px; color: var(--text-muted); }
.papp__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.papp__sum span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-muted); }
.papp__sum b { font-size: 18px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.papp__label { margin: 14px 4px 6px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.papp__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 6px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--border-subtle); }
.papp__item > img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.papp__item b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.papp__item small { display: block; margin-top: 1px; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.papp__item .chip { height: 22px; padding: 0 7px; font-size: 11px; }

.push {
  position: absolute; z-index: 3; left: 4%; top: 120px; display: flex; align-items: flex-start; gap: 12px; width: 300px; padding: 14px;
  border-radius: 18px; background: rgba(255, 255, 255, .92); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 18px 40px rgba(15, 23, 42, .14);
}
.push img { width: 36px; height: 36px; flex: none; padding: 4px; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.push__app { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.push__app time { color: var(--text-faint); }
.push b { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; }
.push small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-secondary); }

/* Entrance: the phone rises, then the push drops in */
.js .appcta__card .phone { transform: translateY(40px); transition: transform .9s var(--ease) .15s; }
.js .appcta__card.is-visible .phone { transform: none; }
.js .appcta__card .push { opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .5s var(--ease) .8s, transform .6s var(--ease) .8s; }
.js .appcta__card.is-visible .push { opacity: 1; transform: none; }

@media (max-width: 1199px) {
  .appcta__text { padding: 56px 0 56px 48px; }
  .appcta__qr small { display: none; }
  /* The narrower art column would push the toast over the title; tuck it onto the phone's right side */
  .push { left: auto; right: 16px; width: 272px; top: 92px; }
}
@media (max-width: 1023px) {
  .appcta { padding: 24px 0 88px; }
  .appcta__card { grid-template-columns: minmax(0, 1fr); }
  .appcta__text { padding: 48px 40px 8px; }
  .appcta__art { min-height: 420px; }
  .phone { top: 40px; }
  .push { left: 50%; margin-left: -300px; top: 92px; }
}
@media (max-width: 767px) {
  .appcta__qr { display: none; }
  .push { left: 16px; right: 16px; margin-left: 0; width: auto; top: 24px; }
  .phone { top: 72px; }
}
@media (max-width: 639px) {
  .appcta { padding: 16px 0 72px; }
  .appcta__card { border-radius: 18px; }
  .appcta__text { padding: 36px 24px 4px; }
  .appcta__lead { font-size: 16px; }
  .appcta__actions { margin-top: 24px; }
  .store { width: 100%; justify-content: center; }
  .appcta__art { min-height: 400px; }
}

/* ---------- Shared section heading ---------- */
.section-title {
  margin: 0 0 40px; max-width: 21em;
  font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance;
}

/* ---------- Directions («Для кого»): approved miniature cards ----------
   Composition follows design-previews/accommodation-cards/*-v2.png: pastel
   card, icon + label top-left over the empty corner of the miniature, the
   miniature (cut from the approved art, label erased), then title and text. */
.segments { padding: 80px 0 40px; }
.dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 7%;
  border-radius: 24px; border: 1px solid rgba(23, 26, 32, .07); background: var(--tone-bg);
  container-type: inline-size;
}
.dcard--flats { --tone-bg: #F4F9F2; --tone-ink: #24391B; --tone-icon: #24391B; }
.dcard--hotels { --tone-bg: #EFF7FD; --tone-ink: #1F3561; --tone-icon: #1F3561; }
.dcard--houses { --tone-bg: #FAF9F1; --tone-ink: #3D3415; --tone-icon: #8B681B; }
.dcard__label { position: absolute; left: 7.2cqw; top: 6.6cqw; z-index: 1; display: inline-flex; align-items: center; gap: 2.4cqw; font-size: clamp(12px, 3.9cqw, 18px); font-weight: 600; letter-spacing: -.01em; color: var(--tone-ink); }
.dcard__label .ic { width: 6.6cqw; height: 6.6cqw; color: var(--tone-icon); stroke-width: 1.6; }
.ic--solid { fill: currentColor; stroke: none; }
.dcard__img { display: block; width: 89.5%; height: auto; margin: 3.5% 0 0 5.2%; }
.dcard__body { padding: 2cqw 7.2cqw 0; }
.dcard h3 { margin: 0; font-size: 6.6cqw; font-weight: 600; line-height: 1.12; letter-spacing: -.03em; color: var(--text-primary); text-wrap: balance; }
.dcard p { margin: 2.8cqw 0 0; font-size: clamp(14px, 3.7cqw, 17px); line-height: 1.45; color: var(--text-secondary); text-wrap: pretty; }

/* ---------- Proof: facts and testimonials ---------- */
.proof { padding: 96px 0 40px; }
.proof__head { margin-bottom: 48px; text-align: center; }
.proof__eyebrow { margin: 0 0 12px; font-size: 16px; color: var(--text-muted); }
.proof__title { margin: 0; font-size: clamp(34px, 4.4vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }

/* Testimonial marquee: three rows drifting in alternate directions; the set is
   cloned once in JS, so each track loops by moving exactly half its width. */
.marquee {
  display: grid; gap: 16px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee__row { overflow: hidden; }
.marquee__track { --gap: 16px; display: flex; gap: var(--gap); width: max-content; animation: marquee var(--dur, 72s) linear infinite; }
.marquee__row:nth-child(2) .marquee__track { --dur: 84s; animation-direction: reverse; animation-delay: -30s; }
.marquee__row:nth-child(3) .marquee__track { --dur: 66s; animation-delay: -18s; }
.marquee__row:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.tcard { flex: none; display: flex; flex-direction: column; width: 320px; min-height: 184px; margin: 0; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--border); }
.tcard__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tcard__head > span:last-child { min-width: 0; }
.tcard__logo { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-muted); }
.tcard__logo .ic { width: 20px; height: 20px; }
.tcard b { display: block; font-size: 15px; font-weight: 500; }
.tcard small { display: block; font-size: 14px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard blockquote { margin: 16px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-secondary); }
.facts--after { margin-top: 48px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fact { padding: 32px; border-radius: 20px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); }
.fact b { display: block; font-size: clamp(44px, 4.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.fact span { display: block; margin-top: 14px; max-width: 22em; font-size: 16px; line-height: 1.45; color: var(--text-secondary); }

/* ---------- Pricing page ---------- */
/* Check-mark list (pricing plan) */
.checks { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.45; color: var(--text-secondary); }
.checks .ic { width: 24px; height: 24px; padding: 4px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); stroke-width: 2.6; }
.nav__link[aria-current="page"] { background: var(--bg-surface-2); color: var(--text-primary); }
.mmenu__plain[aria-current="page"] { color: var(--brand-hover); }
.phero { padding: 88px 0 48px; text-align: center; }
.phero__eyebrow { justify-content: center; }
.phero__title { margin: 0 auto; max-width: 14em; font-size: clamp(40px, 5.4vw, 76px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.phero__lead { margin: 22px auto 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-secondary); text-wrap: balance; }

.pplan { padding: 24px 0 40px; }
/* Plan block «Сейчас и позже» (variant D): the live free plan next to a muted
   card that says tariffs come later, with included features as chips below. */
.vD { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vD__now { padding: 40px; border-radius: 24px; border: 2px solid var(--brand); background: #fff; box-shadow: 0 0 0 6px var(--brand-ring); }
.vD__later { padding: 40px; border-radius: 24px; border: 2px dashed var(--border-strong); background: var(--bg-surface-2); color: var(--text-secondary); }
.vD__top { display: flex; align-items: center; gap: 12px; }
/* The 20px title sits ~1px below its line-box centre (Golos metrics), so the badge follows it down */
.vD__top > :first-child { margin-top: 2px; }
.vD__name { font-size: 20px; font-weight: 500; color: var(--text-primary); }
.vD__soon { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; background: #E7EAEF; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.vD__cta { width: 100%; margin-top: 28px; }
.vD__clock { display: grid; place-items: center; width: 64px; height: 64px; margin-top: 32px; border-radius: 18px; background: #fff; border: 1px solid var(--border); color: var(--text-muted); }
.vD__clock .ic { width: 30px; height: 30px; }
.vD__text { margin: 20px 0 0; max-width: 26em; font-size: 18px; line-height: 1.5; }
.vD__incl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.vD__inclLabel { margin-right: 8px; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.vD__chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; color: var(--text-secondary); }
.vD__chip .ic { width: 18px; height: 18px; color: var(--brand); }
.price__amount { display: flex; align-items: baseline; gap: 10px; margin-top: 24px; }
.price__amount b { font-size: clamp(56px, 5vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.price__amount span { font-size: 17px; color: var(--text-muted); }
.pcard__badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-hover); font-size: 13px; font-weight: 600; }
.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; padding: 0; list-style: none; }
.incl li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; color: var(--text-primary); }
.incl__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--border-subtle); color: var(--brand); }
.incl__ic .ic { width: 18px; height: 18px; }

.pfaq { padding: 80px 0 0; }
.faq { max-width: 860px; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 16px 0;
  font-size: 19px; font-weight: 500; letter-spacing: -.01em; list-style: none; cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ic { flex: none; color: var(--text-muted); transition: transform .25s var(--ease); }
.faq__item[open] summary .ic { transform: rotate(180deg); color: var(--text-primary); }
.faq__item p { margin: -4px 0 24px; max-width: 44em; font-size: 17px; line-height: 1.55; color: var(--text-secondary); }

@media (max-width: 1023px) {
  .phero { padding: 64px 0 32px; }
  .pfaq { padding-top: 64px; }
  .vD { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .phero { padding: 44px 0 24px; }
  .vD__now, .vD__later { padding: 28px 20px; border-radius: 20px; }
  .vD__text { font-size: 16px; }
  .vD__inclLabel { flex-basis: 100%; margin: 0 0 4px; }
  .faq__item summary { font-size: 17px; min-height: 64px; }
  .faq__item p { font-size: 16px; }
}

/* ---------- News page (changelog) ---------- */
.news { padding: 24px 0 40px; }
.post {
  display: grid; grid-template-columns: 200px minmax(0, 760px); gap: 48px; padding: 40px 0;
  border-top: 1px solid var(--border); scroll-margin-top: 88px;
}
.post:first-child { border-top: 0; }
.post__date { position: sticky; top: 104px; align-self: start; padding-top: 3px; font-size: 15px; color: var(--text-muted); }
.post__title { margin: 14px 0 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.post__title a { transition: color .15s; }
.post__title a:hover, .post:target .post__title a { color: var(--brand-hover); }
.post__lead { margin: 12px 0 0; font-size: 18px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.post__points { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.post__points li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.post__points li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
@media (max-width: 767px) {
  .post { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 32px 0; }
  .post__date { position: static; font-size: 14px; }
  .post__lead { font-size: 16px; }
  .post__points li { font-size: 15px; }
}

/* ---------- Help centre (generated by tools/build-help.mjs) ---------- */
.hhero { padding-bottom: 40px; }
.hsearch {
  display: flex; align-items: center; gap: 12px; max-width: 620px; height: 60px; margin: 32px auto 0; padding: 0 20px;
  border-radius: 16px; border: 1px solid var(--border); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06);
  transition: border-color .15s, box-shadow .15s;
}
.hsearch:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.hsearch .ic { width: 20px; height: 20px; color: var(--text-muted); }
.hsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--text-primary); }
.hsearch input::placeholder { color: var(--text-muted); }
.hresults { max-width: 620px; margin: 10px auto 0; padding: 8px; text-align: left; border-radius: 16px; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-overlay); }
.hresults a { display: block; padding: 12px 14px; border-radius: 10px; transition: background-color .15s; }
.hresults a:hover, .hresults a:focus-visible { background: var(--bg-surface-2); }
.hresults b { display: block; font-size: 15px; font-weight: 500; }
.hresults small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.hresults p { margin: 0; padding: 12px 14px; color: var(--text-muted); }

.hsections { padding: 8px 0 40px; }
.hsections__title { margin: 0 0 18px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.hsections__title:not(:first-child) { margin-top: 56px; }
.hstart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hstep { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; border-radius: 18px; border: 1px solid var(--border); transition: border-color .2s, background-color .2s; }
.hstep:hover { border-color: var(--brand); background: var(--brand-soft); }
.hstep__n { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-hover); font-size: 14px; font-weight: 600; }
.hstep b { font-size: 17px; font-weight: 500; }
.hstep > span:last-child { font-size: 14.5px; line-height: 1.45; color: var(--text-muted); }
.htiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.htile { display: flex; flex-direction: column; padding: 24px; border-radius: 18px; border: 1px solid transparent; background: var(--bg-surface-2); transition: border-color .2s, background-color .2s; }
.htile:hover { border-color: var(--border); background: #fff; }
.htile .hsec__ic { margin-bottom: 18px; }
.htile b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.htile__note { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--text-secondary); }
.htile__count { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 22px; font-size: 14px; color: var(--text-muted); }
.htile__count .ic { width: 18px; height: 18px; color: var(--tone); transition: transform .2s; }
.htile:hover .htile__count .ic { transform: translateX(3px); }
.hsec__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--tone-bg); color: var(--tone); }
.hsec__ic .ic { width: 22px; height: 22px; }
.hsec--blue { --tone: #2E7FD1; --tone-bg: #DCE9F9; }
.hsec--orange { --tone: #D98E1F; --tone-bg: #FBEDD5; }
.hsec--grey { --tone: #5B6472; --tone-bg: #E7EAEF; }
.hsec--green { --tone: #12A17A; --tone-bg: #D7F0E7; }
.hsec--purple { --tone: #7C5CE0; --tone-bg: #ECE6FB; }
.hhelp { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 28px 32px; border-radius: 20px; border: 1px solid var(--border); }
.hhelp b { display: block; font-size: 19px; font-weight: 500; }
.hhelp p { margin: 6px 0 0; max-width: 40em; font-size: 16px; color: var(--text-secondary); }

/* Article page: sidebar · article · on-this-page */
.hdoc { padding: 48px 0 40px; }
.hdoc__grid { display: grid; grid-template-columns: 248px minmax(0, 1fr) 208px; gap: 48px; align-items: start; }
.hnav { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; padding-right: 8px; font-size: 14px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.hnav__home { display: inline-flex; margin-bottom: 18px; font-weight: 500; color: var(--brand-hover); }
.hnav__sec { margin: 18px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.hnav__sec a { color: inherit; transition: color .15s; }
.hnav__sec a:hover, .hnav__sec a[aria-current="page"] { color: var(--brand-hover); }
.hnav ul, .hnav-m ul { margin: 0; padding: 0; list-style: none; }
.hnav li a, .hnav-m li a { display: block; padding: 7px 10px; margin-left: -10px; border-radius: 8px; line-height: 1.35; color: var(--text-secondary); transition: background-color .15s, color .15s; }
.hnav li a:hover, .hnav-m li a:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.hnav li a[aria-current="page"], .hnav-m li a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-hover); font-weight: 500; }
.hart { min-width: 0; max-width: 760px; }
.hcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 14px; color: var(--text-muted); }
.hcrumbs a { color: var(--text-secondary); }
.hcrumbs a:hover { color: var(--brand-hover); }
.hart h1 { margin: 14px 0 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.hart__title { display: flex; align-items: center; gap: 16px; }
.hart__title .hsec__ic { width: 52px; height: 52px; border-radius: 14px; }
.hart__title .hsec__ic .ic { width: 26px; height: 26px; }
.hrows { margin-top: 28px; border-top: 1px solid var(--border); }
.hrow { display: block; padding: 18px 0 20px; border-bottom: 1px solid var(--border); }
.hrow b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 18px; font-weight: 500; transition: color .15s; }
.hrow:hover b { color: var(--brand-hover); }
.hrow > span { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--text-secondary); }
.hart__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.hart__lead { margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.hart__body { margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: var(--text-primary); }
.hart__body h2 { margin: 40px 0 0; font-size: 24px; font-weight: 500; letter-spacing: -.02em; scroll-margin-top: 96px; }
.hart__body p { margin: 14px 0 0; color: var(--text-secondary); }
.hlist { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hlist li { position: relative; padding-left: 22px; color: var(--text-secondary); }
.hlist li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.hsteps { counter-reset: step; margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.hsteps li { counter-increment: step; position: relative; padding-left: 42px; color: var(--text-secondary); }
.hsteps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand-hover); font-size: 14px; font-weight: 600; line-height: 1;
}
.hnote { display: flex; gap: 14px; margin: 20px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--st-info-bg); color: var(--st-info-fg); }
.hnote .ic { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--st-info-stripe); }
.hnote b { display: block; font-weight: 600; }
.hnote p { margin: 4px 0 0 !important; color: inherit !important; opacity: .9; }
.hnote--warn { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.hnote--warn .ic { color: var(--st-warn-stripe); }
.hnote--tip { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.hnote--tip .ic { color: var(--st-ok-stripe); }
.htable { margin: 18px 0 0; overflow-x: auto; border-radius: 14px; border: 1px solid var(--border); }
.htable table { width: 100%; border-collapse: collapse; font-size: 15px; }
.htable th { padding: 12px 16px; text-align: left; font-weight: 600; background: var(--bg-surface-2); border-bottom: 1px solid var(--border); }
.htable td { padding: 12px 16px; vertical-align: top; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.htable tr:last-child td { border-bottom: 0; }
.hart__body .faq { margin-top: 12px; }
.hart__body .faq__item summary { font-size: 17px; min-height: 60px; }
.hart__body .faq__item p { font-size: 16px; }
.hpager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }
.hpager a { display: block; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); font-weight: 500; transition: border-color .15s, background-color .15s; }
.hpager a:hover { border-color: var(--brand); background: var(--brand-soft); }
.hpager small { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 400; color: var(--text-muted); }
.hpager__next { grid-column: 2; text-align: right; }
.hnav-m { display: none; }
.htoc { position: sticky; top: 96px; font-size: 14px; }
.htoc p { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.htoc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--border); }
.htoc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; line-height: 1.35; color: var(--text-secondary); border-left: 2px solid transparent; transition: color .15s, border-color .15s; }
.htoc a:hover { color: var(--text-primary); }
.htoc a.is-active { color: var(--brand-hover); border-left-color: var(--brand); font-weight: 500; }

@media (max-width: 1199px) {
  .hdoc__grid { grid-template-columns: 232px minmax(0, 1fr); }
  .htoc { display: none; }
}
@media (max-width: 1023px) {
  .hstart, .htiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdoc { padding-top: 32px; }
  .hdoc__grid { grid-template-columns: minmax(0, 1fr); }
  .hnav { display: none; }
  .hnav-m { display: block; margin-top: 24px; border-radius: 14px; border: 1px solid var(--border); padding: 0 18px; }
  .hnav-m summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-weight: 500; list-style: none; cursor: pointer; }
  .hnav-m summary::-webkit-details-marker { display: none; }
  .hnav-m[open] summary .ic { transform: rotate(180deg); }
  .hnav-m ul { padding-bottom: 8px; }
  .hnav-m .hnav__sec { margin-top: 14px; }
}
@media (max-width: 639px) {
  .hsearch { height: 54px; }
  .hstart { gap: 10px; }
  .hstep { padding: 16px 16px 18px; }
  .hstep__n { margin-bottom: 6px; }
  .hstep b { font-size: 16px; }
  .hstep > span:last-child { font-size: 13.5px; }
  .htiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .htile { padding: 20px; }
  .htile .hsec__ic { margin-bottom: 14px; }
  .hsections__title:not(:first-child) { margin-top: 40px; }
  .hart__title .hsec__ic { width: 44px; height: 44px; }
  .hhelp { flex-direction: column; align-items: stretch; padding: 24px 20px; }
  .hart__lead { font-size: 17px; }
  .hart__body { font-size: 16px; }
  .hart__body h2 { font-size: 21px; }
  .hpager { grid-template-columns: minmax(0, 1fr); }
  .hpager__next { grid-column: auto; }
}

/* ---------- Final call to action ---------- */
.final { padding: 80px 0 120px; }
.final__inner {
  position: relative; overflow: hidden; padding: 96px 32px; text-align: center;
  border-radius: 24px; background: var(--bg-surface-2); border: 1px solid var(--border-subtle);
}
/* The logo's three booking bars, enlarged and faded, as a quiet brand mark */
.final__bars { position: absolute; right: -48px; top: -18px; display: grid; gap: 12px; width: 300px; opacity: .55; pointer-events: none; }
.final__bars i { display: block; height: 26px; border-radius: 13px; }
.final__bars i:nth-child(1) { width: 62%; background: #F6DC8C; }
.final__bars i:nth-child(2) { width: 84%; margin-left: 22%; background: #F1C48A; }
.final__bars i:nth-child(3) { width: 70%; background: #9FD9C4; }
.final__title { position: relative; margin: 0 auto; max-width: 16em; font-size: clamp(32px, 4.2vw, 60px); font-weight: 500; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.final__lead { position: relative; margin: 20px auto 0; max-width: 32em; font-size: 18px; line-height: 1.5; color: var(--text-secondary); text-wrap: balance; }
.signup--center { position: relative; margin: 36px auto 0; background: #fff; }
.final__alt { position: relative; margin: 18px 0 0; font-size: 14px; color: var(--text-muted); }
.final__alt a { color: var(--brand-hover); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(12, 122, 92, .35); }
.final__alt a:hover { text-decoration-color: currentColor; }

/* ---------- Footer ---------- */
.footer { padding: 64px 0 40px; border-top: 1px solid var(--border); background: #fff; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 48px; }
.footer__brand p { margin: 16px 0 24px; max-width: 18em; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.store--sm { height: 48px; padding: 0 18px 0 10px; border-radius: 12px; }
.store--sm .store__logo { width: 28px; height: 28px; }
.store--sm b { font-size: 16px; }
.store--sm small { font-size: 11px; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer__cols h3 { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.footer__cols ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.footer__cols a { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; color: var(--text-secondary); transition: color .15s; }
.footer__cols a:hover { color: var(--text-primary); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--border-subtle); font-size: 14px; color: var(--text-muted);
}
.footer__bottom a { margin-left: auto; color: var(--text-secondary); }
.footer__bottom a:hover { color: var(--text-primary); }

/* ---------- Responsive for the new blocks ---------- */
@media (max-width: 1199px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .segments, .proof { padding: 64px 0 24px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .dirs {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(300px, 46%);
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .dirs::-webkit-scrollbar { display: none; }
  .dcard { scroll-snap-align: start; }
  .fact { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 20px; padding: 24px 28px; }
  .fact span { margin-top: 0; }
  .final { padding: 64px 0 88px; }
  .final__bars { width: 220px; right: -70px; top: -20px; opacity: .4; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .section-title { margin-bottom: 28px; }
  .fact { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dirs { grid-auto-columns: 84%; gap: 12px; }
  .dcard { border-radius: 20px; }
  /* Small cards: the label sits a bit higher, where the roof/building starts further right */
  .dcard__label { top: 5.2cqw; font-size: clamp(11.5px, 3.9cqw, 18px); }
  .final__inner { padding: 64px 20px; border-radius: 18px; }
  .final__lead { font-size: 16px; }
  .final__bars { display: none; }
  .footer { padding: 48px 0 32px; }
  .footer__cols { gap: 24px 12px; }
  .footer__cols a { font-size: 14px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__bottom a { margin-left: 0; }
}

@media (max-width: 374px) {
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .proof__head { margin-bottom: 32px; }
  .marquee { gap: 12px; }
  .marquee__track { --gap: 12px; }
  .tcard { width: 272px; min-height: 168px; padding: 18px; }
  .tcard blockquote { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__row { overflow-x: auto; }
}

/* ---------- Optical text centering ----------
   Golos Text has asymmetric metrics (ascent .98em, descent .22em, cap .70em,
   x-height .53em), so flex centering puts mostly-lowercase Cyrillic below
   the visual middle while icons sit exactly in it. Measured in the browser,
   a .05em lift (padding-bottom .1em) centres the text; icons are pushed back
   down by the same amount. line-height 1.2 equals the font's own ascent +
   descent, so no half-leading rounding shifts the text by half a pixel.
   Native <button>s (.signup__btn) centre their own content and are measured
   centred on cap height without the lift, so they stay out of this list. */
.btn, .nav__trigger, .nav__link, .fl__btn, .app__new, .seg span,
.platforms__list li, .fcard__more, .bk, .chip, .mseg i, .vD__chip, .mmenu__sec summary, .mmenu__plain, .mmenu__links a { padding-bottom: .1em; line-height: 1.2; }
.nav__trigger .ic, .fl__btn .ic, .app__new .ic, .fcard__more .ic, .mmenu__sec summary .ic,
.platforms__list img, .bk img { margin-top: .1em; }
.announce__tag, .fl__chip { padding: calc(4px - .05em) 8px calc(4px + .05em); line-height: 1.2; }

/* 48px buttons with 16px text are already centred on cap height without the lift (measured) */
.btn.btn--xl, .btn.btn--lg { padding-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  :root { --gutter: 40px; }
  .header__bar { gap: 24px; }
  .mega__cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__panel { grid-template-columns: 1fr 280px; }
  .app { left: 6%; right: 6%; }
  .fl--stat { display: none; }
}

@media (max-width: 1023px) {
  :root { --gutter: 24px; --header-h: 64px; }
  .nav, .header__actions { display: none; }
  .burger { display: grid; }
  .mega { display: none !important; }
  .hero { padding: 56px 0 48px; }
  .stage { height: 520px; margin-top: 48px; }
  .app { left: 24px; right: -120px; top: 40px; }
  .cal { --label: 148px; }
  .app__search { display: none; }
  .fl--request { right: 16px; top: auto; bottom: 120px; }
  .fl--clean { display: none; }
  .fl--tg { left: 16px; bottom: 20px; right: 16px; max-width: none; }
}

@media (max-width: 639px) {
  :root { --gutter: 16px; }
  .announce { justify-content: flex-start; padding: 8px 48px 8px 16px; font-size: 13px; }
  .announce__inner { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; min-width: 0; }
  .announce__tag { display: none; }
  .announce__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .announce__link { flex: none; }
  .hero { padding: 40px 0 32px; }
  .hero__eyebrow { font-size: 12px; margin-bottom: 16px; }
  .hero__title { font-size: clamp(28px, 7.9vw, 40px); }
  /* Phones: the pill gets its own line so rotating words never re-wrap the headline */
  .br-phone { display: inline; }
  .hero__lead { margin-top: 16px; }
  .signup { flex-direction: column; margin-top: 28px; padding: 6px; }
  .signup__btn { width: 100%; }
  .stage { height: 330px; margin-top: 36px; border-radius: 16px; }
  .platforms { margin-top: 40px; }
  .platforms__title { font-size: 14px; padding: 0 12px; }
  .platforms__list { gap: 14px 28px; margin-top: 18px; }
  .platforms__list li { font-size: 18px; gap: 8px; }
  .platforms__list img { width: 22px; height: 22px; border-radius: 6px; }
  /* On phones the product reads as a scaled screenshot rather than a cramped live grid */
  .app { left: 16px; right: auto; top: 20px; bottom: auto; width: 920px; height: 560px; transform: scale(.5); transform-origin: 0 0; }
  .app__search { display: flex; }
  .fl--request { left: 16px; right: 16px; width: auto; top: 40px; bottom: auto; }
  .fl--tg { bottom: 16px; }
  .fl--tg small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Support and AI assistant pages ---------- */
.btn--line { border: 1px solid var(--border); background: #fff; color: var(--text-primary); }
.btn--line:hover { border-color: var(--text-muted); }
.sways { padding: 8px 0 40px; }
.sways__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sway { display: flex; flex-direction: column; padding: 32px; border-radius: 22px; background: var(--bg-surface-2); }
.sway .hsec__ic { margin-bottom: 22px; }
.sway h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.sway p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.sway p a { color: var(--brand-hover); font-weight: 500; }
.sway__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 28px; }
.snote { margin-top: 20px; }

.ahero { padding: 72px 0 56px; }
.ahero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: center; }
.ahero__title { margin: 0; font-size: clamp(40px, 4.8vw, 68px); font-weight: 500; line-height: 1.03; letter-spacing: -.045em; text-wrap: balance; }
.ahero__lead { margin: 22px 0 0; max-width: 30em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.ahero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

.chat { display: flex; flex-direction: column; height: 560px; border-radius: 24px; border: 1px solid var(--border); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 56px rgba(15, 23, 42, .08); overflow: hidden; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); }
.chat__ava { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #ECE6FB; color: #7C5CE0; }
.chat__ava .ic { width: 22px; height: 22px; }
.chat__head b { display: block; font-size: 16px; font-weight: 500; }
.chat__head small { display: block; margin-top: 1px; font-size: 13px; color: var(--text-muted); }
.chat__log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 20px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.msg { max-width: 88%; padding: 12px 15px; border-radius: 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.msg p { margin: 0; }
.msg p + p { margin-top: 8px; }
.msg--bot { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--bg-surface-2); color: var(--text-primary); }
.msg--me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--brand); color: #fff; }
.msg__links { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.msg__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 14px; font-weight: 500; color: var(--text-primary); transition: border-color .15s, color .15s; }
.msg__link small { display: block; font-weight: 400; color: var(--text-muted); }
.msg__link .ic { flex: none; width: 16px; height: 16px; color: var(--brand); }
.msg__link:hover { border-color: var(--brand); color: var(--brand-hover); }
.msg--typing { display: inline-flex; gap: 4px; padding: 15px; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typing 1s infinite ease-in-out; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; }
.chat__chips[hidden] { display: none; }
.chat__chips button { height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; transition: border-color .15s, color .15s; }
.chat__chips button:hover { border-color: var(--brand); color: var(--brand-hover); }
.chat__form { display: flex; gap: 8px; margin: 0 16px; padding: 6px 6px 6px 16px; border-radius: 14px; border: 1px solid var(--border); transition: border-color .15s, box-shadow .15s; }
.chat__form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.chat__form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text-primary); }
.chat__form input::placeholder { color: var(--text-muted); }
.chat__send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; cursor: pointer; transition: background-color .15s; }
.chat__send:hover { background: var(--brand-hover); }
.chat__send:disabled { background: var(--border); cursor: default; }
.chat__send .ic { width: 18px; height: 18px; }
.chat__note { margin: 0; padding: 10px 20px 14px; font-size: 12.5px; color: var(--text-muted); text-align: center; }

.afeat { padding: 24px 0 40px; }
.afeat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.afeat__card { padding: 28px; border-radius: 22px; background: var(--bg-surface-2); }
.afeat__card .hsec__ic { margin-bottom: 20px; }
.afeat__card h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.afeat__card p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text-secondary); }
.afeat__where { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; font-size: 15px; color: var(--text-secondary); }
.afeat__where .ic { flex: none; width: 20px; height: 20px; color: var(--text-muted); }

@media (max-width: 1023px) {
  .sways__grid, .afeat__grid { grid-template-columns: minmax(0, 1fr); }
  .ahero { padding-top: 48px; }
  .ahero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 639px) {
  .sway, .afeat__card { padding: 24px 20px; }
  .sway__actions .btn { flex: 1; }
  .chat { height: 520px; border-radius: 20px; }
  .chat__log { padding: 16px; }
  .chat__chips { padding: 0 16px 10px; }
  .chat__form { margin: 0 12px; }
  .chat__form input { font-size: 16px; }
  .afeat__where { align-items: flex-start; }
}