/* SMeet public site — landing, features, business.
   One stylesheet for all three pages: they are one system, and a card or a
   store button that drifts between them reads as a different product.

   The design comes from the canvas mockups in ios-native/DesignReference. Those
   are two fixed-width artboards with 288 inline styles and no classes, so none
   of this is ported markup — the palette, the type, the section order and the
   copy are taken from them, the implementation is written here. */

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
  /* Ink and greys, in the order the mockup uses them most. */
  --ink:        #0c1116;
  --ink-2:      #3c4653;
  --ink-3:      #5b6672;
  --muted:      #6b7480;

  --bg:         #fbfaf9;   /* warm off-white; never pure #fff */
  --surface:    #ffffff;
  --surface-2:  #f6f5f3;   /* banded sections */
  --line:       #e8e6e2;
  --line-soft:  #f0eeeb;

  --accent:     #6c3fc4;   /* purple: memory, AI, the second half of the H1 */
  --accent-ink: #5b3a96;
  --link:       #1f6fd0;   /* blue: links, the first half of the H1 */
  --sky:        #37a8ff;
  --ok:         #2f7d4f;
  --alert:      #e0483f;

  /* Dark surfaces — the product shot and the phone screens. */
  --night:      #12161c;
  --night-2:    #1b2029;
  --night-line: #2a313c;

  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale, taken from the mockups rather than guessed.
     ⚠️ The desktop artboards are already fluid — every heading is a `clamp()`,
     and the mobile artboard sits almost exactly on each clamp's lower bound
     (35 vs 36, 25 vs 26, 15.5 vs 15.5). So the two artboards are one fluid
     system drawn at two widths, and these are its real numbers. What the
     mockups leave fixed — card and meta text — is made fluid here, because a
     14 px card label beside a 70 px headline is the one thing that does not
     survive the jump to a wide screen. */
  --t-display: clamp(2.25rem, 6vw, 4.375rem);
  --t-h2:      clamp(1.625rem, 3.7vw, 2.75rem);
  --t-h3:      clamp(1.125rem, 1.9vw, 1.3125rem);
  --t-lede:    clamp(0.96875rem, 1.5vw, 1.1875rem);
  --t-cta:     clamp(1.75rem, 4.6vw, 3.5rem);
  --t-body:    clamp(0.90625rem, 1.1vw, 1.03125rem);
  --t-small:   clamp(0.9375rem, 1.05vw, 1.0625rem);
  --t-caption: clamp(0.84375rem, 0.95vw, 0.9375rem);
  --t-meta:    clamp(0.75rem, 0.85vw, 0.84375rem);
  --t-stat:    clamp(1.6875rem, 3.7vw, 2.75rem);
  --t-eyebrow: clamp(0.6875rem, 0.8vw, 0.75rem);

  --sp-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --wrap: 1240px;
  --gut: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(12, 17, 22, 0.04), 0 8px 24px rgba(12, 17, 22, 0.05);
  --shadow-lift: 0 2px 6px rgba(12, 17, 22, 0.06), 0 24px 60px rgba(12, 17, 22, 0.10);
}

/* ⚠️ The design is a single light world on purpose — a marketing page that
   half-inverts under a dark OS looks broken rather than themed. The palette is
   therefore stated outright, including the body background: a transparent body
   would borrow whatever ground the browser paints. */

/* ── Base ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* One light world, stated outright: a marketing page that half-inverts under a
   dark OS looks broken rather than themed. */
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Anchored sections must clear the sticky header, or a jump hides the heading
   it was aimed at. */
[id] { scroll-margin-top: 78px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: rgba(108, 63, 196, 0.18); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
/* ⚠️ Safari снимает со списка семантику, если у него убраны маркеры, —
   VoiceOver перестаёт объявлять «список из N». Маркеры убираем, роль
   возвращаем явно. */
ul { padding: 0; list-style: none; }
ul { -webkit-padding-start: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 100;
}
.skip:focus { left: 0; color: #fff; }

/* ── Type helpers ────────────────────────────────────────────────────────── */

.eyebrow {
  font: 500 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link);
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--ok { color: var(--ok); }

.display {
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}

.h2 {
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 34em;
}

.tint-link { color: var(--link); }
.tint-accent { color: var(--accent); }

/* The second half of the headline is one gradient across both words, not two
   flat colours: the mockup runs blue into purple through the phrase. The plain
   colour underneath is what a browser without `background-clip: text` keeps. */
.tint-run {
  color: var(--link);
  background: linear-gradient(100deg, var(--link) 0%, #4a58cc 42%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tint-run { color: transparent; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: 600 var(--t-small)/1.2 var(--sans);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:active { transform: translateY(1px); }

.btn--dark {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(12, 17, 22, 0.24);
}
.btn--dark:hover { background: #1a222c; color: #fff; }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: #d8d5cf; }

.btn__label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.btn__note { font-weight: 400; font-size: 11px; opacity: 0.66; letter-spacing: 0.01em; }

.btn__icon { flex: none; width: 17px; height: 17px; }

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.note {
  font-size: var(--t-caption);
  color: var(--muted);
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 250, 249, 0.86);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-head[data-scrolled="true"] { border-bottom-color: var(--line); }

.site-head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 1.0625rem;
}
.brand:hover { color: var(--ink); }
.brand img { width: 26px; height: 18px; display: block; }

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.site-nav a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 500;
}
.site-nav a:hover { color: var(--ink); background: var(--line-soft); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.site-head__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-head__end .btn { min-height: 38px; padding: 8px 16px; }

/* The burger only exists below the nav breakpoint. */
.burger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

/* The menu sheet drops from the top, as the mockup's "Menu, open" panel shows. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: rgba(12, 17, 22, 0.32);
}
.sheet[data-open="true"] { display: block; }

.sheet__panel {
  background: var(--surface);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  padding: 14px var(--gut) 20px;
  box-shadow: var(--shadow-lift);
  animation: sheetIn 0.22s ease;
}
@keyframes sheetIn { from { transform: translateY(-12px); opacity: 0; } }

.sheet__top { display: flex; align-items: center; min-height: 48px; }
.sheet__close {
  margin-left: auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}
.sheet__links { margin: 6px 0 14px; }
.sheet__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sheet__links a:last-child { border-bottom: 0; }
.sheet__links a[data-secondary] { color: var(--ink-3); font-weight: 500; }
.sheet__panel .btn { width: 100%; justify-content: center; }

/* ── Sticky download bar (phones only) ───────────────────────────────────── */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.sticky-cta__text { line-height: 1.25; }
.sticky-cta__title { font-weight: 700; font-size: var(--t-small); }
.sticky-cta__note { font-size: var(--t-caption); color: var(--muted); }
.sticky-cta .btn { margin-left: auto; min-height: 40px; padding: 9px 18px; }

/* ── Sections ────────────────────────────────────────────────────────────── */

.section { padding-block: var(--sp-section); }
.section--band { background: var(--surface-2); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

.section__head { display: grid; gap: 14px; max-width: 46rem; }
.section__head .lede { margin-top: 2px; }

/* Two-column blocks. ⚠️ On a phone every one of these stacks text first and the
   visual second — that is the mockup's own rule, and it is why the visual is a
   later sibling in the markup rather than a floated element. */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .split--narrow-visual { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.checks { display: grid; gap: 12px; margin-top: 26px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-small); color: var(--ink-2); }
.checks svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 26px;
  font-weight: 600;
  font-size: var(--t-small);
}
.arrow-link svg { width: 14px; height: 14px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 36px;
  /* Room for the sticky bar so the last line never hides under it. */
  padding-bottom: calc(36px + var(--sticky-room, 0px));
}
.site-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
}
.site-foot__brand { display: grid; gap: 2px; }
.site-foot__brand .brand { font-size: 1rem; }
.site-foot__note { font-size: var(--t-caption); color: var(--muted); }
.site-foot__links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-foot__links a { font-size: var(--t-small); color: var(--ink-2); font-weight: 500; }
.site-foot__links a:hover { color: var(--accent); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) 0; }

/* The soft bloom behind the headline. Decorative, so it is hidden from
   assistive tech and stops moving when the reader asks for less motion. */
.hero__bloom {
  position: absolute;
  top: -22%;
  left: 50%;
  width: min(1100px, 130%);
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  background:
    radial-gradient(38% 46% at 32% 42%, rgba(55, 168, 255, 0.22), transparent 70%),
    radial-gradient(34% 44% at 68% 38%, rgba(108, 63, 196, 0.20), transparent 70%),
    radial-gradient(30% 36% at 50% 70%, rgba(255, 138, 128, 0.14), transparent 72%);
  filter: blur(14px);
  animation: bloomDrift 18s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bloomDrift {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50%      { transform: translate(-50%, -16px) scale(1.05); }
}

.hero__inner { position: relative; text-align: center; display: grid; justify-items: center; gap: 22px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--t-caption);
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(12, 17, 22, 0.04);
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  animation: softPulse 2.6s ease-in-out infinite;
}
@keyframes softPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.hero .lede { margin-inline: auto; text-align: center; }
.hero .store-row { justify-content: center; margin-top: 6px; }

/* ── Product shot ────────────────────────────────────────────────────────── */

.shot {
  margin-top: clamp(2rem, 1rem + 4vw, 3.5rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--night);
}

.shot__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 16px;
  color: #aab3c0;
  font-size: var(--t-caption);
}
.rec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(224, 72, 63, 0.16);
  color: #ff8a80;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.rec__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--alert); animation: softPulse 1.6s ease-in-out infinite; }

/* ⚠️ Тот же значок на светлой карточке. Цвет #ff8a80 выбран под тёмный кадр
   продуктового снимка и на белом даёт 1.85:1 — нечитаемо. Здесь свой тон. */
.mock .rec { background: rgba(224, 72, 63, 0.10); color: #a8342c; }

.shot__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}
@media (min-width: 760px) {
  .shot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Four across, the tile stops being a portrait box and becomes a strip. */
  .shot__grid .tile { aspect-ratio: 5 / 2; }
}

.tile {
  position: relative;
  display: grid;
  place-content: center;
  gap: 8px;
  justify-items: center;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-md);
  background: var(--night-2);
  border: 1px solid var(--night-line);
  color: #cdd4de;
  font-size: var(--t-caption);
}
.tile[data-speaking="true"] { border-color: var(--link); box-shadow: 0 0 0 1px var(--link) inset; }
.avatar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font: 600 12px/1 var(--sans);
  color: #fff;
}

.shot__panel {
  display: grid;
  gap: 22px;
  padding: 18px 16px 20px;
  background: var(--surface);
}
@media (min-width: 860px) { .shot__panel { grid-template-columns: 1.15fr 1fr; gap: 34px; padding: 22px 22px 24px; } }

.panel__label {
  font: 500 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}

.line { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 7px 0; }
.line__at { font: 400 11px/1.5 var(--mono); color: var(--muted); }
.line__who { font-weight: 600; font-size: var(--t-caption); }
.line__text { font-size: var(--t-caption); color: var(--ink-3); }

.summary {
  padding: 11px 13px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(108, 63, 196, 0.06);
  font-size: var(--t-caption);
  color: var(--ink-2);
}
.todo { display: grid; gap: 10px; margin-top: 14px; }
.todo li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.todo .avatar { width: 24px; height: 24px; font-size: 10px; }
.todo__task { font-size: var(--t-caption); font-weight: 600; }
.todo__meta { font: 400 11px/1.4 var(--mono); color: var(--accent-ink); }

/* ── Stats ───────────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 20px;
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  border-block: 1px solid var(--line);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat__value { font-size: var(--t-stat); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat__label { margin-top: 8px; font-size: var(--t-caption); color: var(--ink-3); max-width: 15em; }

/* ── Phone slider ────────────────────────────────────────────────────────── */

.slider__head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.slider__hint { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-small); font-weight: 500; }
.slider__hint svg { width: 14px; height: 14px; }

/* ⚠️ Cards keep the mockup's 240 px on every width, including the phone. At
   390 pt that shows one card and half of the next, which is the point: a half
   card is what tells the reader the row scrolls. */
.slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 16px;
  margin-top: 30px;
  padding-bottom: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.slider::-webkit-scrollbar { height: 6px; }
.slider::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }
.slide { scroll-snap-align: start; }
.slide__caption { margin-top: 14px; }
.slide__title { font-size: var(--t-small); font-weight: 700; }
.slide__text { margin-top: 4px; font-size: var(--t-caption); color: var(--ink-3); }

/* The phone frame. Aspect ratio is a real 390 × 844 screen. */
.phone {
  position: relative;
  border-radius: 30px;
  padding: 7px;
  background: var(--ink);
  box-shadow: var(--shadow-card);
}
.phone__screen {
  position: relative;
  aspect-ratio: 390 / 690;
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.35;
}
.phone__screen--dark { background: var(--night); color: #dfe4ea; }

.ph-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 11px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.phone__screen--dark .ph-top { border-bottom-color: var(--night-line); }
.ph-title { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }

.ph-body { flex: 1; overflow: hidden; padding: 9px 11px; display: grid; gap: 8px; align-content: start; }
/* Страховка к тому же: содержимое плитки не должно задавать ширину колонки. */
.ph-body > * { min-width: 0; }

.ph-chips { display: flex; gap: 6px; }
.chip {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2);
}
.chip[data-on="true"] { background: var(--link); color: #fff; }

.ph-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ph-row .avatar { width: 28px; height: 28px; font-size: 10px; }
.ph-name { font-weight: 600; font-size: 11px; }
.ph-preview { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-meta { text-align: right; font-size: 9px; color: var(--muted); display: grid; gap: 3px; justify-items: end; }
.ph-unread {
  min-width: 16px; padding: 1px 5px;
  border-radius: var(--r-pill);
  background: var(--link); color: #fff;
  font-size: 9px; font-weight: 700; text-align: center;
}

.ph-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 7px 6px calc(7px + 4px);
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.phone__screen--dark .ph-tabs { border-top-color: var(--night-line); background: var(--night); }
.ph-tab { display: grid; justify-items: center; gap: 3px; font-size: 8px; color: var(--muted); }
.ph-tab[data-on="true"] { color: var(--link); }
.ph-tab svg { width: 15px; height: 15px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  gap: 16px;
  margin-top: clamp(2rem, 1.2rem + 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.card {
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(12, 17, 22, 0.03);
}
.section--band .card { background: var(--surface); }
.card__icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(31, 111, 208, 0.10);
  color: var(--link);
  margin-bottom: 14px;
}
.card__icon svg { width: 16px; height: 16px; }
.card__icon--accent { background: rgba(108, 63, 196, 0.10); color: var(--accent); }
.card__icon--ok { background: rgba(47, 125, 79, 0.10); color: var(--ok); }
.card__icon--warm { background: rgba(255, 138, 128, 0.16); color: #c4564c; }
.card__title { font-size: var(--t-small); font-weight: 700; }
.card__text { margin-top: 6px; font-size: var(--t-caption); color: var(--ink-3); }

/* ── Demo cards (memory, voice) ──────────────────────────────────────────── */

.demo {
  padding: 16px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
}

.ask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.ask svg { flex: none; width: 15px; height: 15px; color: var(--accent); }

.answer__label {
  font: 500 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.answer__text { margin-top: 7px; font-size: var(--t-small); color: var(--ink); }
.cite {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 5px;
  background: rgba(108, 63, 196, 0.12);
  color: var(--accent-ink);
  font: 600 10px/1 var(--mono);
  vertical-align: 2px;
}

.source {
  padding: 12px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.source__head { display: flex; align-items: center; gap: 9px; }
.source__who { font-size: var(--t-caption); font-weight: 700; }
.source__when { margin-left: auto; font-size: 11px; color: var(--muted); }
.source__quote { margin-top: 7px; font-size: var(--t-caption); color: var(--ink-3); }
.play {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 6px 12px;
  border: 0; border-radius: var(--r-sm);
  background: var(--accent); color: #fff;
  font: 600 11px/1 var(--sans);
  cursor: default;
}
.play svg { width: 10px; height: 10px; }

.voice__head { display: flex; align-items: center; gap: 12px; }
.voice__play {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: #fff;
}
.voice__play svg { width: 12px; height: 12px; }
.wave { flex: 1; display: flex; align-items: center; height: 26px; }
.wave { gap: 3px; }
/* Запасная высота: столбик без инлайнового значения всё равно рисуется. */
.wave i { width: 3px; height: 55%; flex: none; border-radius: 2px; background: var(--link); opacity: 0.85; }
.voice__time { font: 400 11px/1 var(--mono); color: var(--muted); }
.voice__said { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--t-caption); }
.voice__translated {
  display: flex; gap: 9px; align-items: baseline;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(108, 63, 196, 0.07);
  font-size: var(--t-caption);
  color: var(--ink-2);
}
.lang-tag {
  font: 600 9px/1 var(--mono); letter-spacing: 0.06em;
  padding: 4px 6px; border-radius: 5px;
  background: rgba(108, 63, 196, 0.14); color: var(--accent-ink);
}
.langs { display: flex; flex-wrap: wrap; gap: 6px; }
.langs li {
  font: 500 10px/1 var(--mono); letter-spacing: 0.06em;
  padding: 6px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--ink-3);
}

/* ── QR block ────────────────────────────────────────────────────────────── */

.qr-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 30px 24px;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.qr-card svg { width: min(210px, 62%); height: auto; }
.qr-card p { max-width: 24em; text-align: center; font-size: var(--t-caption); color: var(--ink-3); }

/* ── Closing block ───────────────────────────────────────────────────────── */

.closing .h2 { font-size: var(--t-cta); }
.closing { text-align: center; display: grid; justify-items: center; gap: 18px; }
.closing .lede { text-align: center; margin-inline: auto; }
.closing .store-row { justify-content: center; }

.platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  width: 100%;
}
.platform { flex: 1 1 150px; max-width: 260px; }
.platform {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
}
.platform__name { font-size: var(--t-small); font-weight: 700; }
.platform__note { margin-top: 3px; font-size: var(--t-caption); color: var(--muted); }

/* ── Small screens ───────────────────────────────────────────────────────── */

@media (max-width: 899px) {
  .site-nav { display: none; }
  .site-head__end .btn--ghost { display: none; }
  .burger { display: inline-flex; }
  .sticky-cta { display: flex; }
  body { --sticky-room: 64px; }
  /* The mockup centres the hero on a phone and trims the paragraph's width. */
  .hero__inner { gap: 18px; }
  /* Stacked and full width is right on a phone. On a 834 pt tablet the same
     rule gave a button 790 pt wide, which reads as a mistake rather than a
     call to action — so the column is capped and centred. */
  .hero .store-row, .closing .store-row {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    flex-direction: column;
  }
  .hero .store-row .btn, .closing .store-row .btn { width: 100%; justify-content: center; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .shot__panel { padding: 16px 14px 18px; }
}

@media (min-width: 900px) {
  .sheet { display: none !important; }
}

/* ── Chip navigation (Features) ──────────────────────────────────────────── */

.chip-nav {
  position: sticky;
  top: 62px;
  z-index: 30;
  background: rgba(251, 250, 249, 0.9);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.chip-nav ul {
  display: flex;
  gap: 6px;
  padding-block: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chip-nav ul::-webkit-scrollbar { display: none; }
.chip-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-weight: 500;
}
.chip-nav a:hover { background: var(--line-soft); color: var(--ink); }
.chip-nav a[aria-current="true"] { background: rgba(12, 17, 22, 0.06); color: var(--ink); font-weight: 600; }
.chip-nav .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }

/* Two stacked sticky bars, so anchors have to clear both. */
.has-chip-nav [id] { scroll-margin-top: 122px; }

/* ⚠️ At 200 % browser zoom the window is short, and two pinned bars took
   almost half of it — leaving a strip of content between them and the
   keyboard. Below that height they stop being pinned; the page is short
   enough there that scrolling back up costs nothing. */
@media (max-height: 560px) {
  .site-head, .chip-nav { position: static; }
  .has-chip-nav [id] { scroll-margin-top: 12px; }
}

/* ── List groups ─────────────────────────────────────────────────────────── */

.groups {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  margin-top: clamp(2rem, 1.2rem + 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* ⚠️ Между 700 и 1023 три колонки не помещаются, а `auto-fit` даёт «2 + 1» —
   ряд с сиротой. Одна колонка честнее: полоса всё равно не нарисована ни в
   одном макете, и читается она как телефон, только шире. */
@media (min-width: 700px) and (max-width: 1023px) {
  .groups { grid-template-columns: minmax(0, 1fr); }
}
.group__label {
  font: 500 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.group ul { display: grid; }
.group li { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.group li:last-child { border-bottom: 0; }
.group__title { font-size: var(--t-caption); font-weight: 700; }
.group__text { margin-top: 3px; font-size: var(--t-meta); color: var(--ink-3); }

/* ── Dark section ────────────────────────────────────────────────────────── */

.section--dark {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.section--dark .h2, .section--dark .display { color: #fff; }
/* ⚠️ Not `--ink-3` on a dark ground: that grey is chosen for contrast against
   the light page and falls to about 2:1 here. */
.section--dark .lede { color: rgba(255, 255, 255, 0.62); }
.section--dark .eyebrow { color: #9d8cf0; }
.section--dark :focus-visible { outline-color: #fff; }
.section--dark .btn--ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.18); }
.section--dark .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.section--dark .btn--dark { background: #fff; color: var(--ink); }
.section--dark .btn--dark:hover { background: #eef1f4; color: var(--ink); }
.section--dark .wrap { position: relative; }
.section--dark .bloom {
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: min(900px, 120%);
  aspect-ratio: 1.7;
  transform: translateX(-50%);
  background:
    radial-gradient(40% 50% at 40% 50%, rgba(108, 63, 196, 0.42), transparent 70%),
    radial-gradient(36% 46% at 62% 46%, rgba(55, 168, 255, 0.26), transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}
.glass {
  position: relative;
  padding: 22px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 16px;
}
.glass li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.glass .tick {
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--sky));
  color: #fff;
}
.glass .tick svg { width: 11px; height: 11px; }
.glass__title { font-size: var(--t-caption); font-weight: 700; }
.glass__text { margin-top: 3px; font-size: var(--t-meta); color: rgba(255, 255, 255, 0.62); }

/* ── Chat mock (Features) ────────────────────────────────────────────────── */

.mock { padding: 16px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.mock__day { text-align: center; font-size: var(--t-meta); color: var(--muted); margin-bottom: 12px; }
.bubble { max-width: 86%; padding: 10px 13px; border-radius: 14px 14px 14px 5px; background: var(--surface-2); font-size: var(--t-caption); }
.bubble--own { margin-left: auto; border-radius: 14px 14px 5px 14px; background: var(--link); color: #fff; }
.bubble__who { font-size: var(--t-meta); font-weight: 700; color: var(--accent-ink); margin-bottom: 3px; }
.bubble__meta { margin-top: 7px; font-size: 11px; opacity: 0.75; }
.mock__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--t-meta); color: var(--muted); }
.mock__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mock__actions span {
  padding: 7px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--t-meta); font-weight: 600; color: var(--ink-2);
}

/* ⚠️ `.wrap` and `.section__head` on the same element used to fight over
   `max-width`: the narrower one won and then centred itself, so a left-aligned
   hero drifted into the middle of the page. Put the head *inside* a wrap —
   and if the two do end up combined, this keeps the page width and narrows the
   lines instead of the block. */
.wrap.section__head { max-width: var(--wrap); }
.wrap.section__head > * { max-width: 46rem; }

/* These two are spans inside one cell, so they need to be told to stack —
   otherwise the service name and its role run together into one word. */
.glass__title, .glass__text, .todo__task, .todo__meta,
.line__who, .line__text, .group__title, .group__text,
.ph-name, .ph-preview { display: block; }

/* Плитка платформы, ставшая ссылкой: цвет и подчёркивание — как у обычной
   плитки, иначе она выбивается из ряда соседей. */
.platform > a { display: block; color: inherit; }
.platform > a:hover { color: inherit; }
.platform > a:hover .platform__name { color: var(--link); }