/* Предзапись — public pages (landing, pricing, help) · predza.ru
 * Uses design tokens from tokens.css. 8pt grid, quiet premium.
 */

/* ── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-font-md);
  line-height: var(--ds-lh-base);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1,h2,h3,h4 { color: var(--ds-heading); margin: 0; font-weight: var(--ds-weight-bold); }
p { margin: 0; }

/* ── Container: centered, cap 1440 ────────────── */
.pub-container { max-width: 1440px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }

/* ── Header ───────────────────────────────────── */
.pub-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ds-surface) 92%, transparent);
  border-bottom: var(--ds-border-hairline) solid var(--ds-border);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}
.pub-header-inner {
  max-width: none; margin: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px);
  height: 64px;
}
.pub-brand {
  display: flex; align-items: center; gap: var(--ds-space-2);
  text-decoration: none; font-weight: var(--ds-weight-extra); font-size: var(--ds-font-xl);
  color: var(--ds-heading);
}
.pub-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--ds-radius-sm);
  background: var(--ds-accent); color: var(--ds-on-accent);
  font-size: var(--ds-font-sm); font-weight: var(--ds-weight-extra);
  letter-spacing: .04em;
}
.pub-nav { display: flex; gap: var(--ds-space-5); }
.pub-nav-link {
  font-size: var(--ds-font-sm); font-weight: var(--ds-weight-medium);
  color: var(--ds-muted); text-decoration: none;
  transition: color var(--ds-motion-fast) var(--ds-ease-in);
  padding: var(--ds-space-2) 0;
}
.pub-nav-link:hover { color: var(--ds-heading); }
.pub-nav-link:focus-visible, .pub-link-subtle:focus-visible, .pub-brand:focus-visible { outline: var(--ds-focus-width) solid var(--ds-accent); outline-offset: 2px; border-radius: var(--ds-radius-sm); }
.l-cat-chip:focus-visible, .l-place-card:focus-visible, .l-demo-card:focus-visible, .l-exit-card:focus-visible, .pub-footer-col a:focus-visible { outline: var(--ds-focus-width) solid var(--ds-accent); outline-offset: 2px; border-radius: var(--ds-radius-sm); }
.pub-header-actions { display: flex; align-items: center; gap: var(--ds-space-3); }
.pub-link-subtle {
  font-size: var(--ds-font-sm); font-weight: var(--ds-weight-medium);
  color: var(--ds-muted); text-decoration: none;
  transition: color var(--ds-motion-fast);
}
.pub-link-subtle:hover { color: var(--ds-heading); }

/* ── Theme duo: свет/тьма + тепло/холод ──── */
.ds-theme-duo { display: inline-flex; gap: 6px; align-items: center; }
.ds-theme-seg {
  min-height: 38px; padding: 3px; gap: 2px;
  background: var(--ds-surface-2); border: var(--ds-border-hairline) solid var(--ds-border);
}
.ds-theme-seg button {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; padding: 0; border: none; border-radius: 999px;
  background: transparent; color: var(--ds-muted); cursor: pointer;
  transition: background-color var(--ds-motion-fast), color var(--ds-motion-fast);
}
.ds-theme-seg button:hover { color: var(--ds-text); }
.ds-theme-seg button.on { background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-theme-seg button:focus-visible { outline: var(--ds-focus-width) solid var(--ds-accent); outline-offset: 2px; }
@media (max-width: 768px) {
  .pub-header-actions { display: flex; }
  .pub-header-actions > :not(#ds-theme-toggle) { display: none; }
}

/* Mobile menu toggle */
.pub-menu-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.pub-menu-toggle span {
  display: block; width: 20px; height: 2px; background: var(--ds-heading);
  border-radius: 1px; transition: transform var(--ds-motion-fast), opacity var(--ds-motion-fast);
}
.pub-nav-mobile {
  display: none; flex-direction: column;
  padding: var(--ds-space-4) clamp(16px, 4vw, 48px) var(--ds-space-5);
  border-top: var(--ds-border-hairline) solid var(--ds-border);
  background: var(--ds-surface);
}
.pub-nav-mobile a {
  display: block; padding: var(--ds-space-3) 0;
  font-size: var(--ds-font-md); font-weight: var(--ds-weight-medium);
  color: var(--ds-text); text-decoration: none;
  border-bottom: var(--ds-border-hairline) solid var(--ds-border);
}
.pub-nav-mobile a:last-child { border-bottom: none; }
.pub-nav-mobile.is-open { display: flex; }
.pub-nav-mobile a[aria-current="page"] { color: var(--ds-accent); font-weight: var(--ds-weight-semibold); }

@media (max-width: 768px) {
  .pub-nav { display: none; }
  .pub-header-actions { display: flex; }
  .pub-header-actions > :not(#ds-theme-toggle) { display: none; }
  .pub-menu-toggle { display: flex; }
}

/* ── Shared site chrome (public + cabinet) ────── */
/* Cabinet nav is longer: allow horizontal scroll instead of breaking the 64px header. */
.pub-nav {
  flex: 1 1 auto; min-width: 0; justify-content: center;
  flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pub-nav::-webkit-scrollbar { display: none; }
.pub-nav-link { white-space: nowrap; }
.pub-nav-link.is-active { color: var(--ds-heading); font-weight: var(--ds-weight-semibold); }
.pub-nav-link.is-active::after {
  content: ""; display: block; height: 2px; border-radius: 1px;
  background: var(--ds-accent); margin-top: 2px;
}
@media (max-width: 1100px) {
  .pub-nav { gap: var(--ds-space-4); }
}
/* Signed-in user label in header actions */
.pub-user-email {
  font-size: var(--ds-font-xs); font-weight: var(--ds-weight-medium);
  color: var(--ds-muted); text-decoration: none;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-user-email:hover { color: var(--ds-heading); }
@media (max-width: 1100px) {
  .pub-user-email { display: none; }
}

/* ── Main ─────────────────────────────────────── */
.pub-main { min-height: 60vh; }

/* ── Footer ───────────────────────────────────── */
.pub-footer {
  background: var(--ds-surface-2);
  border-top: var(--ds-border-hairline) solid var(--ds-border);
  padding: var(--ds-space-8) 0 var(--ds-space-5);
}
.pub-footer-inner { max-width: none; margin: 0; padding-inline: clamp(16px, 4vw, 48px); }
.pub-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--ds-space-6);
}
@media (max-width: 768px) {
  .pub-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--ds-space-5); }
}
@media (max-width: 480px) {
  .pub-footer-grid { grid-template-columns: 1fr; }
}
.pub-footer-tagline {
  margin-top: var(--ds-space-3);
  font-size: var(--ds-font-sm); color: var(--ds-muted); max-width: 28ch;
}
.pub-footer-heading {
  font-size: var(--ds-font-xs); font-weight: var(--ds-weight-semibold);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ds-muted); margin-bottom: var(--ds-space-3);
}
.pub-footer-col a {
  display: block; font-size: var(--ds-font-sm);
  color: var(--ds-text); text-decoration: none;
  padding: var(--ds-space-1) 0;
  transition: color var(--ds-motion-fast);
}
.pub-footer-col a:hover { color: var(--ds-accent); }
.pub-footer-bottom {
  margin-top: var(--ds-space-6);
  padding-top: var(--ds-space-4);
  border-top: var(--ds-border-hairline) solid var(--ds-border);
  font-size: var(--ds-font-xs); color: var(--ds-muted);
}

/* ── Hero ─────────────────────────────────────── */
.l-hero {
  padding: clamp(64px, 12vw, 128px) 0 clamp(48px, 8vw, 80px);
  text-align: center;
  background:
    radial-gradient(600px 400px at 20% 0%, color-mix(in srgb, var(--ds-accent) 8%, transparent), transparent 60%),
    radial-gradient(500px 500px at 90% 20%, color-mix(in srgb, var(--ds-accent) 6%, transparent), transparent 60%);
}
.l-hero-kicker {
  text-transform: uppercase; letter-spacing: .18em; font-size: var(--ds-font-xs);
  color: var(--ds-accent); font-weight: var(--ds-weight-semibold);
  margin-bottom: var(--ds-space-4);
}
.l-hero h1 {
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-track-headline);
  max-width: 18ch; margin: 0 auto var(--ds-space-4);
}
.l-hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--ds-muted); max-width: 50ch; margin: 0 auto var(--ds-space-6);
  line-height: var(--ds-lh-loose);
}
.l-hero-actions {
  display: flex; gap: var(--ds-space-3); justify-content: center; flex-wrap: wrap;
}
/* Hero split (вариант №1): текст слева, живое демо справа */
.l-hero-split {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 56px);
  align-items: center; text-align: left;
}
@media (max-width: 900px) { .l-hero-split { grid-template-columns: 1fr; } }
.l-hero-copy h1 {
  margin: 0 0 var(--ds-space-4); max-width: 22ch;
  font-size: clamp(30px, 4.2vw, 50px);
  text-wrap: balance;
}
.l-hero-copy h1 em { font-style: normal; color: var(--ds-accent); }
.l-hero-copy .l-hero-sub { margin: 0 0 var(--ds-space-5); }
.l-hero-copy .l-hero-actions { justify-content: flex-start; }
.l-hero-proof { font-size: var(--ds-font-sm); color: var(--ds-muted); margin: var(--ds-space-5) 0 0; }
.l-hero-proof b { color: var(--ds-heading); }
.l-hero-demo { min-width: 0; }
.l-demo-widget {
  background: var(--ds-surface); border: var(--ds-border-hairline) solid var(--ds-border);
  border-radius: 20px; box-shadow: var(--ds-shadow-2); padding: var(--ds-space-5);
  max-width: 440px; margin-left: auto; width: 100%;
}
@media (max-width: 900px) { .l-demo-widget { margin: 0 auto; } }
.l-demo-widget h3 { font-size: var(--ds-font-md); margin: 0 0 2px; }
.l-demo-sub { font-size: var(--ds-font-sm); color: var(--ds-muted); margin: 0 0 var(--ds-space-4); }
.l-demo-days { display: flex; gap: var(--ds-space-2); margin-bottom: var(--ds-space-3); }
.l-demo-day {
  flex: 1; border: var(--ds-border-hairline) solid var(--ds-border); border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); padding: var(--ds-space-2) 0; cursor: pointer;
  font-family: inherit; min-height: 44px;
}
.l-demo-day span { display: block; font-size: 11px; color: var(--ds-muted); text-transform: uppercase; }
.l-demo-day b { display: block; font-size: var(--ds-font-md); font-variant-numeric: tabular-nums; }
.l-demo-day.on { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); }
.l-demo-day.on span { color: var(--ds-accent-050); }
.l-demo-day:focus-visible { outline: var(--ds-focus-width) solid var(--ds-accent); outline-offset: 2px; }
.l-demo-slots { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-bottom: var(--ds-space-4); min-height: 44px; }
.l-demo-slot {
  border: var(--ds-border-hairline) solid var(--ds-border); background: var(--ds-surface);
  border-radius: var(--ds-radius-sm); min-height: 44px; padding: var(--ds-space-2) var(--ds-space-3);
  font-weight: var(--ds-weight-semibold); font-size: var(--ds-font-sm); cursor: pointer;
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.l-demo-slot.off { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.l-demo-slot.sel { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); }
.l-demo-slot:focus-visible { outline: var(--ds-focus-width) solid var(--ds-accent); outline-offset: 2px; }
.l-demo-empty { font-size: var(--ds-font-sm); color: var(--ds-muted); }
.l-demo-total {
  display: flex; justify-content: space-between; align-items: center;
  border-top: var(--ds-border-hairline) solid var(--ds-border); padding-top: var(--ds-space-3);
  font-size: var(--ds-font-sm); color: var(--ds-muted);
}
.l-demo-total b { font-size: var(--ds-font-xl); color: var(--ds-heading); }
.l-hero-trust {
  display: flex; align-items: center; justify-content: center; gap: var(--ds-space-3);
  margin-top: var(--ds-space-5); flex-wrap: wrap;
  font-size: var(--ds-font-sm); color: var(--ds-muted);
}
.l-hero-trust-num { font-weight: var(--ds-weight-bold); color: var(--ds-heading); font-variant-numeric: tabular-nums; }
.l-hero-trust-dot { color: var(--ds-faint); }
.l-hero-media { overflow: hidden; border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-1); background: var(--ds-surface); border: 1px solid var(--ds-border); }
.l-hero-media img { display: block; width: 100%; height: auto; }
.l-sticky-cta {
  position: sticky; bottom: 0; z-index: 40;
  display: none; justify-content: center; padding: var(--ds-space-3) clamp(16px,4vw,32px);
  background: color-mix(in srgb, var(--ds-surface) 92%, transparent);
  border-top: var(--ds-border-hairline) solid var(--ds-border);
  backdrop-filter: blur(10px);
}
.l-sticky-cta.is-visible { display: none; }
@media (max-width: 768px) {
  .l-sticky-cta.is-visible { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Stats bar ────────────────────────────────── */
.l-stats {
  padding: var(--ds-space-6) 0;
  border-top: var(--ds-border-hairline) solid var(--ds-border);
  border-bottom: var(--ds-border-hairline) solid var(--ds-border);
}
.l-stats-grid {
  display: flex; justify-content: center; gap: clamp(32px, 6vw, 80px);
  flex-wrap: wrap;
}
.l-stat { text-align: center; }
.l-stat-num {
  display: block; font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--ds-weight-extra); color: var(--ds-heading);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.l-stat-label {
  font-size: var(--ds-font-sm); color: var(--ds-muted);
  margin-top: var(--ds-space-2);
}

/* ── Section defaults ─────────────────────────── */
.l-section { padding: clamp(48px, 9vw, 112px) 0; }
.l-section-tight { padding: clamp(32px, 6vw, 64px) 0; }
.l-section-title {
  font-size: clamp(24px, 3.5vw, 40px);
  letter-spacing: var(--ds-track-title);
  margin-bottom: var(--ds-space-3);
}
.l-section-sub {
  font-size: var(--ds-font-lg); color: var(--ds-muted);
  max-width: 50ch; margin-bottom: var(--ds-space-6);
}
.l-section-center { text-align: center; }
.l-section-center .l-section-sub { margin-left: auto; margin-right: auto; }

/* ── Steps (how it works) ────────────────────── */
.l-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ds-space-5);
  counter-reset: step;
}
.l-step {
  position: relative; padding: var(--ds-space-5);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: var(--ds-border-hairline) solid var(--ds-border);
  counter-increment: step;
}
.l-step::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--ds-radius-full);
  background: var(--ds-accent-050); color: var(--ds-accent);
  font-weight: var(--ds-weight-bold); font-size: var(--ds-font-md);
  margin-bottom: var(--ds-space-4);
}
.l-step h3 {
  font-size: var(--ds-font-lg); margin-bottom: var(--ds-space-2);
}
.l-step p { font-size: var(--ds-font-sm); color: var(--ds-muted); line-height: var(--ds-lh-loose); }

/* ── Market showcase ──────────────────────────── */
.l-categories {
  display: flex; gap: var(--ds-space-2); flex-wrap: wrap;
  justify-content: center; margin-bottom: var(--ds-space-6);
}
.l-cat-chip {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  padding: var(--ds-space-2) var(--ds-space-3);
  min-height: 44px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface-2); font-size: var(--ds-font-sm);
  font-weight: var(--ds-weight-medium); color: var(--ds-text);
  text-decoration: none;
  transition: background var(--ds-motion-fast), color var(--ds-motion-fast);
}
.l-cat-chip:hover { background: var(--ds-accent-050); color: var(--ds-accent); }
.l-cat-chip .ds-num { font-size: var(--ds-font-xs); color: var(--ds-muted); }

.l-places-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--ds-space-4);
}
@media (min-width: 1100px) {
  .l-places-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
}
.l-place-card {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: var(--ds-border-hairline) solid var(--ds-border);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow var(--ds-motion-base) var(--ds-ease-in),
    transform var(--ds-motion-base) var(--ds-ease-in);
}
.l-place-card:hover {
  box-shadow: var(--ds-shadow-1);
  border-color: var(--ds-accent-400);
}
.l-place-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: var(--ds-surface-2);
}
.l-place-body { padding: var(--ds-space-4); }
.l-place-cat {
  font-size: var(--ds-font-xs); font-weight: var(--ds-weight-semibold);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ds-accent); margin-bottom: var(--ds-space-1);
}
.l-place-name {
  font-size: var(--ds-font-lg); font-weight: var(--ds-weight-bold);
  color: var(--ds-heading); margin-bottom: var(--ds-space-1);
}
.l-place-addr { font-size: var(--ds-font-sm); color: var(--ds-muted); margin-bottom: var(--ds-space-2); }
.l-place-meta {
  display: flex; align-items: center; gap: var(--ds-space-3);
  font-size: var(--ds-font-sm);
}
.l-place-rating { font-weight: var(--ds-weight-semibold); color: var(--ds-heading); }
.l-place-rating-count { color: var(--ds-muted); }
.l-place-price { margin-left: auto; font-weight: var(--ds-weight-semibold); color: var(--ds-heading); }

/* ── Demo cases ───────────────────────────────── */
.l-demos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--ds-space-4);
}
@media (min-width: 1100px) {
  .l-demos-grid { grid-template-columns: repeat(5, 1fr); }
}
.l-demo-card {
  display: block; border-radius: var(--ds-radius-lg);
  overflow: hidden; text-decoration: none;
  background: var(--ds-surface);
  border: var(--ds-border-hairline) solid var(--ds-border);
  transition: box-shadow var(--ds-motion-base) var(--ds-ease-in),
    transform var(--ds-motion-base) var(--ds-ease-in);
}
.l-demo-card:hover {
  box-shadow: var(--ds-shadow-1); border-color: var(--ds-accent-400);
}
.l-demo-card img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
.l-demo-card-body {
  padding: var(--ds-space-3) var(--ds-space-4);
}
.l-demo-card-body h3 {
  font-size: var(--ds-font-md); margin-bottom: var(--ds-space-1);
}
.l-demo-card-body p { font-size: var(--ds-font-xs); color: var(--ds-muted); }

/* ── Benefits ─────────────────────────────────── */
.l-benefits-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--ds-space-4);
}
@media (min-width: 1100px) {
  .l-benefits-grid { grid-template-columns: repeat(3, 1fr); }
}
.l-benefit {
  padding: var(--ds-space-5);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: var(--ds-border-hairline) solid var(--ds-border);
}
.l-benefit-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--ds-radius-md);
  background: var(--ds-accent-050);
  font-size: 24px; margin-bottom: var(--ds-space-3);
}
.l-benefit h3 { font-size: var(--ds-font-md); margin-bottom: var(--ds-space-2); }
.l-benefit p { font-size: var(--ds-font-sm); color: var(--ds-muted); line-height: var(--ds-lh-loose); }

/* ── Reviews ──────────────────────────────────── */
.l-reviews-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ds-space-4);
}
.l-review-card {
  padding: var(--ds-space-5);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: var(--ds-border-hairline) solid var(--ds-border);
}
.l-review-stars { color: var(--ds-accent); font-size: var(--ds-font-md); margin-bottom: var(--ds-space-2); letter-spacing: 2px; }
.l-review-text { font-size: var(--ds-font-sm); line-height: var(--ds-lh-loose); margin-bottom: var(--ds-space-3); }
.l-review-author { font-size: var(--ds-font-xs); color: var(--ds-muted); }
.l-review-author strong { color: var(--ds-heading); font-weight: var(--ds-weight-semibold); }

/* ── Pricing ──────────────────────────────────── */
.l-pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ds-space-4); align-items: start;
}
.l-pricing-card {
  padding: var(--ds-space-6);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: var(--ds-border-hairline) solid var(--ds-border);
  text-align: center;
  position: relative;
}
.l-pricing-card--featured {
  border-color: transparent;
  box-shadow: var(--ds-shadow-2);
  background: linear-gradient(160deg, var(--ds-accent) 0%, color-mix(in srgb, var(--ds-accent) 55%, black) 100%);
  color: #fff;
}
.l-pricing-card--featured::before { display: none; }
.l-pricing-card--featured .l-pricing-name,
.l-pricing-card--featured .l-pricing-price { color: #fff; }
.l-pricing-card--featured .l-pricing-price span { color: rgba(255, 255, 255, 0.75); }
.l-pricing-card--featured .l-pricing-desc { color: rgba(255, 255, 255, 0.85); }
.l-pricing-card--featured .l-pricing-features li { border-bottom-color: rgba(255, 255, 255, 0.18); }
.l-pricing-card--featured .l-pricing-features .check { color: #fff; }
.l-pricing-card--featured .l-pricing-features .cross { color: rgba(255, 255, 255, 0.5); }
.l-pricing-name {
  font-size: var(--ds-font-lg); font-weight: var(--ds-weight-bold);
  margin-bottom: var(--ds-space-2);
}
.l-pricing-price {
  font-size: clamp(32px, 4vw, 48px); font-weight: var(--ds-weight-extra);
  color: var(--ds-heading); font-variant-numeric: tabular-nums;
  margin-bottom: var(--ds-space-1);
}
.l-pricing-price span { font-size: var(--ds-font-sm); font-weight: var(--ds-weight-regular); color: var(--ds-muted); }
.l-pricing-desc { font-size: var(--ds-font-sm); color: var(--ds-muted); margin-bottom: var(--ds-space-5); }
.l-pricing-features { list-style: none; padding: 0; margin: 0 0 var(--ds-space-5); text-align: left; }
.l-pricing-features li {
  padding: var(--ds-space-2) 0;
  font-size: var(--ds-font-sm);
  border-bottom: var(--ds-border-hairline) solid var(--ds-border);
  display: flex; align-items: center; gap: var(--ds-space-2);
}
.l-pricing-features li:last-child { border-bottom: none; }
.l-pricing-features .check { color: var(--ds-success); font-weight: var(--ds-weight-bold); }
.l-pricing-features .cross { color: var(--ds-faint); }
.l-pricing-card--featured { transform: translateY(-8px); }
.l-pricing-recommend {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-size: var(--ds-font-xs); font-weight: var(--ds-weight-bold);
  color: #1A1A1A; background: #fff;
  padding: 4px 14px; border-radius: var(--ds-radius-full);
  letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: var(--ds-shadow-1);
}
@media (max-width: 560px) {
  .l-pricing-card--featured { transform: none; }
}

/* ── Dark CTA finale ──────────────────────────── */
.l-cta-dark {
  background: linear-gradient(150deg, var(--ds-accent) 0%, color-mix(in srgb, var(--ds-accent) 55%, black) 100%);
  border-radius: var(--ds-radius-lg);
  color: #fff; text-align: center;
  padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 48px);
  box-shadow: var(--ds-shadow-2);
}
.l-cta-dark h2 { color: #fff; margin-bottom: var(--ds-space-3); }
.l-cta-dark p { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--ds-space-5); }
.l-cta-dark .ds-btn-primary {
  background: #fff; color: var(--ds-accent-700); border-color: transparent;
}
.l-cta-dark .ds-btn-outline {
  color: #fff; border-color: rgba(255, 255, 255, 0.5); background: transparent;
}

/* ── Input (design system) ────────────────────── */
.ds-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: var(--ds-border-strong) solid transparent;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  box-shadow: inset 0 0 0 1px var(--ds-border);
  font: inherit;
  font-size: var(--ds-font-md);
  color: var(--ds-text);
  transition: box-shadow var(--ds-motion-fast) var(--ds-ease-out);
}
.ds-input::placeholder { color: var(--ds-faint); }
.ds-input:hover { box-shadow: inset 0 0 0 1px var(--ds-border-strong); }
.ds-input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ds-accent), 0 0 0 var(--ds-focus-width) var(--ds-accent-050);
}

/* ── Accordion (design system) ────────────────── */
.ds-accordion { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.ds-acc-item {
  border: var(--ds-border-hairline) solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  overflow: hidden;
}
.ds-acc-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3);
  padding: var(--ds-space-4) var(--ds-space-5);
  font-weight: var(--ds-weight-semibold); color: var(--ds-heading);
}
.ds-acc-summary::-webkit-details-marker { display: none; }
.ds-acc-summary::after {
  content: '+'; font-size: var(--ds-font-xl); font-weight: var(--ds-weight-regular);
  color: var(--ds-accent); transition: transform var(--ds-motion-base) var(--ds-ease-out);
  line-height: 1;
}
.ds-acc-item[open] .ds-acc-summary::after { transform: rotate(45deg); }
.ds-acc-summary:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-accent);
  outline-offset: -2px; border-radius: var(--ds-radius-md);
}
.ds-acc-body {
  margin: 0; padding: 0 var(--ds-space-5) var(--ds-space-4);
  font-size: var(--ds-font-sm); color: var(--ds-muted); line-height: var(--ds-lh-loose);
}

/* ── CTA exit blocks ──────────────────────────── */
.l-exits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-space-4);
}
.l-exit-card {
  display: flex; flex-direction: column;
  padding: var(--ds-space-5);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-2);
  text-decoration: none;
  transition: background var(--ds-motion-fast);
}
.l-exit-card:hover { background: var(--ds-accent-050); }
.l-exit-card h3 { font-size: var(--ds-font-md); margin-bottom: var(--ds-space-1); }
.l-exit-card p { font-size: var(--ds-font-sm); color: var(--ds-muted); }

/* ── Reveal (motion.js) ────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--ds-motion-slow) var(--ds-ease-in), transform var(--ds-motion-slow) var(--ds-ease-in); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none !important; } }

/* ── Utility ──────────────────────────────────── */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.visually-hidden:focus, .visually-hidden:focus-visible {
  width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; white-space: normal !important;
  padding: 8px 12px !important; background: var(--ds-accent) !important; color: var(--ds-on-accent) !important; border-radius: var(--ds-radius-md) !important;
  z-index: 9999 !important; left: 12px !important; top: 12px !important;
}
.l-empty {
  text-align: center; padding: var(--ds-space-6);
  color: var(--ds-muted); font-size: var(--ds-font-sm);
}

/* ── Cookie Banner ────────────────────────────── */
.cb-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: var(--ds-surface);
  border-top: var(--ds-border-hairline) solid var(--ds-border);
  box-shadow: 0 -4px 24px rgba(28,27,25,.12);
  padding: var(--ds-space-4) clamp(16px, 4vw, 32px);
  display: none;
}
.cb-banner.is-visible { display: block; }
.cb-inner {
  max-width: none; margin: 0;
  display: flex; align-items: center; gap: var(--ds-space-4);
  flex-wrap: wrap;
}
.cb-text {
  flex: 1; min-width: 280px;
  font-size: var(--ds-font-sm); color: var(--ds-text); line-height: var(--ds-lh-loose);
}
.cb-text a { color: var(--ds-accent); text-decoration: underline; }
.cb-actions { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; }
.cb-btn {
  min-height: 44px; padding: 8px 20px;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-font-sm); font-weight: var(--ds-weight-semibold);
  cursor: pointer; border: var(--ds-border-hairline) solid transparent;
  transition: background var(--ds-motion-fast), color var(--ds-motion-fast);
}
.cb-btn-necessary {
  background: var(--ds-surface-2); color: var(--ds-text);
  border-color: var(--ds-border);
}
.cb-btn-necessary:hover { background: var(--ds-neutral-2); }
.cb-btn-accept {
  background: var(--ds-accent); color: var(--ds-on-accent);
}
.cb-btn-accept:hover { background: var(--ds-accent-hover); color: var(--ds-on-accent); }
.cb-settings-link {
  font-size: var(--ds-font-xs); color: var(--ds-muted);
  text-decoration: none; cursor: pointer;
  transition: color var(--ds-motion-fast);
}
.cb-settings-link:hover { color: var(--ds-text); }

@media (max-width: 600px) {
  .cb-inner { flex-direction: column; align-items: stretch; }
  .cb-actions { justify-content: stretch; }
  .cb-actions .cb-btn { flex: 1; }
}

/* ── Breaking news: лента «сегодня» вверху кабинета ──── */
.cab-ticker {
  display: flex; align-items: center; gap: 12px;
  background: var(--ds-surface); border-bottom: var(--ds-border-hairline) solid var(--ds-border);
  padding: 9px clamp(16px, 4vw, 48px); font-size: 13px;
}
.cab-ticker[hidden] { display: none; }
.cab-ticker-live {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: #111318; color: #fff; border-radius: 999px; padding: 4px 12px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em;
}
.cab-ticker-live i { width: 8px; height: 8px; border-radius: 50%; background: #FF4D4D; animation: lz-tblink 1.4s infinite; }
.cab-ticker-title { flex-shrink: 0; color: var(--ds-muted); white-space: nowrap; }
.cab-ticker-title b { color: var(--ds-heading); font-variant-numeric: tabular-nums; }
.cab-ticker-view {
  flex: 1; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent);
}
.cab-ticker-track { display: inline-flex; gap: 8px; width: max-content; animation: cab-scroll 30s linear infinite; }
.cab-ticker-view:hover .cab-ticker-track { animation-play-state: paused; }
@keyframes cab-scroll { to { transform: translateX(-50%); } }
.cab-chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  border: 1px solid var(--ds-border); border-radius: 999px; padding: 5px 14px;
  background: var(--ds-surface-2); font-size: 12.5px;
}
.cab-chip b { font-variant-numeric: tabular-nums; }
.cab-chip .cab-place { color: var(--ds-muted); }
.cab-chip.cab-new { border-color: var(--ds-accent); animation: cab-flash 2s; }
@keyframes cab-flash { 0% { background: var(--ds-accent-050); } 100% { background: var(--ds-surface-2); } }
.cab-empty { color: var(--ds-muted); font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) {
  .cab-ticker-track, .cab-ticker-live i, .cab-chip.cab-new { animation: none !important; }
  .cab-ticker-view { overflow-x: auto; }
}

/* ── Hero-лента: 3 косые заполненные строки ──── */
.hz-hero { text-align: center; padding: clamp(56px, 9vw, 104px) 0 0; overflow: hidden; }
.hz-hero h1 {
  font-size: clamp(34px, 5.2vw, 62px); line-height: 1.06;
  letter-spacing: var(--ds-track-headline);
  max-width: 22ch; margin: 0 auto var(--ds-space-4); text-wrap: balance;
}
.hz-hero h1 em { font-style: normal; color: var(--ds-accent); }
.hz-tilt { transform: rotate(-2deg) scale(1.03); margin-top: clamp(28px, 5vw, 56px); }
.hz-feed {
  overflow: hidden; padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.hz-row { display: flex; gap: 10px; width: max-content; padding: 6px 0; animation: hz-scroll 32s linear infinite; }
.hz-row.rev { animation-direction: reverse; }
.hz-feed:hover .hz-row { animation-play-state: paused; }
@keyframes hz-scroll { to { transform: translateX(-50%); } }
.hz-ticket {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--ds-surface); border: var(--ds-border-hairline) solid var(--ds-border);
  border-radius: var(--ds-radius-full); padding: 10px 20px;
  font-size: var(--ds-font-sm); font-weight: var(--ds-weight-semibold); color: var(--ds-text);
  box-shadow: var(--ds-shadow-1);
}
.hz-ticket b { color: var(--ds-accent); font-variant-numeric: tabular-nums; }
.hz-ticket.dim { opacity: 0.72; }
@media (prefers-reduced-motion: reduce) {
  .hz-row { animation: none; }
  .hz-feed { overflow-x: auto; }
  .hz-tilt { transform: none; }
}

/* ── Looks: витрина вариантов hero (/looks) ──── */
.looks-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ds-surface); border-bottom: var(--ds-border-hairline) solid var(--ds-border);
  padding: 12px 0; font-size: var(--ds-font-sm); color: var(--ds-muted);
}
.looks-nav b { color: var(--ds-heading); }
.look-block { border-bottom: var(--ds-border-hairline) solid var(--ds-border); }
.look-label {
  max-width: 1200px; margin: 0 auto; padding: 28px 24px 0;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.look-label h2 { font-size: var(--ds-font-xl); margin: 0; }
.look-label p { font-size: var(--ds-font-sm); color: var(--ds-muted); margin: 0; }
.look-frame { padding: 8px 0 40px; }

/* Вариант B — тёплый премиум */
.look-b {
  --ds-accent: #C2410C; --ds-accent-hover: #9A3412;
  --ds-accent-500: #C2410C; --ds-accent-600: #9A3412;
  --ds-accent-050: #FBE9DC; --ds-on-accent: #fff;
  background: #FAF6F0;
}
.look-b .l-hero { background: none; }
.look-b .l-hero-copy h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700; letter-spacing: 0;
}
.look-b .l-demo-widget { background: #FFFDF9; border-radius: 16px; }
.look-b .l-demo-browser {
  display: flex; gap: 6px; padding: 10px 12px; margin: calc(-1 * var(--ds-space-5)) calc(-1 * var(--ds-space-5)) var(--ds-space-4);
  border-bottom: var(--ds-border-hairline) solid var(--ds-border);
}
.look-b .l-demo-browser i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ds-border-strong); display: block;
}
.look-b .l-demo-browser i:first-child { background: #C2410C; }

/* Вариант C — ночь */
.look-c {
  --ds-surface: #0E2420; --ds-surface-2: #143129;
  --ds-text: #EAF4F0; --ds-heading: #fff; --ds-muted: #9DB8B0;
  --ds-border: rgba(255, 255, 255, 0.14); --ds-border-strong: rgba(255, 255, 255, 0.28);
  --ds-accent: #34D399; --ds-accent-hover: #6EE7B7;
  --ds-accent-500: #34D399; --ds-accent-600: #6EE7B7;
  --ds-accent-050: rgba(52, 211, 153, 0.14); --ds-on-accent: #06231B;
  background: #0B1F1A;
}
.look-c .l-hero { background: none; }
.look-c .l-hero-copy h1 em { color: var(--ds-accent); }
.look-c .l-demo-widget { background: #102825; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); }
.look-c .l-demo-day { background: transparent; color: var(--ds-text); }
.look-c .l-demo-slot { background: transparent; color: var(--ds-text); }
.look-c .l-cta-dark { background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.3); }

/* Вариант D — графит / editorial */
.look-d {
  --ds-accent: #111111; --ds-accent-hover: #333333;
  --ds-accent-500: #111111; --ds-accent-600: #333333;
  --ds-accent-050: #F0F0F0; --ds-on-accent: #fff;
  background: #fff;
}
.look-d .l-hero { background: none; }
.look-d .l-hero-copy h1 { letter-spacing: -0.02em; }
.look-d .l-hero-copy h1 em {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 5px; text-underline-offset: 6px;
}
.look-d .l-demo-widget { border-radius: 8px; }
.look-d .l-demo-day.on, .look-d .l-demo-slot.sel { background: #111; border-color: #111; }

/* Вариант E — синий траст */
.look-e {
  --ds-accent: #1D4ED8; --ds-accent-hover: #1E40AF;
  --ds-accent-500: #1D4ED8; --ds-accent-600: #1E40AF;
  --ds-accent-050: #E3EBFB; --ds-on-accent: #fff;
  background: linear-gradient(180deg, #F2F6FE 0%, #fff 70%);
}
.look-e .l-hero { background: none; }
.look-e .l-trust-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--ds-space-4); }
.look-e .l-trust-chips span {
  font-size: var(--ds-font-xs); font-weight: var(--ds-weight-semibold);
  border: 1px solid var(--ds-border-strong); border-radius: 999px; padding: 4px 12px;
  color: var(--ds-text); background: var(--ds-surface);
}

/* ── Looks2: синтез 3-в-1 (календарь+чат+карта, светлая/тёмная) ──── */
.lz-fx { background: var(--ds-surface); color: var(--ds-text); }
.lz-fx-copy { text-align: center; max-width: 760px; margin: 0 auto 30px; padding: 0 24px; }
.lz-deck { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lz-browser { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 20px; box-shadow: var(--ds-shadow-2); overflow: hidden; }
.lz-browser-bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--ds-border); }
.lz-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ds-border-strong); }
.lz-browser-bar i:first-child { background: var(--ds-accent); }
.lz-panels { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 0; position: relative; }
@media (max-width: 900px) { .lz-panels { grid-template-columns: 1fr; } }
.lz-panel { padding: 22px; min-width: 0; }
.lz-panel + .lz-panel { border-left: 1px solid var(--ds-border); }
@media (max-width: 900px) { .lz-panel + .lz-panel { border-left: none; border-top: 1px solid var(--ds-border); } }
.lz-panel h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ds-muted); margin: 0 0 14px; }
.lz-panel.chat { background: var(--ds-surface-2); margin: -6px 0; border: 1px solid var(--ds-accent); border-radius: 16px; z-index: 1; }
@media (max-width: 900px) { .lz-panel.chat { margin: 0; } .lz-panels { gap: 12px; padding: 12px; } }
.lz-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.lz-day { border: 1px solid var(--ds-border); border-radius: 9px; text-align: center; padding: 7px 2px; font-size: 12px; cursor: pointer; font-family: inherit; background: var(--ds-surface); color: var(--ds-text); position: relative; }
.lz-day small { display: block; font-size: 10px; color: var(--ds-muted); }
.lz-day.free { border-color: var(--ds-accent); }
.lz-day.free::after { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-accent); margin: 4px auto 0; }
.lz-day.sel { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
.lz-day.busy { opacity: 0.45; }
.lz-day:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.lz-today { font-size: 13px; margin-top: 12px; }
.lz-today b { color: var(--ds-accent); }
.lz-chatbox { display: flex; flex-direction: column; gap: 8px; }
.lz-cmsg { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: 13px; }
.lz-cmsg.them { background: var(--ds-surface); border: 1px solid var(--ds-border); border-bottom-left-radius: 4px; align-self: flex-start; }
.lz-cmsg.me { background: var(--ds-accent); color: var(--ds-on-accent); border-bottom-right-radius: 4px; align-self: flex-end; }
.lz-slotmini { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 12px; padding: 12px; font-size: 13px; align-self: stretch; transition: border-color 200ms, transform 200ms; }
.lz-slotmini.hot { border-color: var(--ds-accent); transform: scale(1.02); }
.lz-slotmini .pay { display: inline-block; margin-top: 8px; background: var(--ds-accent); color: var(--ds-on-accent); border-radius: 8px; padding: 7px 16px; font-weight: 800; font-size: 13px; border: none; cursor: pointer; font-family: inherit; }
.lz-slotmini.done .pay { background: transparent; border: 1px solid var(--ds-accent); color: var(--ds-accent); pointer-events: none; }
.lz-route { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--ds-border-strong) 0 8px, transparent 8px 16px); margin: 0 24px; }
.lz-route::after { content: ''; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ds-accent); animation: lz-travel 6s linear infinite; }
@keyframes lz-travel { to { left: calc(100% - 10px); } }
@media (max-width: 900px) { .lz-route { display: none; } }
.lz-mapfx { width: 100%; height: auto; display: block; }
.lz-mapfx .st { stroke: var(--ds-border-strong); }
.lz-mapfx .blk { fill: var(--ds-surface-2); }
.lz-pinfx { cursor: pointer; }
.lz-pinfx .ring { transform-box: fill-box; transform-origin: center; animation: lz-ring 2.6s ease-out infinite; }
.lz-addr { font-size: 12.5px; color: var(--ds-muted); margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .lz-route::after, .lz-pinfx .ring { animation: none !important; }
  .lz-pinfx .ring { opacity: 0.4; }
}

/* ── Looks5: касса Ф2 + карта Ф4 фоном (/looks5) ──── */
.ly-stage { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 0;
  --ly-bg: #fff; --ly-ink: #111827; --ly-mute: #6B7280; --ly-line: #E5E7EB;
  --ly-accent: #16A34A; --ly-glow: rgba(22, 163, 74, 0.4);
  background: var(--ly-bg); color: var(--ly-ink); transition: background 300ms, color 300ms; }
.ly-stage.night { --ly-bg: #0B1020; --ly-ink: #E8EEF7; --ly-mute: #8FA1B8; --ly-line: #22314B;
  --ly-accent: #34D399; --ly-glow: rgba(52, 211, 153, 0.5); }
.ly-bgmap { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ly-bgmap .st { stroke: var(--ly-line); }
.ly-dot { pointer-events: auto; cursor: pointer; }
.ly-dot circle.core { transition: opacity 200ms; }
.ly-dot .halo { transform-box: fill-box; transform-origin: center; animation: lz-ring 2.6s ease-out infinite; }
.ly-dot.hit circle.core { opacity: 0.3; }
.ly-dot.hit .halo { display: none; }
.ly-dot:focus-visible { outline: 2px solid var(--ly-accent); outline-offset: 3px; }
.ly-content { position: relative; text-align: center; max-width: 920px; margin: 0 auto; padding: 0 24px; }
.ly-sum { font-size: clamp(64px, 11vw, 150px); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ly-accent); line-height: 1; margin: 8px 0 4px; }
.ly-neon .ly-sum { text-shadow: 0 0 34px var(--ly-glow); }
.ly-neon .ly-dot circle.core { filter: drop-shadow(0 0 7px var(--ly-glow)); }
.ly-feed { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; min-height: 36px; }
.ly-feed span { font-size: 12.5px; font-weight: 700; border: 1px solid var(--ly-line); background: var(--ly-bg); border-radius: 999px; padding: 6px 14px; animation: lf-pop 300ms; }
.ly-feed span b { color: var(--ly-accent); }
.ly-bar { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.ly-theme { display: inline-flex; border: 1px solid var(--ly-line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--ly-bg); }
.ly-theme button { border: none; background: transparent; color: var(--ly-mute); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ly-theme button.on { background: var(--ly-ink); color: var(--ly-bg); }
.ly-minirow { margin-top: 30px; }
/* палитры вариантов */
.ly-y3 { --ly-bg: #FFF7E5; --ly-ink: #3A2A12; --ly-mute: #8A7551; --ly-line: #F0DFC0; --ly-accent: #C2410C; --ly-glow: rgba(194, 65, 12, 0.35); }
.ly-y3.night { --ly-bg: #1C1310; --ly-ink: #F5EDE3; --ly-mute: #A89880; --ly-line: #3A2E22; --ly-accent: #FB923C; --ly-glow: rgba(251, 146, 60, 0.45); }
.ly-y4 { --ly-bg: #F2F6FE; --ly-ink: #16233F; --ly-mute: #5B6B8C; --ly-line: #D6E2F5; --ly-accent: #1D4ED8; --ly-glow: rgba(29, 78, 216, 0.35); }
.ly-y4.night { --ly-bg: #0A1428; --ly-ink: #E6EDF9; --ly-mute: #8494B3; --ly-line: #1E2F52; --ly-accent: #60A5FA; --ly-glow: rgba(96, 165, 250, 0.5); }
.ly-y5 { --ly-bg: #fff; --ly-ink: #111; --ly-mute: #6B6B6B; --ly-line: #E5E5E5; --ly-accent: #B58900; --ly-glow: rgba(181, 137, 0, 0.35); }
.ly-y5.night { --ly-bg: #0A0A0A; --ly-ink: #F5F5F5; --ly-mute: #8E8E8E; --ly-line: #2A2A2A; --ly-accent: #D6FF3F; --ly-glow: rgba(214, 255, 63, 0.35); }
.ly-y5 .ly-sum { letter-spacing: -0.02em; }
@media (prefers-reduced-motion: reduce) {
  .ly-dot .halo, .ly-feed span { animation: none !important; }
}

/* ── Looks3: 10 вариантов «Лента записей» (/looks3) ──── */
.lf-stage { padding: clamp(40px, 6vw, 88px) 0; overflow: hidden; position: relative; }
.lf-grid { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .lf-grid { grid-template-columns: 1fr; } }
.lf-h { font-size: clamp(28px, 4vw, 50px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; }
.lf-center { text-align: center; max-width: 880px; margin: 0 auto; padding: 0 24px; }
.lf-ticket { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.lf-ticket b { font-variant-numeric: tabular-nums; }
.lf-rowmarq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lf-rowmarq > div { display: flex; gap: 10px; width: max-content; padding: 5px 0; animation: lz-scroll 26s linear infinite; }
.lf-rowmarq > div.rev { animation-direction: reverse; }
.lf-rowmarq:hover > div { animation-play-state: paused; }

/* Ф1: вертикальный столб */
.lf-f1 { background: #F1F5F9; color: #0F172A; }
.lf-col { height: 380px; width: 300px; margin: 0 auto; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.lf-col > div { display: flex; flex-direction: column; gap: 10px; animation: lf-up 18s linear infinite; }
.lf-col:hover > div { animation-play-state: paused; }
@keyframes lf-up { to { transform: translateY(-50%); } }
.lf-col .lf-ticket { background: #fff; border: 1px solid #E2E8F0; justify-content: space-between; }
.lf-col .lf-ticket b { color: #16A34A; }

/* Ф2: касса дня */
.lf-f2 { background: #FFF7ED; color: #111827; text-align: center; }
.lf-sum { font-size: clamp(56px, 9vw, 120px); font-weight: 800; font-variant-numeric: tabular-nums; color: #16A34A; margin: 6px 0 0; animation: lf-pulse 3s ease-in-out infinite; }
@keyframes lf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.lf-f2 .lf-ticket { background: #fff; border: 1px solid #FDE68A; }
.lf-f2 .lf-ticket b { color: #B45309; }

/* Ф3: ночь */
.lf-f3 { background: #0B1020; color: #E2E8F0; }
.lf-stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff 60%, transparent), radial-gradient(1px 1px at 32% 68%, #fff 60%, transparent), radial-gradient(2px 2px at 58% 14%, #fff 60%, transparent), radial-gradient(1px 1px at 76% 44%, #fff 60%, transparent), radial-gradient(1.5px 1.5px at 88% 76%, #fff 60%, transparent), radial-gradient(1px 1px at 44% 86%, #fff 60%, transparent), radial-gradient(2px 2px at 68% 30%, #FACC15 60%, transparent); opacity: 0.8; }
.lf-moon { position: absolute; top: 46px; right: 8%; width: 64px; height: 64px; border-radius: 50%; background: #FACC15; box-shadow: 0 0 60px rgba(250, 204, 21, 0.45); }
.lf-tilt { transform: rotate(-4deg) scale(1.04); }
.lf-f3 .lf-ticket { background: rgba(96, 165, 250, 0.12); border: 1px solid rgba(96, 165, 250, 0.4); color: #DBEAFE; }
.lf-f3 .lf-ticket b { color: #FACC15; }
.lf-livedot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #FACC15; animation: lz-tblink 2s infinite; }

/* Ф4: тикер-карта */
.lf-f4 { background: #F8FAFC; color: #0F172A; }
.lf-minitick { height: 300px; overflow: hidden; border: 1px solid #E2E8F0; border-radius: 16px; background: #fff; padding: 12px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.lf-minitick > div { display: flex; flex-direction: column; gap: 8px; animation: lf-up 20s linear infinite; }
.lf-minitick .lf-ticket { background: #F8FAFC; border: 1px solid #E2E8F0; font-size: 12px; }
.lf-minitick .lf-ticket b { color: #22C55E; }
.lf-schememap { width: 100%; height: auto; display: block; background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; }
.lf-schememap .dot { transform-box: fill-box; transform-origin: center; animation: lf-dot 2.4s ease-in-out infinite; }
@keyframes lf-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.55; } }

/* Ф5: минимализм */
.lf-f5 { background: #fff; color: #111; text-align: center; }
.lf-bigsum { font-size: clamp(64px, 11vw, 150px); font-weight: 800; font-variant-numeric: tabular-nums; color: #16A34A; margin: 4px 0 18px; }
.lf-f5 .lf-ticket { background: #F5F5F4; border: 1px solid #E5E7EB; }
.lf-f5 .lf-ticket b { color: #111; }

/* Ф6: чеки */
.lf-f6 { background: #F6F1E7; color: #1A1A1A; }
.lf-receipt { width: 300px; margin: 0 auto; background: #fff; border-radius: 4px; box-shadow: 0 24px 50px rgba(26, 26, 26, 0.16); padding: 22px 22px 30px; position: relative; font-family: ui-monospace, 'Courier New', monospace; }
.lf-receipt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px; background: radial-gradient(circle at 8px -3px, transparent 9px, #fff 9.5px); background-size: 18px 12px; }
.lf-receipt h5 { font-size: 13px; text-align: center; margin: 0 0 4px; letter-spacing: 0.08em; }
.lf-receipt .c { text-align: center; font-size: 11px; opacity: 0.65; }
.lf-checks { height: 210px; overflow: hidden; margin-top: 10px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.lf-checks > div { animation: lf-up 16s linear infinite; }
.lf-checks:hover > div { animation-play-state: paused; }
.lf-check { border-top: 1px dashed #B9B2A4; padding: 9px 2px; font-size: 12.5px; display: flex; justify-content: space-between; gap: 8px; }
.lf-check b { color: #E85D2F; }
.lf-total { border-top: 2px solid #1A1A1A; margin-top: 6px; padding-top: 8px; font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; }

/* Ф7: теплокарта */
.lf-f7 { background: #fff; color: #111827; }
.lf-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.lf-hcell { border-radius: 12px; background: #EFF6FF; border: 1px solid #DBEAFE; min-height: 86px; padding: 8px; font-size: 11px; font-weight: 700; color: #3B82F6; position: relative; transition: background 400ms; }
.lf-hcell small { display: block; font-weight: 400; color: #6B7280; }
.lf-hcell.warm { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.lf-hcell.hot { background: #D1FAE5; border-color: #6EE7B7; color: #065F46; }
.lf-chip { display: inline-block; background: #111827; color: #fff; font-size: 11px; border-radius: 999px; padding: 3px 10px; margin: 3px 4px 0 0; animation: lf-pop 400ms; }
@keyframes lf-pop { from { opacity: 0; transform: scale(0.7); } }
.lf-legend { display: flex; gap: 14px; font-size: 12px; color: #6B7280; margin-top: 12px; }
.lf-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }

/* Ф8: гонка */
.lf-f8 { background: #F1F5F9; color: #0F172A; }
.lf-racer { margin-bottom: 16px; }
.lf-racer .who { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.lf-racer .who span:last-child { font-variant-numeric: tabular-nums; }
.lf-track { height: 34px; border-radius: 999px; background: #E2E8F0; overflow: hidden; }
.lf-bar { height: 100%; border-radius: 999px; transform-origin: left; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; color: #fff; font-size: 12px; font-weight: 800; }
.lf-bar.a { background: #0EA5E9; animation: lf-race1 9s ease-in-out infinite; }
.lf-bar.b { background: #F43F5E; animation: lf-race2 9s ease-in-out infinite; }
.lf-bar.c { background: #8B5CF6; animation: lf-race3 9s ease-in-out infinite; }
@keyframes lf-race1 { 0%, 100% { transform: scaleX(0.82); } 50% { transform: scaleX(0.97); } }
@keyframes lf-race2 { 0%, 100% { transform: scaleX(0.64); } 50% { transform: scaleX(0.88); } }
@keyframes lf-race3 { 0%, 100% { transform: scaleX(0.45); } 50% { transform: scaleX(0.7); } }
.lf-fly { display: inline-block; background: #0F172A; color: #fff; font-size: 12px; border-radius: 999px; padding: 6px 14px; margin-top: 12px; animation: lf-flyin 9s ease-in-out infinite; }
@keyframes lf-flyin { 0%, 100% { opacity: 0; transform: translateX(30px); } 12%, 80% { opacity: 1; transform: none; } 92% { opacity: 0; } }

/* Ф9: пузыри */
.lf-f9 { background: #ECFDF5; color: #111827; }
.lf-phone2 { width: 270px; height: 420px; margin: 0 auto; border: 3px solid #111827; border-radius: 34px; background: #fff; position: relative; overflow: hidden; padding: 54px 14px 14px; }
.lf-phone2::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 22px; background: #111827; border-radius: 999px; }
.lf-bubble { background: #0D9488; color: #fff; border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 13px; margin-bottom: 10px; animation: lf-rise 8s linear infinite; opacity: 0; }
.lf-bubble:nth-child(1) { animation-delay: 0s; }
.lf-bubble:nth-child(2) { animation-delay: -2s; }
.lf-bubble:nth-child(3) { animation-delay: -4s; }
.lf-bubble:nth-child(4) { animation-delay: -6s; }
@keyframes lf-rise { 0% { opacity: 0; transform: translateY(60px); } 12%, 72% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-40px); } }
.lf-bubble b { display: block; font-size: 12px; opacity: 0.85; }

/* Ф10: табло */
.lf-f10 { background: #FAF9F5; color: #1C1917; }
.lf-board { background: #1C1917; border-radius: 18px; padding: 26px 26px 20px; box-shadow: 0 26px 60px rgba(28, 25, 23, 0.25); font-family: ui-monospace, 'Courier New', monospace; }
.lf-board .live { color: #FFC700; font-size: 12px; letter-spacing: 0.2em; margin-bottom: 14px; }
.lf-board .live i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FFC700; margin-right: 8px; animation: lz-tblink 1.6s infinite; }
.lf-train { display: flex; justify-content: space-between; gap: 10px; color: #F5F2EB; font-size: clamp(13px, 1.8vw, 17px); padding: 11px 4px; border-bottom: 1px solid #3A352F; }
.lf-train:last-child { border-bottom: none; }
.lf-train .st-free { color: #7CFC9A; }
.lf-train .st-busy { color: #FF8A7A; }
.lf-tickerline { overflow: hidden; white-space: nowrap; margin-top: 14px; color: #FFC700; font-size: 12px; letter-spacing: 0.14em; }
.lf-tickerline div { display: inline-block; animation: lz-scroll 18s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .lf-col > div, .lf-minitick > div, .lf-rowmarq > div, .lf-checks > div,
  .lf-bar, .lf-fly, .lf-bubble, .lf-tickerline div, .lf-sum { animation: none !important; }
}

/* ── Looks4: 5 слияний «карта + касса» (/looks4) ──── */
.lx-stage { padding: clamp(40px, 6vw, 84px) 0; overflow: hidden; position: relative;
  --lx-bg: #fff; --lx-card: #F8FAFC; --lx-ink: #0F172A; --lx-mute: #64748B;
  --lx-line: #E2E8F0; --lx-accent: #16A34A; --lx-glow: rgba(22, 163, 74, 0.35);
  background: var(--lx-bg); color: var(--lx-ink); transition: background 300ms, color 300ms; }
.lx-stage.night { --lx-bg: #0B1220; --lx-card: #111C30; --lx-ink: #E8EEF7; --lx-mute: #8FA1B8;
  --lx-line: #22314B; --lx-accent: #34D399; --lx-glow: rgba(52, 211, 153, 0.45); }
.lx-grid { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .lx-grid { grid-template-columns: 1fr; } }
.lx-h { font-size: clamp(28px, 4vw, 50px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; }
.lx-theme { display: inline-flex; border: 1px solid var(--lx-line); border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 18px; background: var(--lx-card); }
.lx-theme button { border: none; background: transparent; color: var(--lx-mute); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.lx-theme button.on { background: var(--lx-ink); color: var(--lx-bg); }
.lx-mapcard { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 20px; padding: 18px; }
.lx-map { width: 100%; height: auto; display: block; }
.lx-dot { cursor: pointer; }
.lx-dot circle.core { transition: opacity 200ms; }
.lx-dot .halo { transform-box: fill-box; transform-origin: center; animation: lz-ring 2.6s ease-out infinite; }
.lx-dot.taken { cursor: default; }
.lx-dot.taken circle.core { opacity: 0.25; }
.lx-dot.taken .halo { display: none; }
.lx-dot.taken .tick { display: block; }
.lx-dot .tick { display: none; }
.lx-dot:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 3px; }
.lx-cash { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: 20px; padding: 20px 22px; margin-top: 14px; }
.lx-cash small { font-size: 12px; color: var(--lx-mute); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.lx-sum { font-size: clamp(40px, 5.5vw, 64px); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--lx-accent); line-height: 1.1; }
.lx-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--lx-mute); margin-top: 6px; }
.lx-reset { border: 1px solid var(--lx-line); background: transparent; color: var(--lx-mute); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.lx-feed { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; min-height: 34px; }
.lx-feed span { font-size: 12px; font-weight: 700; border: 1px solid var(--lx-line); background: var(--lx-bg); border-radius: 999px; padding: 5px 12px; animation: lf-pop 300ms; }
.lx-neon .lx-sum { text-shadow: 0 0 24px var(--lx-glow); }
.lx-neon .lx-dot circle.core { filter: drop-shadow(0 0 6px var(--lx-glow)); }
.lx-zone { fill: transparent; stroke: var(--lx-mute); stroke-width: 1.5; stroke-dasharray: 7 6; opacity: 0.7; }
.lx-zlabel { font-size: 11px; font-weight: 800; fill: var(--lx-mute); letter-spacing: 0.06em; }
.lx-ztotal { font-size: 12px; font-weight: 800; fill: var(--lx-accent); }
.lx-route-path { fill: none; stroke: var(--lx-accent); stroke-width: 3; stroke-linecap: round; }
.lx-progress { height: 10px; border-radius: 999px; background: var(--lx-line); overflow: hidden; margin-top: 12px; }
.lx-progress i { display: block; height: 100%; background: var(--lx-accent); transform-origin: left; transform: scaleX(0); transition: transform 300ms; }

/* Вариант F — пастель / бьюти */
.lz-block { border-bottom: var(--ds-border-hairline) solid var(--ds-border); }
.lz-stage { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 88px); overflow: hidden; position: relative; }
.lz-grid { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .lz-grid { grid-template-columns: 1fr; } }
.lz-h { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; }
.lz-sub { font-size: clamp(15px, 1.8vw, 19px); line-height: 1.55; margin: 0 0 24px; max-width: 46ch; }
.lz-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.lz-proof { font-size: 13px; margin: 18px 0 0; opacity: 0.75; }
.lz-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 18px; }
.lz-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Ж: телефон + тосты */
.lz-g { background: #F8FAFC; color: #0F172A; }
.lz-phone { width: 280px; margin: 0 auto; background: #fff; border-radius: 38px; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px rgba(79, 70, 229, 0.18); padding: 14px 14px 20px; animation: lz-float 6s ease-in-out infinite; }
.lz-notch { width: 110px; height: 24px; background: #0F172A; border-radius: 999px; margin: 0 auto 12px; }
.lz-mini-head { font-weight: 800; font-size: 15px; }
.lz-mini-sub { font-size: 12px; color: #64748B; margin-bottom: 10px; }
.lz-mini-slots { display: flex; gap: 6px; flex-wrap: wrap; }
.lz-mini-slots span { font-size: 12px; font-weight: 700; padding: 7px 10px; border-radius: 8px; border: 1px solid #E2E8F0; }
.lz-mini-slots span.on { background: #4F46E5; border-color: #4F46E5; color: #fff; }
.lz-mini-slots span.off { opacity: 0.4; text-decoration: line-through; }
.lz-mini-btn { margin-top: 12px; background: #4F46E5; color: #fff; text-align: center; font-weight: 700; font-size: 13px; border-radius: 10px; padding: 11px; }
.lz-toasts { position: relative; height: 150px; margin-top: 18px; }
.lz-toast { position: absolute; left: 0; right: 0; display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 10px 12px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1); opacity: 0; transform: translateY(12px); transition: opacity 300ms, transform 300ms; }
.lz-toast.show { opacity: 1; transform: none; }
.lz-ava { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lz-toast b { font-size: 13px; display: block; }
.lz-toast small { font-size: 12px; color: #64748B; }
@keyframes lz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* З: до/после */
.lz-z { background: #FFF7ED; color: #1C1917; }
.lz-compare { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 0; align-items: stretch; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 760px) { .lz-compare { grid-template-columns: 1fr; } .lz-vs { margin: 12px auto; } }
.lz-chaos, .lz-order { border-radius: 18px; padding: 22px; transition: opacity 200ms, transform 200ms; }
.lz-chaos { background: #fff; border: 1px dashed #EF4444; }
.lz-order { background: #fff; border: 1px solid #10B981; box-shadow: 0 18px 44px rgba(16, 185, 129, 0.14); }
.lz-compare.focus-after .lz-chaos { opacity: 0.4; }
.lz-compare.focus-after .lz-order { transform: translateX(6px); }
.lz-bubble { max-width: 85%; background: #F5F5F4; border-radius: 14px 14px 14px 4px; padding: 9px 13px; font-size: 13px; margin-bottom: 8px; animation: lz-jitter 3.4s ease-in-out infinite; }
.lz-bubble:nth-child(2n) { animation-delay: -1.2s; }
.lz-bubble:nth-child(3n) { animation-delay: -2.1s; }
@keyframes lz-jitter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.lz-unread { display: inline-block; background: #EF4444; color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.lz-slotline { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; padding: 9px 4px; border-bottom: 1px solid #ECFDF5; }
.lz-paid { display: inline-block; margin-top: 12px; background: #10B981; color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 5px 14px; }
.lz-vs { width: 48px; height: 48px; border-radius: 50%; background: #1C1917; color: #fff; border: none; font-size: 20px; cursor: pointer; align-self: center; justify-self: center; }

/* И: календарь */
.lz-i { background: #020617; color: #E0F2FE; }
.lz-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; opacity: 0.92; }
.lz-cell { aspect-ratio: 1 / 0.82; border-radius: 10px; background: rgba(224, 242, 254, 0.06); border: 1px solid rgba(224, 242, 254, 0.12); font-size: 11px; padding: 6px; position: relative; color: #BAE6FD; }
.lz-cell.busy { background: repeating-linear-gradient(45deg, rgba(224, 242, 254, 0.05) 0 6px, transparent 6px 12px); color: #475569; }
.lz-cell.free { border-color: #38BDF8; }
.lz-cell.free::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #38BDF8; }
.lz-cell.night::before { content: '☾'; position: absolute; top: 4px; right: 6px; color: #FACC15; font-size: 11px; }
.lz-cell.hot { border-color: #FACC15; animation: lz-pulse 2.5s ease-in-out infinite; }
@keyframes lz-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.lz-cash { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: #FACC15; color: #020617; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.lz-glass { background: rgba(224, 242, 254, 0.07); border: 1px solid rgba(224, 242, 254, 0.16); backdrop-filter: blur(8px); border-radius: 20px; padding: 32px; }
.lz-legend { display: flex; gap: 16px; font-size: 12px; color: #BAE6FD; margin-top: 18px; flex-wrap: wrap; }
.lz-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }

/* Й: цифры */
.lz-y { background: #fff; color: #111827; text-align: center; overflow: hidden; }
.lz-giant { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(200px, 34vw, 480px); font-weight: 800; color: transparent; -webkit-text-stroke: 2px #FDE68A; opacity: 0.7; pointer-events: none; user-select: none; }
.lz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 30px auto; position: relative; }
@media (max-width: 700px) { .lz-stats { grid-template-columns: 1fr; } }
.lz-stat { background: #fff; border: 1px solid #E5E7EB; border-radius: 18px; padding: 26px 18px; box-shadow: 0 14px 34px rgba(17, 24, 39, 0.07); transition: transform 200ms; }
.lz-stat:hover { transform: translateY(-4px); }
.lz-stat b { font-size: clamp(30px, 4vw, 46px); font-variant-numeric: tabular-nums; display: block; }
.lz-stat span { font-size: 13px; color: #6B7280; }
.lz-strike { text-decoration: line-through; text-decoration-color: #16A34A; text-decoration-thickness: 4px; color: #9CA3AF; }
.lz-marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; padding: 12px 0; margin-top: 34px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lz-marquee div { display: inline-block; font-weight: 800; letter-spacing: 0.06em; font-size: 15px; animation: lz-scroll 22s linear infinite; }
@keyframes lz-scroll { to { transform: translateX(-50%); } }

/* К: диалог */
.lz-k { background: #F5F3FF; color: #1E1B4B; }
.lz-chat { max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.lz-msg { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; opacity: 0; transform: translateY(8px); transition: opacity 250ms, transform 250ms; }
.lz-msg.in { opacity: 1; transform: none; }
.lz-msg.left { background: #fff; border: 1px solid #E9E5FF; border-bottom-left-radius: 4px; align-self: flex-start; }
.lz-msg.right { background: #7C3AED; color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.lz-typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid #E9E5FF; border-radius: 16px; align-self: flex-start; }
.lz-typing i { width: 7px; height: 7px; border-radius: 50%; background: #7C3AED; animation: lz-tblink 1s infinite; }
.lz-typing i:nth-child(2) { animation-delay: 0.15s; }
.lz-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lz-tblink { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.35); opacity: 1; } }
.lz-slotcard { background: #1E1B4B; color: #fff; border-radius: 16px; padding: 16px; align-self: center; width: 100%; animation: lz-float 5s ease-in-out infinite; }
.lz-slotcard small { color: #A5B4FC; font-size: 12px; }
.lz-slotcard .row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.lz-slotcard b { font-size: 17px; }
.lz-slotcard .pay { background: #06B6D4; border-radius: 9px; padding: 8px 16px; font-size: 13px; font-weight: 800; }
.lz-seen { align-self: flex-end; font-size: 11px; color: #7C3AED; }

/* Л: карта */
.lz-l { background: #0E1A2E; color: #F2F5F9; }
.lz-map { width: 100%; height: auto; display: block; }
.lz-pin { cursor: pointer; }
.lz-pin .ring { transform-box: fill-box; transform-origin: center; animation: lz-ring 2.6s ease-out infinite; }
.lz-pin:nth-child(2n) .ring { animation-delay: -0.9s; }
.lz-pin:nth-child(3n) .ring { animation-delay: -1.7s; }
@keyframes lz-ring { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
.lz-mapcard { background: #fff; color: #0E1A2E; border-radius: 12px; padding: 12px 14px; font-size: 13px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }
.lz-filters { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.lz-filters button { border: 1px solid rgba(242, 245, 249, 0.3); background: transparent; color: #F2F5F9; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.lz-filters button.on { background: #1AE5A8; border-color: #1AE5A8; color: #0E1A2E; }
.lz-pin.dim { opacity: 0.18; }

/* М: лента */
.lz-m { background: #fff; color: #111318; text-align: center; }
.lz-live { display: inline-flex; align-items: center; gap: 8px; background: #111318; color: #fff; border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 800; }
.lz-live i { width: 9px; height: 9px; border-radius: 50%; background: #FF4D4D; animation: lz-tblink 1.2s infinite; }
.lz-feed { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); margin-top: 14px; }
.lz-feedrow { display: flex; gap: 10px; width: max-content; padding: 5px 0; animation: lz-scroll 30s linear infinite; }
.lz-feedrow.rev { animation-direction: reverse; }
.lz-feedrow.dim { opacity: 0.55; }
.lz-feed:hover .lz-feedrow { animation-play-state: paused; }
.lz-ticket { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #E8EAEE; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600; background: #fff; white-space: nowrap; }
.lz-ticket b { color: #00C48C; }
.lz-ticket svg { flex-shrink: 0; }

/* Н: калькулятор */
.lz-n { background: #FFF7E5; color: #111827; }
.lz-calc { background: #fff; border-radius: 22px; padding: 30px; box-shadow: 0 24px 60px rgba(124, 58, 237, 0.12); border: 1px solid #F3E8C8; max-width: 460px; margin: 0 auto; }
.lz-calc label { font-size: 13px; font-weight: 700; display: block; margin: 16px 0 8px; }
.lz-calc input[type="range"] { width: 100%; accent-color: #7C3AED; height: 32px; }
.lz-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.lz-seg button { border: 1px solid #E5E7EB; background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.lz-seg button.on { background: #7C3AED; border-color: #7C3AED; color: #fff; }
.lz-calc .bar { height: 10px; border-radius: 999px; background: #F3F4F6; margin-top: 18px; overflow: hidden; }
.lz-calc .bar i { display: block; height: 100%; background: #7C3AED; transform-origin: left; }
.lz-calc .cmp { display: flex; justify-content: space-between; font-size: 14px; margin-top: 14px; }
.lz-save { margin-top: 14px; background: #00B07C; color: #fff; border-radius: 14px; padding: 16px; text-align: center; }
.lz-save b { font-size: clamp(26px, 3.4vw, 38px); font-variant-numeric: tabular-nums; display: block; }

/* О: день мастера */
.lz-o { background: #EFF3FF; color: #1A2B4A; }
.lz-day { max-width: 400px; margin: 0 auto; position: relative; padding-left: 58px; }
.lz-now { position: absolute; left: 50px; right: 0; border-top: 2px dashed #FF8A3D; }
.lz-now span { position: absolute; top: -11px; right: 0; background: #FF8A3D; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 10px; }
.lz-t { position: relative; border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; transition: opacity 200ms, transform 200ms; }
.lz-t time { position: absolute; left: -58px; width: 48px; text-align: right; font-size: 12px; color: #6B7A99; font-variant-numeric: tabular-nums; }
.lz-t.busy { background: #1A2B4A; color: #fff; }
.lz-t.win { background: #fff; border: 2px dashed #FF8A3D; cursor: pointer; font-weight: 700; color: #FF8A3D; }
.lz-t.win:hover { transform: scale(1.02); }
.lz-t.taken { background: #4F7CFF; color: #fff; border: none; cursor: default; }

/* П: манифест */
.lz-p { background: #0A0A0A; color: #F5F2EB; text-align: center; }
.lz-mani { font-size: clamp(44px, 9vw, 120px); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.lz-mani .outline { color: transparent; -webkit-text-stroke: 2px #F5F2EB; display: block; }
.lz-mani .mark { background: linear-gradient(transparent 62%, #D6FF3F 62%); color: #0A0A0A; padding: 0 12px; display: inline-block; }
.lz-mani .shake:hover { display: inline-block; animation: lz-shake 300ms; color: #FF4D00; cursor: default; }
@keyframes lz-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.lz-strip { border-top: 1px solid #2A2A2A; border-bottom: 1px solid #2A2A2A; overflow: hidden; white-space: nowrap; padding: 12px 0; margin-top: 36px; }
.lz-strip div { display: inline-block; font-weight: 800; letter-spacing: 0.08em; animation: lz-scroll 20s linear infinite; }

/* Reveal + reduced motion */
.lz-reveal { opacity: 0; transform: translateY(14px); transition: opacity 300ms, transform 300ms; }
.lz-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lz-phone, .lz-bubble, .lz-cell.hot, .lz-marquee div, .lz-slotcard,
  .lz-typing i, .lz-pin .ring, .lz-feedrow, .lz-strip div, .lz-live i { animation: none !important; }
  .lz-reveal { opacity: 1; transform: none; transition: none; }
}

/* Вариант F — пастель / бьюти */
.look-f {
  --ds-accent: #DB2777; --ds-accent-hover: #BE185D;
  --ds-accent-500: #DB2777; --ds-accent-600: #BE185D;
  --ds-accent-050: #FCE7F1; --ds-on-accent: #fff;
  background: #FDF4F6;
}
.look-f .l-hero { background: none; }
.look-f .l-hero-copy h1 em {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  color: var(--ds-accent); letter-spacing: 0;
}
.look-f .l-demo-widget { border-radius: 24px; box-shadow: 0 20px 48px rgba(219, 39, 119, 0.16); }