/* Saraf landing — base styles + Emerald + Gold palette */

:root {
  --max: 1280px;
  --pad: clamp(20px, 4vw, 64px);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  --bg: #0a1614;
  --bg-2: #0e1f1c;
  --bg-3: #122724;
  --surface: #15302b;
  --surface-2: #1a3a34;
  --surface-hi: #214843;
  --border: rgba(212, 175, 55, 0.14);
  --border-strong: rgba(212, 175, 55, 0.32);
  --border-soft: rgba(244, 247, 246, 0.08);
  --primary: #00756a;
  --primary-deep: #003d38;
  --primary-tint: rgba(0, 117, 106, 0.18);
  --accent: #d4af37;
  --accent-soft: #b8962d;
  --accent-glow: rgba(212, 175, 55, 0.35);
  --text: #f4f7f6;
  --text-2: #c5d3d0;
  --text-muted: #8da19d;
  /* 4.8:1 на --bg — самый тусклый текст обязан проходить WCAG AA (#5e706c давал 3.6:1) */
  --text-dim: #748680;
  --danger: #cc5547;
  --good: #4eb077;
  --hero-bg: radial-gradient(circle at 80% -10%, rgba(212, 175, 55, 0.12), transparent 50%),
              radial-gradient(circle at 10% 30%, rgba(0, 117, 106, 0.18), transparent 55%),
              linear-gradient(180deg, #0a1614, #08110f);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent); color: var(--bg); }

/* Guard against accidental horizontal scroll on narrow viewports.
   width:100% caps the document to the viewport so a stray wide child cannot
   create a scrollable page; overflow-x:hidden clips whatever still spills. */
html, body { overflow-x: hidden; overflow-x: clip; width: 100%; max-width: 100%; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* hide elements per active language.
   Видимость ключуется на НАШ атрибут data-lang, а не на lang: встроенный
   переводчик Chrome переписывает lang на целевой язык (напр. "en"), и все
   ru/uz-спаны, завязанные на html[lang], разом скрывались — страница пустела.
   Нет data-lang или значение неизвестно → по умолчанию виден RU. */
html:not([data-lang="uz"]):not([data-lang="en"]) [data-uz-only],
html:not([data-lang="uz"]):not([data-lang="en"]) [data-en-only] { display: none !important; }
html[data-lang="uz"] [data-ru-only], html[data-lang="uz"] [data-en-only] { display: none !important; }
html[data-lang="en"] [data-ru-only], html[data-lang="en"] [data-uz-only] { display: none !important; }

/* EN button only visible on pages that have EN content */
.lang-switch button[data-lang="en"] { display: none; }
body.has-en .lang-switch button[data-lang="en"] { display: inline-flex; align-items: center; }

/* ─── Typography utilities ─── */

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55;
}

.h-display { font-size: clamp(36px, 4.8vw, 64px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; }
.h1 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 500; text-wrap: balance; }
.h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; }
.h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -0.012em; font-weight: 600; }
.h4 { font-size: 17px; line-height: 1.25; letter-spacing: -0.005em; font-weight: 600; }

.lede { font-size: clamp(16px, 1.3vw, 19px); color: var(--text-2); line-height: 1.55; max-width: 60ch; text-wrap: pretty; }
.body { color: var(--text-2); line-height: 1.6; }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }

.numeric { font-variant-numeric: tabular-nums; }
.gold { color: var(--accent); }
.serif { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-weight: 500; }

/* ─── Layout ─── */

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: clamp(48px, 6vw, 88px) 0; position: relative; }
.section-tight { padding: clamp(32px, 4vw, 56px) 0; }

.hairline { width: 100%; height: 1px; background: var(--border-soft); }
.hairline-gold { background: linear-gradient(90deg, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent); }

/* ─── Buttons ─── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 500; font-size: 14.5px; letter-spacing: -0.005em;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent); color: #1a1208;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 0 0 1px var(--accent-soft);
}
.btn-primary:hover { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent), 0 4px 24px var(--accent-glow); }

.btn-ghost {
  background: transparent; color: var(--text); box-shadow: 0 0 0 1px var(--border-strong) inset;
}
.btn-ghost:hover { background: var(--primary-tint); box-shadow: 0 0 0 1px var(--accent) inset; }

.btn-emerald {
  background: var(--primary); color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset;
}
.btn-emerald:hover { background: var(--surface-hi); }

.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }
.btn-lg { height: 56px; padding: 0 32px; font-size: 15.5px; }

.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 500; font-size: 14px;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.15s, gap 0.15s;
}
.link:hover { border-color: var(--accent); gap: 12px; }

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

.card {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
}

.card-glow {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.card-glow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, var(--primary-tint), transparent 60%);
  opacity: 0.6;
}

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--primary-tint); color: var(--accent);
  border: 1px solid var(--border);
}

.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; display: inline-block; }
.dot.pulse { box-shadow: 0 0 0 0 currentColor; animation: pulse 2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ─── Mockups frames ─── */

.frame-glass {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 80px rgba(0,0,0,0.5),
    0 0 0 1px var(--border) inset;
  overflow: hidden;
}

.phone-frame {
  border-radius: 38px;
  border: 8px solid #0e1614;
  background: #000;
  box-shadow:
    0 0 0 1px #2a322f inset,
    0 0 0 2px #0a0c0a,
    0 40px 100px rgba(0,0,0,0.55);
  overflow: hidden;
  position: relative;
}

/* ─── Coin animation ─── */

@keyframes spin-coin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.coin {
  width: 64px; height: 64px;
  display: inline-block;
  transform-style: preserve-3d;
  animation: spin-coin 6s linear infinite;
  position: relative;
}
.coin-face {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #f5d567, var(--accent) 50%, var(--accent-soft) 100%);
  box-shadow:
    0 0 0 1px var(--accent-soft) inset,
    0 0 24px var(--accent-glow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: #1a1208; font-size: 28px;
  backface-visibility: hidden;
}
.coin-face.back { transform: rotateY(180deg); }

/* ─── Page transition ─── */

.page-enter { animation: fadeInUp 0.45s cubic-bezier(.2, .8, .2, 1); }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Grid / flex helpers ─── */

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.center { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }

@media (max-width: 880px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .site-footer .grid-5 { grid-template-columns: 1fr; }
  .grid-2.md-keep, .grid-3.md-keep { grid-template-columns: repeat(2, 1fr); }
  .hide-md { display: none !important; }
}

.scroll-x { overflow-x: auto; scrollbar-width: thin; }
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

/* ─── Inputs ─── */

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase;
}
.field input, .field textarea, .field select {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  background: var(--bg-3);
  /* outline убран выше, поэтому фокус обязан быть виден не только сменой рамки */
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22);
}
.field textarea { min-height: 120px; resize: vertical; }

/* ─── Site chrome ─── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.site-header.scrolled {
  background: rgba(10, 22, 20, 0.78);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 24px;
  flex-wrap: nowrap;          /* desktop header must never wrap into rows */
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; letter-spacing: -0.01em; font-size: 18px;
}
.nav-links { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.nav-link {
  padding: 10px 14px; border-radius: 8px;
  color: var(--text-2); font-weight: 400;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--accent); font-weight: 500; }

.lang-switch {
  display: flex; padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  font-size: 12px; font-weight: 500;
}
.lang-switch button {
  padding: 6px 12px; border-radius: 999px;
  color: var(--text-muted); letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s;
}
.lang-switch button.active { background: var(--accent); color: #1a1208; }

.header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }

/* Collapse the desktop nav into the hamburger BEFORE it can overflow.
   The full header (brand + 4 links + lang switch + login + CTA) needs ~900px;
   below that the row used to wrap into a ragged multi-line stack. We collapse
   at 980px to match the hero/legal breakpoints and keep one clean row. */
@media (max-width: 980px) {
  .nav-links { display: none; }
  /* !important beats the base `.btn { display: inline-flex }`; the login chip
     moves into the off-canvas .mobile-cta panel on phone. */
  .header-actions .login-btn { display: none !important; }
}

.site-footer { border-top: 1px solid var(--border-soft); margin-top: 56px; }
.site-footer .wrap { padding: 40px var(--pad) 24px; }
.site-footer .grid-4 { gap: 36px; }
.site-footer .grid-5 { gap: 32px; grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr; }
.footer-col-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent); font-weight: 500; margin-bottom: 16px;
}
.footer-list { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
/* Ссылки футера — блочные с вертикальным паддингом: зона тапа ~35px вместо 17px */
.footer-list a { display: inline-block; padding: 7px 0; color: var(--text-2); transition: color 0.15s; }
.footer-list a:hover { color: var(--accent); }

/* ─── Hero ─── */

.hero { background: var(--hero-bg); position: relative; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  align-items: center;
  padding: clamp(36px, 4vw, 64px) 0 clamp(48px, 5vw, 72px);
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 40px; }
}

/* ─── Product card ─── */

.product-card {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 0.2s, transform 0.2s;
  position: relative; overflow: hidden;
}
.product-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.product-card .icon-wrap {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--primary-tint);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  border: 1px solid var(--border);
}

/* ─── Pricing card ─── */

.price-card {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  position: relative;
}
.price-card.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
  box-shadow: 0 0 40px var(--accent-glow);
}
.price-card .popular {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #1a1208;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
}
.price-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4vw, 52px); line-height: 1;
  color: var(--accent); letter-spacing: -0.03em; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.price-suffix { font-size: 0.4em; color: var(--text-muted); margin-left: 6px; }
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); }
.feature-list .check { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* ─── Feature row (numbered) ─── */

.feature-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 20px;
  padding: 18px 0; border-top: 1px solid var(--border-soft);
}
.number-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--primary-tint); border: 1px solid var(--border);
  color: var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* ─── Stat ─── */

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat { border-left: 1px solid var(--border-soft); padding-left: 20px; }
.stat-value {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(36px, 4vw, 52px); line-height: 1;
  color: var(--accent); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-value-suffix { font-size: 0.6em; color: var(--text-muted); margin-left: 4px; }
.stat-label { color: var(--text-muted); font-size: 13px; margin-top: 8px; }

/* ─── Privacy / legal page ─── */

.legal-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 980px) {
  .legal-shell { grid-template-columns: 1fr; gap: 32px; }
}

.legal-toc {
  position: sticky; top: 96px;
  font-size: 13px;
  border-left: 1px solid var(--border-soft);
  padding-left: 20px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
@media (max-width: 980px) {
  .legal-toc { position: static; max-height: none; border-left: none; padding-left: 0; }
}
.legal-toc .toc-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent); font-weight: 500; margin-bottom: 14px;
}
.legal-toc ol {
  list-style: none; counter-reset: toc;
  display: flex; flex-direction: column; gap: 6px;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: block; padding: 4px 0;
  color: var(--text-2); line-height: 1.4;
  border-left: 2px solid transparent;
  margin-left: -22px; padding-left: 20px;
  transition: color 0.15s, border-color 0.15s;
}
.legal-toc a:hover { color: var(--accent); }
.legal-toc a.tldr-link { color: var(--accent); }
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero) " · ";
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.legal-toc a.tldr-link::before { content: ""; }

.legal-content { max-width: 760px; }
.legal-content h2 {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin-top: 56px;
  margin-bottom: 20px;
  scroll-margin-top: 96px;
  display: flex; align-items: baseline; gap: 14px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h2 .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.7em; color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.legal-content h3 {
  font-size: 17px; font-weight: 600;
  margin-top: 28px; margin-bottom: 12px;
  color: var(--text);
  scroll-margin-top: 96px;
}
.legal-content p { color: var(--text-2); margin-bottom: 14px; line-height: 1.65; }
.legal-content ul, .legal-content ol { color: var(--text-2); margin: 0 0 16px 22px; line-height: 1.65; }
.legal-content ul li, .legal-content ol li { margin-bottom: 6px; }
.legal-content code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--accent);
  background: var(--primary-tint);
  padding: 2px 6px;
  border-radius: 4px;
}
.legal-content strong { color: var(--text); font-weight: 600; }
.legal-content a { color: var(--accent); border-bottom: 1px solid var(--border-strong); }
.legal-content a:hover { border-color: var(--accent); }
.legal-content blockquote {
  margin: 16px 0;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  background: var(--primary-tint);
  border-radius: 0 8px 8px 0;
  color: var(--text);
  font-size: 14.5px;
  font-style: normal;
}
.legal-content blockquote p { margin-bottom: 0; color: var(--text); }

.legal-table-wrap { overflow-x: auto; margin: 16px 0 20px; }
.legal-table {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.legal-table th, .legal-table td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.legal-table th {
  background: var(--bg-2);
  font-weight: 500;
  color: var(--text);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-table td { color: var(--text-2); }
.legal-table td strong { color: var(--text); }

.legal-meta {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  padding: 16px 20px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  margin-bottom: 32px;
  font-size: 13px;
  color: var(--text-2);
}
.legal-meta .label { color: var(--text-muted); margin-right: 4px; }
.legal-meta code { color: var(--accent); }

.legal-hero {
  padding: 48px 0 28px;
  background: var(--hero-bg);
  border-bottom: 1px solid var(--border-soft);
}
.legal-hero .wrap { max-width: 880px; }
.legal-hero h1 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 14px; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES (added)
   Single source of truth for everything <= 720px / 480px. Lives at the
   bottom so cascade picks it up over the more general rules above. Existing
   desktop CSS is intentionally NOT touched.
   ════════════════════════════════════════════════════════════════════════════ */

/* Inputs >= 16px to suppress mobile Safari/Chrome auto-zoom on focus. */
@media (max-width: 720px) {
  .field input, .field textarea, .field select {
    font-size: 16px;
  }
}

/* Header: free space for hamburger, drop the CTA + login chip from the bar.
   On phone the top bar keeps only brand + lang switch + hamburger; the CTA and
   login chip live inside the off-canvas .mobile-cta panel. Triggers together
   with the hamburger at 980px so the header never shows both desktop nav +
   hamburger, nor the CTA twice (bar + panel). */
@media (max-width: 980px) {
  .site-header .wrap { height: 60px; gap: 12px; padding-left: 16px; padding-right: 16px; }
  .header-actions { gap: 8px; flex-wrap: nowrap; }
  .header-actions .btn-sm { padding: 0 12px; height: 34px; font-size: 12.5px; }
  /* The primary "Попробовать бесплатно" hides on phone — it's reachable from
     the hamburger panel and from every CTA below. !important so it beats the
     base `.btn { display: inline-flex }` regardless of cascade order and any
     inline/utility display set on the chip. Without it the top-bar CTA stays
     visible and duplicates the one inside the off-canvas .mobile-cta panel. */
  .site-header .header-actions > a.btn-primary { display: none !important; }
  .lang-switch { padding: 2px; }
  /* Зона тапа кнопки языка ≥32px по высоте (было ~24px) */
  .lang-switch button { padding: 8px 11px; font-size: 12px; }
  .brand span { font-size: 16px; }
}

/* Hamburger button — only visible on phone. */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-soft);
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255,255,255,0.04); }
.nav-toggle .bar {
  width: 18px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  position: relative;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: '';
  position: absolute; left: 0;
  width: 18px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.2s;
}
.nav-toggle .bar::before { top: -6px; }
.nav-toggle .bar::after  { top:  6px; }

/* Mobile nav panel — fixed off-canvas, slides down from the header. */
.mobile-nav {
  display: none;
  position: fixed;
  top: 60px; left: 0; right: 0;
  background: rgba(10, 22, 20, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-soft);
  padding: 20px var(--pad) 28px;
  z-index: 49;
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a.nav-link {
  display: block;
  padding: 14px 4px;
  color: var(--text);
  font-size: 17px; font-weight: 500;
  border-bottom: 1px solid var(--border-soft);
}
.mobile-nav a.nav-link:last-of-type { border-bottom: none; }
.mobile-nav a.nav-link.active { color: var(--accent); }
.mobile-nav .mobile-cta {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 20px;
}
.mobile-nav .mobile-cta .btn { width: 100%; height: 48px; }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  body.nav-open { overflow: hidden; }    /* lock scroll while panel open */
}

/* Hero composition: stop absolute positioning on phone, stack flow. */
@media (max-width: 720px) {
  .hero-grid { gap: 24px; padding: 24px 0 36px; }
  /* Inline-positioned hero cards on index.html (right-side stack of 3). */
  .hero .hide-md { display: none !important; }   /* kill the heavy visual */
  /* Stat strip: 4 cells become a 2×2 grid so the numbers stay legible
     instead of being crushed into a single squeezed row. */
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .hero-stats .stat:nth-child(odd) { border-left: none; padding-left: 0; }
  .stat { padding-left: 14px; }
  .stat-value { font-size: clamp(26px, 7vw, 36px); }
  .stat-label { font-size: 11.5px; line-height: 1.35; margin-top: 6px; }
  /* Hero buttons full-width is easier to tap. The inline flex row wraps,
     so make both CTAs span the full width and stack cleanly. */
  .hero .hero-grid .btn-lg { height: 48px; padding: 0 18px; font-size: 14.5px; width: 100%; }
}

/* Eyebrow + h-display sit closer to viewport top on phone. */
@media (max-width: 720px) {
  .h-display { font-size: clamp(30px, 8vw, 40px); }
  .h1        { font-size: clamp(26px, 6.8vw, 34px); }
  .h2        { font-size: clamp(22px, 5.4vw, 28px); }
  /* Trim the heavy inline top margin on the hero eyebrow under the header. */
  .hero .eyebrow { margin-top: 20px !important; }
}

/* Section padding: less air. */
@media (max-width: 720px) {
  .section       { padding: 36px 0; }
  .section-tight { padding: 24px 0; }
}

/* Product cards: stay full-width but shorter and tap-friendly. */
@media (max-width: 720px) {
  .product-card { min-height: 0 !important; padding: 22px; }
  .product-card .h2 { font-size: 22px !important; }
}

/* Pricing head + cards on mobile. */
@media (max-width: 720px) {
  .pricing-head { gap: 16px; }
  .pricing-head .h2 { font-size: 22px; }
  .price-card { padding: 22px; }
  .price-amount { font-size: clamp(32px, 9vw, 42px) !important; }
}

/* Footer: 4-col grid becomes 2x2 on phone, then 1-col on really narrow. */
@media (max-width: 720px) {
  .site-footer .grid-4, .site-footer .grid-5 { grid-template-columns: 1fr 1fr !important; gap: 28px; }
  .site-footer .wrap { padding: 32px var(--pad) 24px; }
}
@media (max-width: 420px) {
  .site-footer .grid-4, .site-footer .grid-5 { grid-template-columns: 1fr !important; }
}

/* CTA card padding shrinks. */
@media (max-width: 720px) {
  .card-glow { padding: 32px 22px !important; }
  .card-glow .h1 { margin-bottom: 14px; }
}

/* "Trusted by" row lives as the last direct child <div> inside .hero
   (index.html). Stack the label above the logos and let the logo row
   scroll horizontally instead of wrapping into a ragged wall. */
@media (max-width: 720px) {
  .hero > div:last-child > .wrap {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .hero > div:last-child > .wrap > div {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    gap: 24px !important;
  }
  .hero > div:last-child > .wrap > div::-webkit-scrollbar { display: none; }
  .hero > div:last-child > .wrap > div > span { white-space: nowrap; flex-shrink: 0; }
}

/* ─── Privacy page mobile ──────────────────────────────────────────────── */

@media (max-width: 720px) {
  .legal-shell { gap: 24px; }
  .legal-toc {
    position: static !important;
    max-height: none !important;
    border-left: none !important;
    padding-left: 0 !important;
  }
  .legal-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .legal-toc a { font-size: 13px; padding: 6px 0; }
  .legal-content { max-width: 100%; }
  .legal-content h2 { font-size: 22px; margin-top: 40px; }
  .legal-content h3 { font-size: 16px; }
  .legal-content p, .legal-content li { font-size: 14.5px; }
  /* Tables scroll horizontally only inside the wrapper, page itself stays put. */
  .legal-table-wrap {
    margin: 12px -16px;     /* let the table edge meet the screen edge */
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .legal-table { font-size: 12.5px; min-width: 560px; }
  .legal-table th, .legal-table td { padding: 10px 12px; }
  .legal-meta { gap: 8px 16px; padding: 14px 16px; font-size: 12.5px; }
}

/* ─── Demo form mobile ─────────────────────────────────────────────────── */

@media (max-width: 720px) {
  #demo-form { padding: 24px 20px !important; }
  /* Two-column form rows already collapse via existing .form-row rule; just
     make sure tap targets are tall enough. */
  #demo-form input, #demo-form select, #demo-form textarea { padding: 14px 14px; }
  .product-pick { padding: 14px 16px !important; gap: 12px !important; }
  .product-pick .pick-title { font-size: 15px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE HARDENING — kill horizontal scroll & stacked layouts on phone.
   These rules use !important because the offending widths/grids live in
   *inline* style attributes (e.g. `grid-template-columns: 380px 1fr`,
   `width: 300px`) that a normal class-based media query cannot override.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
  /* Any two-column hero/integration grid collapses to one column. Both the
     index integration block and the product heroes carry .hero-grid, but the
     integration one also sets an inline `380px 1fr`, so we force it here. */
  .hero-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  /* Belt-and-suspenders: layout boxes never exceed the screen width. */
  .wrap > *, .card, .card-glow, .price-card, .product-card,
  .frame-glass, .phone-frame { max-width: 100%; }

  /* index.html — integration diagram: the 1C ↔ products connector is a flex
     row whose middle bar has `min-width:160px` and overflows. Stack it. */
  #integration .card > div > div {
    flex-direction: column !important;
    gap: 20px !important;
  }
  /* Drop the horizontal connector bar (and its spinning coin) on phone so it
     can't force a min-width inside a narrow column. */
  #integration .card [style*="min-width:160px"],
  #integration .card [style*="min-width: 160px"] {
    display: none !important;
  }

  /* pos.html — POS hero mockup: drop the fixed 4/3 ratio so the inner
     catalog/receipt 2-col grid can breathe and never pushes wide. */
  .frame-glass[style*="aspect-ratio"] { aspect-ratio: auto !important; }

  /* sales.html — the hero phone is rotated; rotation makes a 300px box bleed
     past the viewport edge. Straighten it; max-width:100% above caps width. */
  .sales-hero-mock .phone-frame { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   CHROME / BLINK ON ANDROID — header geometry fix.
   Safari (WebKit) shrinks flex children readily; Blink keeps min-width:auto,
   so the brand + actions row refuses to shrink, overflows the viewport and the
   sticky header "falls apart" (разъезжается) only in Chrome on phones. Force
   the flex children to be shrinkable and clip the brand. Desktop is untouched
   (these only apply at the mobile breakpoint). */
@media (max-width: 980px) {
  /* Direct flex children of the header row must be allowed to shrink. */
  .site-header .wrap > * { min-width: 0; }
  /* Brand can truncate instead of pushing the row wider than the screen. */
  .brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The actions cluster keeps its intrinsic size but never forces overflow. */
  .header-actions { min-width: 0; flex: 0 0 auto; }
  /* Belt-and-suspenders: no header descendant may exceed the viewport width. */
  .site-header .wrap, .site-header .wrap * { max-width: 100%; }
}

/* Safe area for notched Android & iOS — small impact on Chrome Android too. */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer .wrap { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .mobile-nav { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}

/* App store download badges (sales page). */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #0a1614;
  border: 1px solid var(--border-soft);
  color: #f4f7f6;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.store-badge:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.store-badge svg { flex-shrink: 0; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge-top { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.store-badge-name { font-size: 16px; font-weight: 600; }
.store-badge--soon {
  cursor: default;
  opacity: .55;
  color: var(--text-muted);
}
.store-badge--soon:hover { border-color: var(--border-soft); transform: none; }
.store-badge--soon .store-badge-name { color: #f4f7f6; }

/* Download section: stack QR under the copy on narrow screens. */
@media (max-width: 720px) {
  .download-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    justify-items: center;
    text-align: center;
  }
  .download-grid > div:first-child .body { margin-left: auto; margin-right: auto; }
  .download-grid > div:first-child > div[style*="flex"] { justify-content: center; }
  .qr-card img { width: 160px !important; height: 160px !important; }
}

/* Mobile apps (pos page): пара карточек приложений с QR. */
.apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  position: relative;
}
.app-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 28px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.app-card .qr-card { align-self: center; }
@media (max-width: 1020px) {
  .apps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .app-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .app-card .body { margin-left: auto; margin-right: auto; }
  .app-card div[style*="flex"] { justify-content: center; }
}

/* ── POS cashier mock (hero на pos.html / index.html) ────────────────────── */
/* Повторяет реальный экран /cashier: статус смены, категории, сетка товаров,
   панель чека со степперами и кнопкой оплаты. Чисто презентационный. */
.pos-mock {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.55);
  font-size: 13px;
  user-select: none;
}
.pos-mock-top {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
}
.pos-mock-shift {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 500; color: var(--good);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(78,176,119,0.12); border: 1px solid rgba(78,176,119,0.28);
  white-space: nowrap;
}
.pos-mock-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 0 0 rgba(78,176,119,0.5);
  animation: posPulse 2.4s ease-out infinite;
}
@keyframes posPulse {
  0% { box-shadow: 0 0 0 0 rgba(78,176,119,0.45); }
  70% { box-shadow: 0 0 0 6px rgba(78,176,119,0); }
  100% { box-shadow: 0 0 0 0 rgba(78,176,119,0); }
}
.pos-mock-search {
  flex: 1; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted);
  padding: 6px 12px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--border-soft);
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.pos-mock-user { font-size: 12px; color: var(--text-2); white-space: nowrap; }

.pos-mock-body {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 188px;
  min-height: 312px;
}
.pos-mock-cats {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 8px;
  border-right: 1px solid var(--border-soft);
}
.pos-mock-cat {
  font-size: 11.5px; color: var(--text-2);
  padding: 8px 9px; border-radius: 8px; text-align: left;
  white-space: nowrap;
}
.pos-mock-cat.is-active {
  background: var(--primary-tint);
  color: var(--text); font-weight: 500;
  border: 1px solid var(--border-soft);
}
.pos-mock-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 96px; gap: 9px;
  padding: 12px; align-content: start;
  border-right: 1px solid var(--border-soft);
  min-width: 0;
}
.pos-mock-prod {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border-soft); border-radius: 10px;
  transition: border-color .15s ease, transform .15s ease;
  overflow: hidden;
}
.pos-mock-prod:hover { border-color: rgba(212,175,55,0.4); transform: translateY(-1px); }
.pos-mock-prod .pm-name {
  font-size: 12px; color: var(--text); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pos-mock-prod .pm-qty { font-size: 10.5px; color: var(--text-muted); margin-top: auto; }
.pos-mock-prod .pm-price { font-size: 13px; font-weight: 600; color: var(--accent); }

.pos-mock-cart { display: flex; flex-direction: column; padding: 12px 12px 12px; }
.pos-mock-cart-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.pos-mock-cart-no { margin-left: auto; letter-spacing: 0; text-transform: none; font-size: 11px; }
.pos-mock-cart-rows { display: flex; flex-direction: column; gap: 2px; }
.pos-mock-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border-soft);
}
.pos-mock-row .pm-rn { font-size: 12px; color: var(--text); }
.pos-mock-row .pm-rt { font-size: 12.5px; color: var(--text-2); }
.pm-step {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted);
}
.pm-step i { font-style: normal; width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft); border-radius: 5px; font-size: 12px; line-height: 1; }
.pm-step b { font-weight: 600; color: var(--text); min-width: 12px; text-align: center; font-size: 12px; }
.pos-mock-total {
  margin-top: auto; padding-top: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.pos-mock-total > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.pm-total-label { font-size: 12px; color: var(--text-muted); }
.pm-total-sum { font-size: 30px; line-height: 1; white-space: nowrap; }
.pos-mock-pay {
  width: 100%;
  background: var(--accent); color: #0a1614;
  border: none; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; padding: 12px 18px;
  cursor: default; white-space: nowrap;
}

/* На узких экранах сетку товаров — в 2 колонки, категории остаются. */
@media (max-width: 520px) {
  .pos-mock-body { grid-template-columns: 72px minmax(0, 1fr); }
  .pos-mock-cart { display: none; }
  .pos-mock-grid { border-right: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Docs preview card (блок «Документация» на pos.html / sales.html) ─────── */
/* Тёмная мини-карточка-превью страницы документации вместо пустой плашки. */
.docs-preview {
  display: flex; flex-direction: column;
  width: 280px; max-width: 100%;
  border: 1px solid var(--border-soft); border-radius: 16px;
  background: var(--bg-2); overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,0.5);
  transition: border-color .18s ease, transform .18s ease;
}
.docs-preview:hover { border-color: rgba(212,175,55,0.4); transform: translateY(-2px); }
.docs-preview-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
}
.docs-preview-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.docs-preview-url { font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.01em; }
.docs-preview-body { padding: 18px 18px 16px; display: flex; flex-direction: column; }
.docs-preview-eyebrow {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 9px;
}
.docs-preview-title {
  font-size: 19px; font-weight: 500; color: var(--text);
  letter-spacing: -0.01em; margin-bottom: 14px;
}
.docs-preview-steps {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.docs-preview-steps li {
  position: relative; padding-left: 22px;
  font-size: 13px; color: var(--text-2); line-height: 1.35;
}
.docs-preview-steps li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 12px; height: 12px; border-radius: 4px;
  background: var(--primary-tint); border: 1px solid var(--border-soft);
}
.docs-preview-steps li::after {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 4px; height: 4px; border-radius: 1px; background: var(--accent);
}
.docs-preview-link {
  font-size: 13px; font-weight: 500; color: var(--accent);
}

/* ── Saraf Sales app mock (hero на sales.html) ───────────────────────────── */
/* Повторяет реальный HomeScreen Android-приложения в ТЁМНОЙ теме (лучше
   вписывается в тёмный лендинг). Цвета — из presentation/theme dark scheme:
   DarkBackground #121218, DarkSurface #1E1E2A, DarkOnSurface #E4E4EC,
   DarkOnSurfaceVariant #9E9EAE, DarkPrimary #5E92F3. Card-акценты те же. */
.phone-frame.sales-app { background: #121218; color: #E4E4EC; }
.sa-header {
  background: linear-gradient(180deg, #1b3a78, #0e2350);
  color: #fff;
  border-radius: 0 0 22px 22px;
  padding: 12px 16px 18px;
}
.sa-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.9); margin-bottom: 14px;
}
.sa-statusbar-icons { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.sa-greeting { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sa-hi { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.sa-role { font-size: 12.5px; color: rgba(255,255,255,0.8); margin-top: 2px; }
.sa-header-actions { display: inline-flex; gap: 12px; color: rgba(255,255,255,0.92); }

.sa-body { padding: 14px 14px 18px; }
.sa-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sa-stat {
  background: #1E1E2A; border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column;
}
.sa-stat-ic {
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  color: var(--c);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.sa-stat-val { font-size: 19px; font-weight: 700; color: #E4E4EC; line-height: 1; }
.sa-stat-lbl { font-size: 11px; color: #9E9EAE; margin-top: 4px; }

.sa-section {
  font-size: 11.5px; font-weight: 500; color: #9E9EAE;
  margin: 16px 0 9px; letter-spacing: 0.01em;
}
.sa-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sa-nav-card {
  background: #1E1E2A; border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px; padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sa-nav-ic {
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 20%, transparent);
  color: var(--c);
  display: inline-flex; align-items: center; justify-content: center;
}
.sa-nav-lbl { font-size: 12.5px; font-weight: 500; color: #E4E4EC; }