/* ============================================================
   shainote — Design System (tokens + components)
   World: Nexura airiness × Stratex restrained green × brand teal
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand & ink */
  --ink:        #123437;   /* primary dark / text on light */
  --ink-700:    #1c4247;
  --ink-900:    #0c2528;   /* наведение на тёмное действие (DESIGN.md) */
  --forest:     #2e4a42;   /* deep green anchor (Stratex) */
  --brand:      #49a598;   /* accent green */
  --brand-600:  #3b8a7f;   /* hover */
  --brand-700:  #2f6f66;  /* min. green that carries white text: 5.86:1 */
  --brand-800:  #275c54;  /* hover for white-on-green: 7.6:1 */
  --brand-200:  #bfe0d9;
  --brand-100:  #e3f0ed;
  --brand-50:   #f0f7f5;

  /* Surfaces — product-faithful: white ground like landing & cabinet */
  --white:      #ffffff;
  --surface:    #f4f5f7;   /* cool light card / section wash */
  --surface-2:  #eef1f2;
  --tint:       rgba(73,165,152,.08);  /* soft green tint (cabinet icon bg) */
  --line:       #e7e9ec;
  --line-strong:#d8dcde;
  /* Граница интерактивного контрола: WCAG 1.4.11 требует 3:1, а --line-strong
     даёт 1.38:1 — декоративная линия не может быть единственной кромкой поля
     ввода или кнопки. 3.41:1 на белом; запас взят на подкрашенные подложки
     (кнопка внутри строки-предупреждения стоит не на чистом белом). */
  --line-control:#848d8e;

  /* No colour gradients — flat fills only (DESIGN.md: Правило плоской заливки) */

  /* Text */
  --text:       #12292b;
  --text-soft:  #40524f;
  --muted:      #5e6b6c;
  --caution:    #b8514a;   /* misread term / negative column — 4.87:1 on white */
  --on-dark:            #eef4f2;
  --on-dark-soft:       rgba(238,244,242,.72);
  --on-dark-faint:      rgba(238,244,242,.62);  /* 5.59:1 on --ink; .5 gave 4.19:1 */

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Логотипная засечка — та же, что у родительского shai.pro: семья держится
     на гарнитуре. Только вордмарк; корпус остаётся на Inter (пин владельца). */
  --font-display: "PT Serif", ui-serif, Georgia, "Times New Roman", serif;

  /* Типографические ступени, объявленные в DESIGN.md.
     Заведены токенами, а не литералами: роль читается из имени, а детектор
     перестаёт считать документированные значения дрейфом. */
  --fs-control:     1rem;      /* кнопки и пункты навигации */
  --fs-title-xs:    1.05rem;   /* заголовок карточки — одна роль, один кегль */
  --fs-body-narrow: 16px;      /* корпус ниже 640px */
  --fs-hero-narrow: 2.08rem;   /* заголовок героя ниже 640px */
  --fs-quote-mark:  52px;      /* орнаментальная кавычка в карточке отзыва */

  /* Radii */
  --r-hair:  2px;   /* волосяные полоски: подчёркивание навигации, штрихи бургера */
  --r-micro: 6px;
  --r-xs: 8px;
  --r-control: 10px;  /* элементы управления: пункт меню, поле ввода (DESIGN.md rounded.control) */
  --r-sm: 12px;
  --r-nested: 14px;   /* вложенное: панель меню, элемент FAQ (DESIGN.md rounded.nested) */
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows — real offset + soft blur */
  --shadow-xs: 0 1px 2px rgba(18,52,55,.06);
  --shadow-sm: 0 2px 8px rgba(18,52,55,.06), 0 1px 2px rgba(18,52,55,.05);
  --shadow-md: 0 12px 30px -12px rgba(18,52,55,.18), 0 4px 10px -6px rgba(18,52,55,.12);
  --shadow-lg: 0 34px 60px -22px rgba(18,52,55,.34), 0 12px 24px -14px rgba(18,52,55,.22);
  --shadow-brand: 0 22px 46px -20px rgba(73,165,152,.55);


  /* Шкала отступов, слои и брейкпоинты кабинета переехали в
     webapp/src/design/tokens.css вместе с самим кабинетом: там они читаются
     Tailwind, здесь их не использовал никто. Цвета, радиусы, тени и кегли
     остаются здесь — это общий словарь лендинга и кабинета, и design-lint
     сверяет, что вторая копия в теме Tailwind ему не противоречит. */

  /* Layout */
  --header-h: 73px;   /* 72px строки + 1px прозрачной границы */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Motion */
  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  overflow-wrap: break-word;   /* long company names / URLs must not push the layout */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
img, svg { display: block; max-width: 100%; }
/* `hidden` из UA-стилей — это `display:none` со специфичностью 0, и любое
   авторское `display` его молча перебивает: .modal-done с `display:flex`
   оставался на экране, хотя атрибут стоял. Атрибут обязан выигрывать всегда. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Themed browser surfaces */
::selection { background: var(--brand-200); color: var(--ink); }
:focus-visible { outline: 2.5px solid var(--brand-600); outline-offset: 3px; border-radius: var(--r-micro); }
html { scrollbar-color: var(--brand-200) transparent; color-scheme: light; }

/* Skip link — first stop for a keyboard user, invisible until it matters */
.skip-link {
  position: absolute; left: 50%; top: 0; z-index: 100;
  transform: translate(-50%, -140%);
  background: var(--ink); color: var(--on-dark);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; font-size: .95rem;
  box-shadow: var(--shadow-md);
  transition: transform .18s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -0.028em; color: var(--ink); }
.accent { color: var(--brand-700); }
p { margin: 0; }

.display {
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.12;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.14;
  text-wrap: balance;
}
.lead {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 34ch;
}
.eyebrow-accent { color: var(--brand-700); }

/* ---------- 4. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* viewport-fit=cover lets the page under the notch; the gutter takes it back
     in landscape, where the cutout eats the left or right edge. */
  padding-inline:
    calc(var(--gutter) + env(safe-area-inset-left, 0px))
    calc(var(--gutter) + env(safe-area-inset-right, 0px));
}
.section { padding-block: clamp(64px, 8vw, 120px); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85rem 1.4rem;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-control); letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform .18s var(--ease-out), background .18s, box-shadow .25s, border-color .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-700); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-800); box-shadow: 0 26px 52px -20px rgba(73,165,152,.7); }
.btn-dark { background: var(--ink); color: var(--on-dark); }
.btn-dark:hover { background: #0c2528; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(18,52,55,.03); }
.btn-lg { padding: 1rem 1.7rem; font-size: 1.02rem; }

/* ---------- 6. Badges / pills / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .38rem .8rem; border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 600; letter-spacing: -0.01em;
  background: var(--brand-100); color: var(--brand-700);
  border: 1px solid rgba(73,165,152,.22);
}
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .9rem; color: var(--text-soft); font-weight: 500;
}
.chip svg { color: var(--brand-600); flex: none; }

/* ---------- 7. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Граница объявлена прозрачной, а не отсутствующей: иначе её появление
     сдвинуло бы страницу на пиксель в момент перехода. */
  transition: background .28s var(--ease-out), backdrop-filter .28s, border-color .28s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 2rem;
  height: 72px;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-size: 1.22rem; }
/* Логотип живёт на «Степном шалфее тёмном»: плашка залита им, литера белая —
   ровно та пара, что даёт 5.86:1, поэтому знак читается и на 16px фавикона. */
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand-700);
  display: grid; place-items: center; color: #fff;
  box-shadow: var(--shadow-sm);
}
/* Kazakh labels run ~40% longer than the Russian ones ("Қалай жұмыс істейді"),
   so the gap gives way before the nav starts shoving the header actions off-screen. */
.nav { display: flex; gap: clamp(.85rem, 1.9vw, 1.6rem); margin-inline: auto; min-width: 0; }
.nav a { color: var(--text-soft); font-weight: 500; font-size: var(--fs-control); position: relative; padding-block: .3rem; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--brand); border-radius: var(--r-hair); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease-out); }
.nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: .9rem; }
.link-quiet { font-weight: 600; font-size: .95rem; color: var(--ink); }
.link-quiet:hover { color: var(--brand-700); }

.burger {
  display: none;
  width: 42px; height: 42px; border-radius: 12px;
  background: transparent; border: 1px solid var(--line-strong);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { width: 18px; height: 2px; border-radius: var(--r-hair); background: var(--ink); transition: transform .25s var(--ease-out), opacity .2s; }
.burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity: 0; }
.burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(140%) blur(14px);
  padding: 1rem var(--gutter) 1.4rem;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { padding: .85rem .2rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-menu-foot { display: flex; flex-direction: column; gap: .8rem; padding-top: 1.1rem; }
.mobile-menu-foot .btn { justify-content: center; }

/* ---------- 8. Hero (Nexura-light: airy, warm, centered) ---------- */
.hero {
  position: relative; overflow: clip;
  /* Герой подтянут под липкую шапку, а отступ возвращает содержимое на место.
     Иначе свечение обрывается по нижней кромке шапки и наверху остаётся плоская
     белая полоса со швом — а шапка прозрачна как раз ради того, чтобы дымка
     продолжалась сквозь неё. */
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  background:
    radial-gradient(46% 40% at 50% -8%, rgba(73,165,152,.18), transparent 72%),
    radial-gradient(38% 34% at 10% 26%, rgba(255,180,113,.16), transparent 72%),
    radial-gradient(40% 34% at 90% 22%, rgba(120,205,184,.20), transparent 72%),
    var(--white);
}
.hero-inner { position: relative; z-index: 2; text-align: center; padding-block: clamp(38px, 5.5vw, 80px) clamp(44px, 6vw, 80px); }
.hero-head { max-width: 860px; margin-inline: auto; position: relative; }
.hero-head > * + * { margin-top: 1.35rem; }
.hero h1 { font-size: clamp(2.35rem, 1.1rem + 4.7vw, 4.15rem); font-weight: 600; letter-spacing: -0.032em; line-height: 1.12; max-width: 17ch; margin-inline: auto; text-wrap: balance; }
.hero .lead { margin-inline: auto; max-width: 52ch; text-align: center; font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* integration logos row */
.hero-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem; padding-top: .7rem; }
.hero-logos .lbl { font-size: .82rem; font-weight: 600; color: var(--muted); }
.logo-row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; justify-content: center; }
.logo-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; color: var(--text-soft); }
.logo-item .lg { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); overflow: hidden; }
.logo-item .lg img { width: 24px; height: 24px; object-fit: contain; display: block; }

/* floating annotation pills around the headline (Nexura) */
.hero-floats { position: absolute; inset: -2% -2% 6%; z-index: 3; pointer-events: none; }
.float {
  position: absolute; display: flex; align-items: center; gap: .55rem;
  background: var(--white); color: var(--ink);
  padding: .5rem .75rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-md); border: 1px solid var(--line);
  font-size: .8rem; font-weight: 600; text-align: left; white-space: nowrap;
  animation: floaty 6s ease-in-out infinite;
}
.float small { display: block; font-weight: 500; font-size: .7rem; color: var(--muted); }
.float .ava { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #06251f; flex: none; }
.float .tick { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; color: #06251f; flex: none; }
.float-a { top: 4%; left: 0.5%; animation-delay: -1s; }
.float-b { top: 9%; right: 0.5%; animation-delay: -3s; }
.float-c { top: 41%; left: 0.5%; animation-delay: -2s; }
.float-d { top: 33%; right: 0.5%; animation-delay: -4.5s; }
.a-teal { background:#7fd0c2; } .a-sage { background:#a7d8a0; } .a-mint { background:#bfe0d9; }

/* ---------- 8b. Product: browser frame + cabinet replica ---------- */
.product { position: relative; z-index: 2; max-width: 1060px; margin: clamp(30px, 4vw, 56px) auto 0; }
.product::before {
  content: ""; position: absolute; inset: 6% -4% -10%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 30%, rgba(73,165,152,.18), transparent 72%);
  filter: blur(20px);
}
.browser {
  border-radius: 16px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 46px 90px -34px rgba(18,52,55,.42), 0 18px 34px -20px rgba(18,52,55,.26);
  overflow: hidden; text-align: left;
}
.browser-bar { display: flex; align-items: center; gap: .5rem; padding: .62rem .95rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.browser-bar .r { background: #f0776f; } .browser-bar .y { background: #f2c14e; } .browser-bar .g { background: #67c98f; }
.browser-url { margin: 0 auto; font-size: .76rem; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: .28rem 1.1rem; display: inline-flex; align-items: center; gap: .4rem; }
.browser-url svg { color: var(--brand-600); }

/* annotation cards overlapping the product */
.pin { position: absolute; z-index: 4; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: .7rem .85rem; font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: .6rem; animation: floaty 7s ease-in-out infinite; }
.pin small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); }
.pin-1 { top: 58%; left: -9%; animation-delay: -1.5s; }
.pin-2 { bottom: -5%; right: -7%; animation-delay: -3.5s; }
.pin .stat { background: var(--brand-700); color: #fff; border-radius: 12px; padding: .5rem .7rem; text-align: center; }
.pin .stat b { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1; }
.pin .stat small { color: rgba(255,255,255,.85); font-size: .72rem; }

/* ===== Cabinet replica ===== */
/* Метрика реплики — ЧУЖАЯ и заперта здесь, ровно как палитра Zoom заперта на
   .zoomwin. Кабинет живёт по своим кеглям; выносить их в общую лестницу нельзя,
   а рассыпать литералами по коду — значит выдавать чужую метрику за свою. */
.cab {
  --cab-h: 1rem; --cab-desc: .86rem; --cab-day: 2.1rem;
  display: flex; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.4; min-height: 470px;
}
.cab-side { width: 208px; flex: none; border-right: 1px solid var(--line); padding: 16px 14px; display: flex; flex-direction: column; gap: 16px; }
.cab-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .92rem; }
.cab-brand .m { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-700); display: grid; place-items: center; color: #fff; flex: none; }
.cab-nav { display: flex; flex-direction: column; gap: 2px; }
.cab-nav a { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 10px; color: var(--muted); font-weight: 500; }
.cab-nav a.active { background: var(--tint); color: var(--brand-700); font-weight: 600; }
.cab-nav a svg { flex: none; }
.cab-hr { height: 1px; background: var(--line); margin: 4px 2px; }
.cab-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; }
.cab-foot b { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand-700); font-weight: 600; font-size: .82rem; }
.cab-foot small { color: var(--muted); font-size: .74rem; }

.cab-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cab-top { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 1px solid var(--line); }
/* Replica headings are div/p, not h3–h5: a picture of an app must not inject
   headings into this page's outline (DESIGN.md: Правило честной реплики). */
.cab-top .cab-h { font-size: var(--cab-h); font-weight: 700; margin: 0; line-height: 1.08; letter-spacing: -0.03em; }
.cab-lang { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--text-soft); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .35rem .7rem; }
.cab-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 20px; }

.cab-welcome { border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: grid; grid-template-columns: 1fr 290px; gap: 22px; }
.cab-badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--tint); color: var(--brand-700); font-weight: 600; font-size: .76rem; padding: .3rem .7rem; border-radius: var(--r-pill); }
.cab-badge .d { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.cab-welcome .cab-title { font-size: 1.5rem; font-weight: 800; margin: 12px 0 0; line-height: 1.08; letter-spacing: -0.03em; }
.cab-desc { color: var(--muted); font-size: var(--cab-desc); max-width: 42ch; margin-top: 8px; }
.cab-stats { display: flex; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
.cab-stat { display: flex; align-items: center; gap: .6rem; }
.cab-stat .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--tint); display: grid; place-items: center; color: var(--brand-700); flex: none; }
.cab-stat b { font-size: 1.25rem; font-weight: 800; display: block; line-height: 1; }
.cab-stat small { color: var(--muted); font-size: .76rem; }

.cab-date { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; align-self: start; }
.cab-date-head { background: var(--ink); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: .7rem; }
.cab-date-head .day { font-size: var(--cab-day); font-weight: 800; line-height: 1; }
.cab-date-head span { font-size: .82rem; font-weight: 600; }
.cab-date-head small { display: block; font-weight: 500; color: rgba(255,255,255,.82); }
.cab-date-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cab-date-body .lbl { font-size: .72rem; color: var(--muted); }
.cab-meet { display: flex; align-items: center; justify-content: space-between; }
.cab-meet b { font-weight: 700; font-size: .92rem; }
.cab-meet .mg { width: 22px; height: 22px; border-radius: 6px; background: #e8f0ee; display: grid; place-items: center; }
.cab-time { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-soft); font-size: .82rem; }
.cab-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; font-size: .84rem; }
.cab-toggle { width: 38px; height: 22px; border-radius: 999px; background: var(--brand); position: relative; }
.cab-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.cab-link { color: var(--brand-700); font-weight: 600; font-size: .82rem; text-decoration: underline; text-underline-offset: 2px; }

.cab-add .cab-add-title { font-size: 1.15rem; font-weight: 800; margin: 0; line-height: 1.08; letter-spacing: -0.03em; }
.cab-add .sub { color: var(--muted); font-size: .84rem; margin-top: 4px; }
.cab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.cab-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.cab-card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); display: grid; place-items: center; color: #fff; margin-bottom: 12px; }
.cab-card .cab-card-title { font-size: .92rem; font-weight: 700; margin-block: 1.67em; }  /* 1.67em keeps the h5 rhythm the replica was built on */
.cab-card p { font-size: .78rem; color: var(--muted); margin-top: 4px; }

/* ---------- 9. Animations ---------- */
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-9px);} }

/* entrance — gated on .js: if the script never runs, the hero must still be readable */
.js .reveal { opacity: 0; transform: translateY(18px); }
.is-in .reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.is-in .reveal:nth-child(2){ transition-delay:.06s; } .is-in .reveal:nth-child(3){ transition-delay:.12s; }
.is-in .reveal:nth-child(4){ transition-delay:.18s; } .is-in .reveal:nth-child(5){ transition-delay:.24s; }

/* ---------- 9b. Touch ---------- */
@media (pointer: coarse) {
  .burger { width: 46px; height: 46px; }                 /* was 42 */
  /* Знак 34px — единственная настоящая ссылка ниже порога касания; в подвале у
     .brand стоит padding:0 с большей специфичностью, поэтому он назван явно. */
  .brand, .footer a.brand { padding-block: 5px; }        /* 34px → 44px */
  /* Ссылки ДЕСКТОПНОЙ раскладки: бургер появляется по ширине окна, а не по типу
     указателя, поэтому ноутбук с тачскрином получает именно эту навигацию — с
     ссылками 35px и «Войти» 24px. Площадь растим псевдоэлементом, а не полями:
     иначе подчёркивание .nav a::after уедет от текста вниз. */
  .nav a, .link-quiet { position: relative; }
  .nav a::before, .link-quiet::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
  .mobile-menu nav a { padding-block: 1rem; }
}

/* ---------- 9c. Форма заявки: диалог, поля, состояния ---------- */
/* Диалог — единственный объект с глубокой тенью, когда он открыт: подложка
   гасит всё остальное, и правило «одна тень больше 40px на экран» соблюдено. */
.modal {
  width: min(500px, calc(100vw - 2 * var(--gutter)));
  max-height: min(86dvh, 780px);
  padding: 0; border: none; background: transparent;
  overflow: visible;   /* прокручивается тело карточки, а не сам <dialog> */
}
.modal::backdrop { background: rgba(18,52,55,.55); }
.modal-card {
  position: relative;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 4vw, 32px);
}
/* Крестик прижат к углу карточки, а заголовок под ним ужат: иначе длинная
   строка заголовка уезжает под кнопку. */
.modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--r-micro);
  color: var(--muted);
  transition: color .18s, background .18s;
}
.modal-x:hover { color: var(--ink); background: var(--surface); }
.modal-title { padding-right: 34px; font-size: 1.22rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }

.modal-form { display: flex; flex-direction: column; gap: 1.05rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label { font-size: .88rem; font-weight: 600; color: var(--text); }
/* Кромка поля — --line-control: декоративная --line даёт 1.38:1 и по WCAG 1.4.11
   не может быть единственной границей контрола. */
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea {
  font: inherit; font-size: 1rem; color: var(--text);
  width: 100%; padding: .72rem .85rem;
  background: var(--white);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.field ::placeholder { color: var(--muted); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--ink-700); }
.field :focus-visible { outline: 2.5px solid var(--brand-600); outline-offset: 1px; }
/* Ошибка красит кромку, но не остаётся единственным её признаком: под полем
   стоит текст — цвет не может нести смысл в одиночку (WCAG 1.4.1). */
.field.is-bad input, .field.is-bad textarea { border-color: var(--caution); }
.field-err, .form-err { font-size: .82rem; font-weight: 500; color: var(--caution); }
.form-err {
  background: rgba(184,81,74,.07);
  border: 1px solid rgba(184,81,74,.28);
  border-radius: var(--r-control);
  padding: .6rem .8rem;
}

/* Ловушка для ботов: поле убрано с экрана, но остаётся в потоке разметки.
   Именно поэтому не `display: none` — такие поля часть ботов пропускает, а это
   заполняет. Схема стандартная visually-hidden, размер 1px вместо нуля: поле
   нулевой высоты некоторые браузеры считают недоступным и пропускают тоже. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.field .check { display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; color: var(--muted); line-height: 1.45; font-weight: 400; }
.field .check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand-700); }
.field .check a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.field .check a:hover { text-decoration: none; }

.modal-submit { justify-content: center; margin-top: .2rem; }
/* Отправка: кнопка гаснет и перестаёт принимать повторные клики, но текст
   меняется — одна прозрачность не сообщает, что запрос пошёл. */
.modal-submit[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.modal-submit[disabled]:hover { background: var(--brand-700); box-shadow: none; }

.modal-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding-block: .8rem 0; }
.done-tick { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--brand-700); }
.modal-done p { color: var(--muted); font-size: .96rem; max-width: 34ch; }
.modal-done .btn { margin-top: .4rem; }

@media (max-width: 640px) {
  .modal { width: 100%; max-width: none; max-height: 92dvh; margin: auto auto 0; }
  .modal-card { border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
  .modal-submit { width: 100%; }
}

/* ---------- 10. Responsive ---------- */
@media (max-width: 1080px) {
  .hero-floats .float-a { left: -1%; } .hero-floats .float-b { right: -1%; }
  .pin { display: none; }   /* no room outside the frame — framing must not cover content */
}
@media (max-width: 960px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header-actions .link-quiet { display: none; }
  /* Вправо шапку разводила навигация своими auto-полями. Убрали её — и действия
     съехались к логотипу. Отступ переходит к самому блоку действий, а не к nav. */
  .header-actions { margin-left: auto; }
  .hero-floats { display: none; }   /* keep headline clean; product carries the proof */

  /* The replica now reflows instead of scaling, so its own two-column blocks have
     to break before they squeeze: the 290px date card would otherwise crush the
     welcome text to ~130px. */
  .cab-welcome { grid-template-columns: 1fr; }
  .cab-cards { grid-template-columns: 1fr 1fr; }
}
/* Mobile: crop, don't shrink.
   The cabinet scaled to width rendered its body text at ~5px — a thumbnail of a
   proof is not a proof. Below 760px the replica drops the chrome it cannot afford
   (sidebar, page header, the three "add a meeting" cards) and keeps the two things
   that carry the promise at full size: what the product has already processed, and
   what it is about to record. Every pixel is still the real interface. */
@media (max-width: 760px) {
  .product { margin-top: clamp(26px, 5vw, 40px); }
  .browser { border-radius: var(--r-md); }
  .browser-bar,
  .cab-side,
  .cab-top,
  .cab-add { display: none; }
  .cab-body { padding: 16px; gap: 16px; }
  .cab-welcome { grid-template-columns: 1fr; gap: 18px; padding: 16px; border: 0; }
  .cab-stats { gap: 14px 18px; margin-top: 16px; }
  .cab-date { align-self: stretch; }
}
@media (max-width: 640px) {
  body { font-size: var(--fs-body-narrow); }
  .header-inner { height: 62px; gap: 1rem; }
  :root { --header-h: 63px; }
  .header-actions { gap: .5rem; }
  .header-actions .btn-primary { display: none; }
  .hero-inner { padding-top: 22px; }
  .hero h1 { font-size: var(--fs-hero-narrow); letter-spacing: -0.03em; }
  .hero-head > * + * { margin-top: 1.1rem; }
  .hero .lead { font-size: 1.05rem; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .hero-logos { gap: .4rem .9rem; }
  .logo-row { gap: 1rem; }
  .brand-name { font-size: 1.05rem; }
}

/* Reduced motion: kill the ambient loops and the travel, keep the state feedback.
   A blanket .001ms also erases the answer opening and the chevron turning — the two
   places where motion is the only signal that something happened. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float, .pin, .marquee-track { animation: none !important; }
  .js .reveal, .rise { opacity: 1 !important; transform: none !important; }
  .is-in .reveal, .in-view { transition: none !important; }
  *, *::before, *::after { transition-duration: .08s !important; animation-iteration-count: 1 !important; }
}