/* ==========================================================================
   Хелпер — design tokens (MAIN SITE: Apple-style + a hint of glass)
   2026-08-14: promoted from /home/agent/sites/hub-preview-apple/ to the
   live design after Артём reviewed the flat preview and asked for a
   hybrid — mostly flat/minimal like apple.com, but with a light glass
   material brought back on four surfaces: header, modal panel, service
   cards, agent cards (see the "Hybrid glass" block below). Everything
   else (icons, contacts card, footer, buttons) stays fully flat, same as
   the preview.
   Reference: /tmp/kp_template_apple.html (apple.com-inspired PDF template) —
   white/near-white flat surfaces, huge whitespace, calm Inter type with
   tight tracking on headings, one muted gold accent (two tones: --gold for
   large graphic elements, --gold-deep for text — WCAG-checked below),
   hairline dividers instead of shadows/blur on most surfaces.
   ========================================================================== */

:root {
  --color-bg: #FFFFFF;
  --color-bg-elevated: #F5F5F7;   /* Apple's classic "next section" light grey band */
  --color-surface: #FFFFFF;       /* card/panel fill — flat, no translucency */
  --color-border: #D2D2D7;
  --color-border-soft: #E5E5EA;

  --color-text: #1D1D1F;
  --color-text-muted: #6E6E73;
  /* Darkened from the preview's #86868B (4.79:1 on white vs. the original's
     3.62:1, which failed WCAG's 4.5:1 normal-text threshold — a pre-existing
     gap in the preview design, caught while re-checking contrast for the
     glass promotion below and fixed here since this is now production). */
  --color-text-faint: #727277;

  /* Two-tone gold, sampled from the live site's --color-accent (#c9a24b)
     and darkened in two steps so each use passes WCAG on both white and
     the soft grey band (contrast computed via relative-luminance formula,
     not eyeballed):
       --color-accent-lg  #A07629 → 4.10:1 on white/#F5F5F7 — fine for
                           large text (≥3:1) and graphic elements (icons,
                           numerals, borders), NOT for body-size text.
       --color-accent     #8A6A2E → 5.02:1 on white, 4.61:1 on #F5F5F7 —
                           passes 4.5:1 for normal text, used for buttons,
                           links, eyebrows, active states. */
  --color-accent: #8A6A2E;
  --color-accent-hover: #6f5424;
  --color-accent-lg: #A07629;
  --color-accent-rgb: 138, 106, 46; /* same #8A6A2E, split out for rgba() tints (card-hint pill) */
  --color-on-accent: #FFFFFF;

  --font-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* no serif pairing in this style — kept as an alias so headings using var(--font-serif) don't need touching */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --content-max: 1180px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- Hybrid glass (header / modal panel / service+agent cards
     only — see the four selectors that use these tokens below) ----------
     Only the lightest "clear" tier from the old glassmorphism system
     (blur 8px, same value used across the fleet — see project memory) is
     brought back, not the heavier "regular"/"frosted" tiers the previous
     dark redesign used for these same surfaces. Contrast re-checked via
     the WCAG relative-luminance formula (python, not eyeballed) against
     the worst realistic case — text sitting on the glass tint blended
     with the brightest decorative blob below:
       body text  #1D1D1F on tinted glass  → 15.62:1
       muted text #6E6E73 on tinted glass  →  4.71:1  (passes 4.5:1)
       accent text #8A6A2E on tinted glass →  4.66:1  (passes 4.5:1)
     --color-text-faint intentionally NOT used on glass surfaces (even
     darkened, it lands at ~4.25:1 there) — see .order-note below, which
     uses --color-text-muted instead now that it lives inside the glass
     modal panel. */
  --glass-blur-clear: 8px;
  --glass-clear-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(29, 29, 31, 0.10);
  --glass-shadow: 0 10px 30px -20px rgba(29, 29, 31, 0.16);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@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(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
}

/* Fixed decorative "blobs" so the glass surfaces below have something to
   actually blur/tint — without this, translucency on a flat white page is
   nearly invisible. Same three-tone layout as the old dark redesign (brand
   gold + blue + purple), opacity tuned down hard to stay in keeping with
   the mostly-flat apple-style look — this should read as a faint wash,
   not a colourful background. position: fixed, no pointer-events, doesn't
   affect layout. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 34% at 10% 4%, rgba(160, 118, 41, 0.10), transparent 70%),
    radial-gradient(46% 30% at 92% 18%, rgba(76, 130, 201, 0.08), transparent 70%),
    radial-gradient(48% 30% at 46% 100%, rgba(140, 90, 190, 0.06), transparent 70%);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.018em;
}

p { margin: 0 0 var(--space-2); }

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 10px 16px;
  z-index: 200;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

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

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  border-radius: 980px; /* Apple's pill-shaped CTA */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); }

.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn-lg { padding: 16px 34px; font-size: 16px; }

.btn-header {
  display: inline-flex;
  /* 2026-09-03: the CTA no longer shares a row with 12 nav items (see
     .header-utility/.header-nav-row below) — restored to a comfortable
     size instead of the old cramped 9px/12.5px. */
  padding: 10px 18px;
  font-size: 13px;
}

/* ==========================================================================
   Header — dark frosted bar, hairline-on-black dividers
   2026-09-03: redesigned from one crammed 12-item row into two rows —
   see project-hub-services-site memory / Артём's screenshot complaint
   ("всё в кучу"). Row 1 (.header-utility) is a quiet identity/action strip:
   logo left, language + CTA + hamburger right. Row 2 (.header-nav-row) is
   the full-width navigation, given the whole row's breathing room and
   organized into 3 real groups (о нас / контент / кабинет+инструменты)
   separated by the same hairline-divider language the rest of the page
   already uses (see file header comment) — grouping is informational, not
   decorative: it tells the visitor these are 3 different kinds of links,
   not one flat list of 12 unrelated words.
   2026-09-17: flipped to a dark bar — Артём asked for the artlebedev.ru
   header look ("верхняя строчка с разделами"). Kept the row/grouping
   structure above as-is (it already matched — logo+utility row, sectioned
   nav row with dividers) and only swapped the surface from light glass to
   dark frosted glass (same --glass-blur-clear/backdrop-filter mechanism,
   just a dark tint instead of white — the rest of the page stays the
   established light apple-hybrid theme, only the header goes dark, same
   pattern as e.g. a dark navbar over a light page). All text/border colors
   below are overridden locally (not through the shared --color-* tokens,
   which stay light for the rest of the site) and rechecked against the
   new #0E0E10 bg via the same relative-luminance WCAG formula already used
   elsewhere in this file — see per-rule comments for the numbers. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 14, 16, 0.92);
  backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-inner {
  display: flex;
  flex-direction: column;
  /* Kept wider than the page's --content-max (1180px) — the nav row still
     benefits from extra width on wide viewports, same reasoning as before
     2026-09-03, just no longer fighting logo/CTA/lang-switch for it. */
  max-width: 1600px;
}

.header-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: 14px;
  padding-bottom: 14px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-nav-row {
  display: flex;
  justify-content: center;
  padding: 12px 0 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* #F5F5F5 on #0E0E10 ≈ 18.6:1 — was var(--color-text) (#1D1D1F, near-
     black), invisible on the dark header, see 2026-09-17 note above. */
  color: #F5F5F5;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-accent-lg);
  border-radius: 50%;
  /* var(--color-accent-lg) #A07629 on #0E0E10 ≈ 5.1:1 (passes 4.5:1) —
     var(--color-accent) #8A6A2E only reaches ≈4.2:1 on black, picked for
     light backgrounds originally, swapped here for the dark header. */
  color: var(--color-accent-lg);
  font-size: 15px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gap BETWEEN groups/dividers — see .nav-group for the gap WITHIN a
     group. Restored to a real size now that nav has its own full row. */
  gap: 26px;
  flex-wrap: wrap;
  row-gap: 10px;
}
.nav-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  row-gap: 8px;
}
.nav-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}
.nav a {
  /* Restored to a normal, readable size — no longer squeezed by sharing
     the row with logo/lang/CTA (see 2026-09-03 header redesign above).
     rgba(255,255,255,.62) flattened on #0E0E10 ≈ 8.3:1 (passes 4.5:1),
     matches artlebedev.ru's muted-until-hover nav link treatment. */
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  transition: color 200ms var(--ease);
  white-space: nowrap;
}
.nav a:hover { color: #F5F5F5; }
.nav a.is-active, .mobile-nav a.is-active { color: var(--color-accent-lg); font-weight: 600; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 0 auto;
  background: #F5F5F5;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  /* Gap BETWEEN groups — larger than the gap within a group (.mobile-nav a
     below) so the 3-way grouping (same categories as desktop .nav-group,
     2026-09-03) actually reads as structure, not just a longer list. */
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.mobile-nav-group { display: flex; flex-direction: column; }
.mobile-nav-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* var(--color-accent-lg), same swap/reason as .logo-mark above. */
  color: var(--color-accent-lg);
  margin: 0 0 4px;
}
.mobile-nav a { font-size: 16px; color: rgba(255, 255, 255, 0.68); padding: 7px 0; }
.mobile-nav a.btn {
  color: var(--color-on-accent);
  padding: 13px 26px;
  margin-top: var(--space-1);
  align-self: flex-start;
}

.site-header.is-open .mobile-nav { display: flex; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-7);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
}
.hero-inner { position: relative; z-index: 1; max-width: 860px; }

/* .hero-inner is shared by every page's simple header (news/course/privacy/etc —
   eyebrow+h1+lead, single column, see max-width:860px above). Only the homepage
   hero gets the 2-column demo-chat layout — scoped to .hero-home so it can't leak
   onto other pages that reuse the same .hero/.hero-inner classes. */
.hero-home .hero-inner {
  max-width: none;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: center;
}
.hero-copy { max-width: 560px; }

.dot-grid-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .dot-grid-bg { display: none; }
}

.eyebrow, .section-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}

.hero h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  letter-spacing: -0.022em;
  color: var(--color-text);
  max-width: 15ch;
}

.hero-lead {
  font-size: 18px;
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-bottom: var(--space-4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Hero demo card — fills the hero's empty right half with a Telegram-style
   bot conversation instead of describing the product in words. Decorative
   (aria-hidden on the wrapper, see index.html) — a scripted example
   conversation, not a real chat or a client testimonial. */
.hero-demo {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-soft);
  border-radius: 24px;
  padding: var(--space-4);
}
.hero-demo-metric {
  position: absolute;
  top: -16px;
  right: var(--space-3);
  background: var(--color-text);
  color: var(--color-on-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
}
.hero-demo-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
}
.hero-demo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.hero-demo-title { font-weight: 600; font-size: 15px; color: var(--color-text); }
.hero-demo-status { font-size: 12px; color: var(--color-text-faint); }

.hero-demo-bubble {
  max-width: 84%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.hero-demo-bubble.in {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-bottom-left-radius: 4px;
  color: var(--color-text);
}
.hero-demo-bubble.out {
  background: var(--color-accent);
  color: var(--color-on-accent);
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.hero-demo-typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}
.hero-demo-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-faint);
  animation: hero-demo-typing-bounce 1.2s ease-in-out infinite;
}
.hero-demo-typing span:nth-child(2) { animation-delay: 0.15s; }
.hero-demo-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes hero-demo-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-demo-typing span { animation: none; opacity: 0.6; }
}

/* ==========================================================================
   Section titles (shared)
   ========================================================================== */
.section-title {
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -0.015em;
  color: var(--color-text);
  max-width: 22ch;
  margin-bottom: var(--space-5);
}

.services-group-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-soft);
}
.services-group-title:first-of-type { padding-top: 0; border-top: none; }

/* ==========================================================================
   Services — light-grey band, flat white cards, hairline borders
   ========================================================================== */
.services { padding: var(--space-7) 0; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-soft); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.cards:last-of-type { margin-bottom: 0; }

/* Bento treatment — the 2 services that actually drive revenue (Telegram-
   боты, аудит безопасности) get a wider card instead of sitting at the same
   visual weight as all other 9. Grid auto-flow packs the rest around them,
   HTML order/structure of the cards is untouched. Reset to span 1 on mobile
   (max-width:768px, see Responsive section) — a forced 2-col span on a
   1-column grid would create an unwanted extra implicit column. */
.card-featured { grid-column: span 2; }

.card {
  background: var(--glass-clear-bg);
  backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--glass-shadow), var(--glass-sheen);
  transition: border-color 200ms var(--ease);
}
.card:hover {
  border-color: var(--color-accent-lg);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-soft);
  color: var(--color-accent-lg);
  margin-bottom: var(--space-3);
}
.card-icon svg { width: 22px; height: 22px; }

.card h3 {
  font-size: 18.5px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 10px;
}
.card p {
  font-size: 15px;
  color: var(--color-text-muted);
  margin-bottom: 0;
  /* Descriptions that list several distinct features use literal \n line
     breaks (via textContent, see js/i18n.js) with a "• " bullet per line
     instead of one comma-separated paragraph — pre-line respects those
     breaks while still collapsing/wrapping normal runs of text, so plain
     single-sentence descriptions render unchanged. */
  white-space: pre-line;
}

.card-connect-btn {
  margin-top: var(--space-2);
  padding: 10px 20px;
  font-size: 14px;
}

/* ==========================================================================
   Process
   ========================================================================== */
.process { padding: var(--space-7) 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border-soft); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.step {
  position: relative;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.step-num {
  display: block;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-accent-lg);
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 17.5px; letter-spacing: -0.008em; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--color-text-muted); margin-bottom: 0; }

/* ==========================================================================
   Why
   ========================================================================== */
.why { padding: var(--space-7) 0; border-bottom: 1px solid var(--color-border-soft); background: var(--color-bg-elevated); }

.why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.why-lead { font-size: 16px; color: var(--color-text-muted); }

.why-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.why-facts li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  color: var(--color-text);
  line-height: 1.6;
}
.why-mark {
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--color-accent-lg);
  border-radius: 50%;
}

/* ==========================================================================
   Founder — "Кто делает": photo + short personal pitch, replaces the social-
   proof section a business this new can't honestly fill with client logos/
   numbers/testimonials yet (see project memory — trust-without-track-record
   approach, not a stand-in for real proof).
   ========================================================================== */
.founder { padding: var(--space-7) 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border-soft); }

.founder-inner {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: var(--space-6);
  align-items: center;
}

.founder-photo-wrap { max-width: 320px; }
.founder-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 942 / 1280;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
}

.founder-quote {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--color-text);
  max-width: 62ch;
  margin-bottom: var(--space-2);
}
.founder-signature {
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.founder-stack {
  font-size: 14px;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  max-width: 62ch;
}

/* ==========================================================================
   Contacts
   ========================================================================== */
.contacts { padding: var(--space-8) 0; background: var(--color-bg); }
.contacts-inner { max-width: 640px; text-align: left; }
.contacts-lead {
  font-size: 17px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.contacts-divider {
  width: 64px;
  height: 1px;
  background: var(--color-border);
  margin-bottom: var(--space-4);
}
.contacts-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.contacts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: var(--space-2);
  row-gap: var(--space-2);
}
.contacts-list li { display: contents; }
.contacts-icon { font-size: 18px; line-height: 1.4; }
.contacts-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  align-self: center;
}
.contacts-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  align-self: center;
}
a.contacts-value { transition: color 200ms var(--ease); }
a.contacts-value:hover { color: var(--color-accent); }

/* ==========================================================================
   News ("Мир нейросетей") — news.html
   ========================================================================== */
.news-page-hero { padding-bottom: var(--space-5); }
.news-back-link {
  display: inline-block;
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  transition: color 200ms var(--ease);
}
.news-back-link:hover { color: var(--color-accent); }

.news-feed { padding: 0 0 var(--space-7); background: var(--color-bg); }

.news-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
}

/* overflow: hidden lets .news-cover (below) bleed edge-to-edge while still getting clipped to
   the card's own rounded corners (border-radius is inherited from .card) — a plain img with
   negative margins would otherwise poke past the rounded corners as square edges. */
.news-card { padding: var(--space-4); overflow: hidden; }
.news-cover {
  display: block;
  width: calc(100% + var(--space-4) * 2);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Pulls the image out to the card's true edge on all three sides (padding is uniform via
     var(--space-4)), and reserves normal spacing before the date/title that follow. */
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
}
.news-date {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent-lg);
  margin-bottom: 8px;
}
.news-card h3 { font-size: 19px; letter-spacing: -0.01em; margin-bottom: 10px; }
.news-card p { font-size: 15.5px; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.news-source { font-size: 13px; color: var(--color-text-faint); }
.news-read-btn { padding: 9px 20px; font-size: 14px; }

.news-empty, .news-error {
  max-width: 560px;
  font-size: 15.5px;
  color: var(--color-text-muted);
}
.news-error { color: #c0392b; }

/* ==========================================================================
   Knowledge base ("База знаний") — knowledge.html + knowledge/*.html
   Card grid mirrors .news-card/.news-cover almost 1:1 (renamed selectors),
   just adds a topic-tag pill (reusing the .card-hint pill pattern via
   --color-accent-rgb) and an optional audience-level badge for technical
   articles. auto-fill grid (not a fixed column count) so new articles added
   to knowledge/articles.json keep laying out sanely without a CSS change.
   ========================================================================== */
.knowledge-feed { padding: 0 0 var(--space-7); background: var(--color-bg); }
.knowledge-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
}
.knowledge-card { display: flex; flex-direction: column; padding: var(--space-4); overflow: hidden; }
.knowledge-cover-link { display: block; }
.knowledge-cover {
  display: block;
  width: calc(100% + var(--space-4) * 2);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
}
.knowledge-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.knowledge-tag,
.knowledge-audience-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 980px;
  font-size: 12.5px;
  font-weight: 600;
}
.knowledge-tag {
  background: rgba(var(--color-accent-rgb), 0.12);
  border: 1px solid rgba(var(--color-accent-rgb), 0.28);
  color: var(--color-accent);
}
.knowledge-audience-badge {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
}
.knowledge-date { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--color-accent-lg); margin-bottom: 8px; }
.knowledge-card h3 { font-size: 19px; letter-spacing: -0.01em; margin-bottom: 10px; }
.knowledge-card h3 a { color: inherit; transition: color 200ms var(--ease); }
.knowledge-card h3 a:hover { color: var(--color-accent); }
.knowledge-card > p { font-size: 15.5px; color: var(--color-text-muted); margin-bottom: var(--space-3); flex-grow: 1; }
.knowledge-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
}
.knowledge-read-time { font-size: 13px; color: var(--color-text-faint); }
.knowledge-read-btn { padding: 9px 20px; font-size: 14px; }

/* Article page header (knowledge/*.html) — read time / published date line
   under the H1, reuses .news-page-hero/.news-back-link for the hero itself. */
.knowledge-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 14px;
  color: var(--color-text-faint);
}
.knowledge-article-meta strong { color: var(--color-text-muted); font-weight: 600; }

/* "Related articles" footer block on each article page. */
.knowledge-related { padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border-soft); }
.knowledge-related h2 { font-size: 17px; margin-bottom: var(--space-2); }
.knowledge-related-list { display: flex; flex-direction: column; gap: 8px; }
.knowledge-related-link { font-size: 15px; color: var(--color-accent); transition: color 200ms var(--ease); }
.knowledge-related-link:hover { color: var(--color-accent-hover); }

/* ==========================================================================
   Legal content — privacy.html (same hero pattern as news.html, reuses
   .news-page-hero/.news-back-link; only the body copy below is new).
   Also reused as-is for the longer-form knowledge/*.html articles, hence
   h3/ul/ol/blockquote/pre/code typography below (privacy.html only ever
   used h2+p, so those extra rules don't affect it).
   ========================================================================== */
.legal-content { padding: 0 0 var(--space-7); background: var(--color-bg); }
.legal-content-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 760px;
}
.legal-content-inner > p { font-size: 15.5px; color: var(--color-text-muted); }
.legal-content-inner article > * { margin-bottom: var(--space-2); }
.legal-content-inner article > *:last-child { margin-bottom: 0; }
.legal-content-inner article h2 { font-size: 19px; letter-spacing: -0.01em; margin-top: 0; }
.legal-content-inner article h3 { font-size: 16.5px; letter-spacing: -0.005em; color: var(--color-text); }
.legal-content-inner article p { font-size: 15.5px; color: var(--color-text-muted); }
.legal-content-inner article ul,
.legal-content-inner article ol {
  font-size: 15.5px;
  color: var(--color-text-muted);
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legal-content-inner article li { margin: 0; }
.legal-content-inner article blockquote {
  border-left: 3px solid var(--color-accent-lg);
  padding: 2px 0 2px var(--space-3);
  color: var(--color-text-muted);
  font-style: italic;
}
.legal-content-inner article blockquote p { margin-bottom: 6px; }
.legal-content-inner article blockquote p:last-child { margin-bottom: 0; }
.legal-content-inner article pre {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  overflow-x: auto;
}
.legal-content-inner article pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre;
  background: none;
  padding: 0;
}
.legal-content-inner article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-bg-elevated);
  border-radius: 4px;
  padding: 2px 5px;
}

/* ==========================================================================
   Personal cabinet — cabinet.html (Telegram Login Widget + referral link)
   ========================================================================== */
.cabinet-inner { max-width: 560px; }
.cabinet-card p { font-size: 15px; color: var(--color-text-muted); }
.cabinet-card[hidden] { display: none; }
.cabinet-widget {
  margin-top: var(--space-2);
  min-height: 40px; /* reserves space so the layout doesn't jump once the Telegram iframe loads */
}
.cabinet-widget-fallback { color: var(--color-text-faint); font-size: 13.5px; }

.cabinet-card label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  margin-bottom: 6px;
}
.cabinet-link-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cabinet-link-row input {
  flex: 1 1 260px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--color-text);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.cabinet-stat {
  margin-top: var(--space-3);
  font-size: 15px;
  color: var(--color-text-muted);
}
.cabinet-stat strong { color: var(--color-text); font-size: 17px; }
.cabinet-logout-btn { margin-top: var(--space-4); }

/* ==========================================================================
   Auto-builder — builder.html (product type + description + crypto payment
   + generation). Reuses .cabinet-card/.custom-form/.form-success/.form-error
   for the shared bits (login card, textarea) — only the product-type radio
   group and the payment box are new here.
   ========================================================================== */
.builder-inner { max-width: 620px; }
.builder-how {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-4);
}
.builder-card[hidden] { display: none; }

.builder-type-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--space-1) 0 var(--space-3);
}
.builder-type-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14.5px;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.builder-type-option input { margin: 0; }
.builder-type-option:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-bg-elevated);
}
.builder-type-option:has(input:disabled) {
  color: var(--color-text-faint);
  cursor: not-allowed;
  opacity: 0.7;
}
.builder-soon-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
  background: var(--color-bg-elevated);
  border-radius: 999px;
  padding: 2px 8px;
}

.builder-payment-box {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14.5px;
}
.builder-payment-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.builder-payment-row dt { color: var(--color-text-muted); }
.builder-payment-row dd { font-weight: 600; word-break: break-all; text-align: right; }
.builder-payment-address-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.builder-payment-address-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
}

.builder-attempts { font-size: 15px; color: var(--color-text-muted); margin: var(--space-2) 0; }
.builder-attempts strong { color: var(--color-text); }

.builder-result-link {
  display: inline-block;
  margin-top: var(--space-2);
  word-break: break-all;
}

/* ==========================================================================
   Universe of questions (universe.html / js/universe.js) — public, no-login
   question/idea board rendered as a star map on <canvas>. The map itself
   gets a dark "night sky" surface (unlike the rest of the light-theme
   site) since gold/white star points need contrast to read as stars —
   scoped entirely to .universe-map-card so it doesn't affect any other
   card on the site.
   ========================================================================== */
.universe-inner { max-width: 680px; }

.universe-map-card { padding: 0; overflow: hidden; }

.universe-map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at 50% 35%, #1b2340 0%, #0c0f1f 65%, #08090f 100%);
}
.universe-map-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.universe-map-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  pointer-events: none;
  background: transparent;
  transition: opacity 200ms var(--ease);
}
.universe-map-status[hidden] { display: none; }

.universe-detail {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-bg);
}
.universe-detail[hidden] { display: none; }
.universe-detail-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.universe-detail-close:hover { color: var(--color-text); }
.universe-detail-text {
  font-size: 16px;
  color: var(--color-text);
  padding-right: var(--space-4);
  margin-bottom: 6px;
}
.universe-detail-meta {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-border-soft);
  padding: var(--space-4) 0;
  background: var(--color-bg);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13.5px;
  color: var(--color-text-faint);
}
.footer-inner a { color: var(--color-text-muted); transition: color 200ms var(--ease); }
.footer-inner a:hover { color: var(--color-accent); }

/* ==========================================================================
   Scroll reveal — unchanged mechanism (js/script.js toggles .is-visible via
   IntersectionObserver); only the fade/slide values themselves, no glass
   effect involved, kept identical to the live site.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Language switcher (header) — lives inside .site-header/.mobile-nav only,
   both dark since the 2026-09-17 header redesign (see .site-header note),
   so the default/hover text colors below are hardcoded light-on-dark
   rather than the shared (light-page) --color-text/--color-text-muted
   tokens. .is-active stays on --color-accent/--color-on-accent — that's a
   filled pill (dark gold bg + white text), unaffected by page background.
   ========================================================================== */
.lang-switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
}
.lang-btn {
  border: none;
  background: transparent;
  /* rgba(255,255,255,.62) on #0E0E10 ≈ 8.3:1, same tone as .nav a above. */
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 7px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.lang-btn:hover { color: #F5F5F5; }
.lang-btn.is-active {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.lang-switch-mobile { align-self: flex-start; margin-top: 4px; }

/* ==========================================================================
   Bots/agents card — clickable entry point into the agents modal
   ========================================================================== */
#botsAgentsCard { cursor: pointer; }

/* Pill badge instead of a plain muted line — this is the one spot on the
   card that must not be missed (it's the only visual cue the card opens
   the agents showcase), so it gets its own tinted chip + a small pointing
   icon with a gentle bob. The bob is a real @keyframes animation, so the
   site-wide prefers-reduced-motion rule above (animation-duration:
   0.001ms !important on *) neutralizes it automatically — no separate
   media query needed here. */
.card-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-accent) !important;
  background: rgba(var(--color-accent-rgb), 0.12);
  border: 1px solid rgba(var(--color-accent-rgb), 0.28);
  border-radius: 980px;
  padding: 5px 12px;
  margin-top: var(--space-2);
  margin-bottom: 0 !important;
}
.card-hint::before {
  content: "👆";
  font-size: 13px;
  line-height: 1;
  animation: card-hint-point 1.6s ease-in-out infinite;
}
@keyframes card-hint-point {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ==========================================================================
   Agents modal — flat white panel, light scrim, no blur/shadow
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: rgba(29, 29, 31, 0.4);
}
.modal-overlay[hidden] { display: none; }

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: min(720px, 88vh);
  overflow-y: auto;
  background: var(--glass-clear-bg);
  backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow), var(--glass-sheen);
  padding: var(--space-5) var(--space-4) var(--space-4);
}

.modal-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--color-accent); }

.modal-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-1);
}
.modal-panel h3 {
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.015em;
  color: var(--color-text);
  max-width: 32ch;
}
.modal-lead {
  font-size: 15px;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: var(--space-4);
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.agent-card {
  display: flex;
  flex-direction: column;
  background: var(--glass-clear-bg);
  backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--glass-shadow), var(--glass-sheen);
}
.agent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  margin-bottom: var(--space-2);
}
.agent-card h4 {
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--color-text);
  margin: 0 0 8px;
}
.agent-card p {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  flex-grow: 1;
  white-space: pre-line; /* see .card p above — same "• "-per-line pattern */
}
.agent-order-btn { align-self: flex-start; padding: 10px 20px; font-size: 14px; }

/* Secretary agent card — the bot is live but is Artem's personal/private
   tool (allowlisted to his Telegram ID only, not a public product like the
   other 6 cards), so it has no order/trial button — instead a link to the
   DIY course that teaches building the same setup. Class names kept from
   the original "coming soon" placeholder state; badge reuses the existing
   neutral pill recipe from .knowledge-audience-badge (muted, not the gold
   accent used for .card-hint's "click here" pointer, so it doesn't read as
   interactive/clickable itself). */
.agent-card-soon { opacity: 0.92; }
.agent-badge-soon {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 11px;
  border-radius: 980px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.agent-soon-note {
  font-size: 12.5px !important;
  font-style: italic;
  color: var(--color-text-faint) !important;
  flex-grow: 0 !important;
  margin-bottom: 0 !important;
}
.agent-soon-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
}
.agent-soon-link:hover { text-decoration: underline; }

/* Order flow + custom request form screens */
.modal-back {
  display: inline-block;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-3);
}
.modal-back:hover { color: var(--color-accent); }

.order-ask-text { font-size: 17px; color: var(--color-text); margin-bottom: var(--space-3); }
.order-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.order-step h4 { font-size: 18px; margin-bottom: 8px; }
.order-step p { font-size: 15px; color: var(--color-text-muted); }
.order-note { font-size: 13.5px; color: var(--color-text-muted); margin-top: var(--space-2); }
#orderTrialStep .btn { margin-bottom: var(--space-2); }

/* Chat-first CTA — the primary path into the "Ассистент на заказ" flow is
   the conversational lead-qualifier bot (@ProfiArtbot); the form below
   stays as the alternative for visitors who don't want to use Telegram. */
.custom-chat-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.custom-chat-note {
  font-size: 13.5px;
  color: var(--color-text-muted);
  max-width: 480px;
}
.custom-form-divider {
  font-size: 13px;
  color: var(--color-text-faint);
  text-align: center;
  margin: var(--space-3) 0;
}

/* [hidden] override: author styles beat the UA stylesheet's [hidden]{display:none}
   at equal specificity regardless of source order, so an explicit display
   here would otherwise keep the form visible after JS sets .hidden = true
   (same fix carried over from the live site's CSS — see its project memory). */
.custom-form[hidden] { display: none; }

.custom-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 520px;
}
.custom-form label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.custom-form textarea,
.custom-form input[type="text"] {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  resize: vertical;
}
.custom-form textarea:focus,
.custom-form input[type="text"]:focus {
  outline: none;
  border-color: var(--color-accent);
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--color-text-muted);
  cursor: pointer;
}
.checkbox-row input { margin-top: 3px; }
.custom-form .btn { margin-top: var(--space-3); align-self: flex-start; }

/* Honeypot field — invisible to real visitors, still in the tab/DOM order
   for simple bots that fill every input; not display:none so naive bots
   that skip display:none fields still get caught. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success { color: #1e7a34; font-size: 14px; margin-top: var(--space-2); }
.form-error { color: #c0392b; font-size: 14px; margin-top: var(--space-2); }

/* ==========================================================================
   Course intro promo (course.html) — lead text + illustrative card grid
   above the interactive lesson body. Cards mirror .knowledge-card's
   image-on-top layout; covers are square (matches the AI-generated set in
   assets/course/) rather than the 16:9 news/knowledge crop.
   ========================================================================== */
.course-promo { padding: 0 0 var(--space-6); background: var(--color-bg); }
.course-promo-inner { max-width: 760px; display: flex; flex-direction: column; gap: var(--space-4); }
.course-promo-lead { font-size: 16px; line-height: 1.6; color: var(--color-text-muted); }
.course-promo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.course-promo-card {
  background: var(--glass-clear-bg);
  backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--glass-shadow), var(--glass-sheen);
}
.course-promo-cover { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.course-promo-card p { font-size: 13.5px; color: var(--color-text-muted); padding: var(--space-3); margin: 0; }
.course-promo-cta { align-self: flex-start; }

@media (max-width: 860px) {
  .course-promo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .course-promo-grid { grid-template-columns: 1fr 1fr; }
  .course-promo-cta { align-self: stretch; text-align: center; }
}

/* ==========================================================================
   Course delivery (course.html / js/course.js) — "ИИ для бизнеса"
   ========================================================================== */
.course-body { padding: 0 0 var(--space-7); background: var(--color-bg); }
.course-body-inner { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }

.course-progress-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.course-progress-dot {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.course-progress-dot:hover { border-color: var(--color-accent-lg); }
.course-progress-dot.is-current { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15); }
.course-progress-dot.is-complete { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }

.course-lesson-card { padding: var(--space-5); }
.course-lesson-meta { font-size: 13px; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.course-read-time { margin-left: 8px; }
.course-lesson-card h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; margin: 4px 0 var(--space-4); }

.course-block { margin-bottom: var(--space-4); }
.course-block-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; }
.course-block p { font-size: 15.5px; color: var(--color-text-muted); line-height: 1.6; }
.course-theory-intro p { margin: 0 0 10px; }
.course-theory-points, #courseSummaryList { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.course-theory-points li, #courseSummaryList li { font-size: 15.5px; color: var(--color-text-muted); line-height: 1.5; }
.course-theory-points strong { color: var(--color-text); }

.course-checkpoint-block { background: var(--color-bg-elevated); border-radius: var(--radius-md); padding: var(--space-3); }
.course-checkpoint-question { font-weight: 500; color: var(--color-text); margin-bottom: var(--space-2); }
.course-checkpoint-options { display: flex; flex-direction: column; gap: 8px; }
.course-checkpoint-option {
  text-align: left; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-family: var(--font-sans); font-size: 14.5px; color: var(--color-text);
  cursor: pointer; transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.course-checkpoint-option:hover { border-color: var(--color-accent-lg); }
.course-checkpoint-option.is-selected { border-color: var(--color-accent); background: rgba(var(--color-accent-rgb), 0.08); font-weight: 500; }
.course-checkpoint-explanation { margin-top: 12px; padding: 12px 16px; border-radius: 10px; font-size: 14.5px; line-height: 1.5; }
.course-checkpoint-explanation.is-correct { background: rgba(30, 122, 52, 0.1); color: #1e7a34; }
.course-checkpoint-explanation.is-incorrect { background: rgba(192, 57, 43, 0.08); color: #c0392b; }

.course-visual-cycle { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.course-cycle-item {
  width: 100%; max-width: 420px; text-align: center;
  border: 1px solid var(--glass-border); background: var(--glass-clear-bg);
  backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
  border-radius: var(--radius-md); padding: 14px 18px;
}
.course-cycle-label { font-weight: 700; letter-spacing: 0.04em; color: var(--color-accent); font-size: 14px; margin: 0; }
.course-cycle-sub { font-size: 13px; color: var(--color-text-faint); margin: 2px 0 6px; }
.course-cycle-desc { font-size: 14px; color: var(--color-text-muted); margin: 0; }
.course-cycle-arrow { color: var(--color-text-faint); font-size: 18px; line-height: 1; }
.course-cycle-loop { text-align: center; color: var(--color-text-faint); font-size: 13px; margin-top: 6px; }
.course-visual-note { margin-top: 12px; font-size: 14px; color: var(--color-text-muted); font-style: italic; border-left: 3px solid var(--color-accent-lg); padding-left: 12px; }

.course-visual-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.course-visual-table th, .course-visual-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border-soft); vertical-align: top; }
.course-visual-table th { color: var(--color-text-faint); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.course-visual-table td:first-child { color: var(--color-text); font-weight: 500; }

.course-visual-template { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); overflow: hidden; }
.course-visual-template dt { background: var(--color-bg-elevated); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--color-accent); padding: 8px 14px 2px; margin: 0; }
.course-visual-template dd { margin: 0; padding: 0 14px 12px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 14px; color: var(--color-text-muted); }

.course-visual-checklist-groups { display: flex; flex-direction: column; gap: var(--space-3); }
.course-checklist-heading { font-weight: 600; font-size: 13.5px; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; }
.course-checklist-item { position: relative; list-style: none; padding-left: 26px; font-size: 14.5px; color: var(--color-text-muted); margin-bottom: 6px; }
.course-checklist-item::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border: 1.5px solid var(--color-border); border-radius: 4px; }

.course-visual-flow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.course-flow-start, .course-flow-question { border: 1px solid var(--color-border-soft); border-radius: 10px; padding: 10px 18px; font-size: 14.5px; color: var(--color-text); background: var(--color-bg-elevated); text-align: center; }
.course-flow-arrow { color: var(--color-text-faint); font-size: 18px; }
.course-flow-branches { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; width: 100%; }
.course-flow-branch { flex: 1 1 200px; max-width: 260px; border: 1px solid var(--glass-border); background: var(--glass-clear-bg); border-radius: var(--radius-md); padding: 12px 14px; }
.course-flow-branch-label { font-weight: 600; font-size: 13.5px; color: var(--color-text); margin: 0 0 4px; }
.course-flow-branch-result { font-size: 13.5px; color: var(--color-text-muted); margin: 0; }

.course-task-steps { margin: 0 0 var(--space-2); padding-left: 20px; }
.course-task-steps li { font-size: 15px; color: var(--color-text-muted); margin-bottom: 4px; }
.course-task-answer-label { display: block; font-size: 13px; color: var(--color-text-faint); margin-bottom: 6px; }
.course-task-textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--color-border); font-family: var(--font-sans); font-size: 14.5px; color: var(--color-text); resize: vertical; }
.course-task-textarea:focus { outline: none; border-color: var(--color-accent); }
.course-task-saved { margin-top: 8px; }

.course-lesson-nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border-soft); }
.course-lesson-nav .btn:disabled { opacity: 0.5; cursor: default; }
.course-lesson-position { font-size: 13px; color: var(--color-text-faint); }

.course-coming-soon { text-align: center; padding: var(--space-5); }
.course-coming-soon p { color: var(--color-text-muted); }

.course-login-nudge { position: relative; text-align: center; padding: var(--space-4); }
.course-nudge-dismiss { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 20px; line-height: 1; color: var(--color-text-faint); cursor: pointer; padding: 4px; }
.course-nudge-widget { display: flex; justify-content: center; margin-top: var(--space-2); }
.course-nudge-loggedin { color: #1e7a34; font-weight: 500; }

/* Roadmap of not-yet-written units (course.js renderRoadmap) — shared by
   both courses, shown below the interactive lesson card so the page never
   looks empty once the available lessons run out, without pretending the
   remaining days/weeks are already written. */
.course-roadmap { margin-top: var(--space-2); }
.course-roadmap-heading { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); }
.course-roadmap-list { display: flex; flex-direction: column; gap: 10px; }
.course-roadmap-item { border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 12px 16px; background: var(--color-bg-elevated); }
.course-roadmap-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 980px;
  font-size: 11.5px; font-weight: 600; background: var(--color-surface);
  border: 1px solid var(--color-border-soft); color: var(--color-text-muted); margin-bottom: 6px;
}
.course-roadmap-title { font-size: 14.5px; font-weight: 600; color: var(--color-text); margin: 0 0 2px; }
.course-roadmap-topic { font-size: 13.5px; color: var(--color-text-muted); margin: 0; line-height: 1.5; }

/* Price/promo callout on course2.html ("Разверни своих AI-сотрудников
   сам") — pure static markup, no payment integration, CTA links to the
   same Telegram lead-qualifier bot used everywhere else on the site. */
.course-price-card { margin-top: var(--space-4); padding: var(--space-4); text-align: left; }
.course-price-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.course-price-discounted { font-size: clamp(28px, 4vw, 36px); font-weight: 700; color: var(--color-accent); letter-spacing: -0.01em; }
.course-price-full { font-size: 18px; color: var(--color-text-faint); text-decoration: line-through; }
.course-price-note { margin-top: 4px; font-size: 14px; color: var(--color-text-muted); }
.course-price-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.course-price-pill {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 980px;
  font-size: 13px; font-weight: 500; background: var(--color-surface);
  border: 1px solid var(--color-border-soft); color: var(--color-text-muted);
}
.course-price-cta { margin-top: var(--space-3); }

/* ==========================================================================
   Accessibility fallback for the hybrid glass material — don't assume the
   user wants translucency. Rolls the glass surfaces back to a fully
   opaque/flat look (matching the rest of the apple-style page) while
   keeping all content and layout intact. Placed after every glass-using
   selector above (course cards included) so cascade order doesn't let a
   same-specificity rule declared later back in silently. prefers-reduced-
   motion is handled globally near the top of this file.
   ========================================================================== */
@media (prefers-reduced-transparency: reduce) {
  .card, .agent-card, .modal-panel, .course-cycle-item, .course-flow-branch {
    background: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--color-border);
    box-shadow: none;
  }
  /* .site-header kept separate: since the 2026-09-17 dark-header redesign
     its text/border colors are hardcoded light-on-dark, not the shared
     (light-page) --color-* tokens used by the selector above — falling
     back to var(--color-surface) (#FFFFFF) here would make the header
     white while every nav link stays near-white text, i.e. invisible.
     Solid opaque dark instead, same tone as the frosted default. */
  .site-header {
    background: #0E0E10;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
  }
  body::before { display: none; }
  .dot-grid-bg { display: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Header nav/hamburger breakpoint.
   2026-09-03 (second pass): first attempt raised this to 1600px, reasoning
   "never show the in-between wrapped-nav state". Wrong call — Артём tested
   on an ordinary desktop window narrower than 1600px, got shoved into the
   phone-style `.mobile-nav` hamburger dropdown (plain left-aligned link
   list dropped onto an otherwise empty full-width desktop viewport — reads
   as "весь экран пустой, только слова слева", exactly the complaint). The
   hamburger/`.mobile-nav` treatment is genuinely a *phone* pattern (edge-
   to-edge is normal on a 380px screen, not on a 1400px browser window) —
   it should only kick in at the same tablet/phone boundary the rest of the
   page already uses (see `.cards`/`.steps` collapsing to 2 columns at
   1024px below), not at an arbitrary "does the nav fit on one line" width.
   Between 1024px and whenever .nav naturally fits one line, letting it
   wrap onto 2 lines (`flex-wrap: wrap` on .nav, already set above) is the
   right tradeoff — verified with Playwright it looks intentional (centered,
   grouped, even line breaks), not broken, unlike the hamburger-on-desktop
   case this replaces. */
@media (max-width: 1024px) {
  /* .header-nav-row hidden too — otherwise its own padding/border-top
     would leave an empty strip once .nav inside it is hidden. */
  .header-nav-row, .nav, .btn-header, .lang-switch:not(.lang-switch-mobile) { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .why-inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .agent-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-home .hero-inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero-copy { max-width: none; }
  .founder-inner { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 768px) {
  .cards .card-featured { grid-column: span 1; }
}

@media (max-width: 768px) {
  :root {
    --space-7: 64px;
    --space-8: 80px;
  }
  .lg-only { display: none; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--space-4); }
  .agent-grid { grid-template-columns: 1fr; }
  .modal-panel { padding: var(--space-4) var(--space-3) var(--space-3); }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-2); }
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .order-actions { flex-direction: column; }
  .order-actions .btn { width: 100%; }
  .course-lesson-card { padding: var(--space-3); }
  .course-lesson-nav { flex-wrap: wrap; gap: var(--space-2); }
  .course-lesson-nav .course-lesson-position { order: 3; width: 100%; text-align: center; }
}

/* ==========================================================================
   Team dashboard — /team.html, 2026-09-04
   Deliberate departure from the rest of the site's flat apple+glass look:
   Артём asked for a "pixel team" visual (referencing teamly.to's retro
   8-bit character style) for this ONE page specifically — a live ops-room
   moment, not the marketing surface, so it earns its own dark "terminal"
   surface instead of forcing the pixel-art avatars onto a white background
   where they'd look like a mismatched sticker. Everything else (type,
   accent color, spacing scale) still comes from the site's existing tokens
   so it doesn't feel like a different product.
   ========================================================================== */
.team-dash {
  padding: var(--space-7) 0 var(--space-8);
  background: #14140f;
  color: #F5F1E6;
}
.team-dash .section-eyebrow { color: var(--color-accent-lg); }
.team-dash h1 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  color: #fff;
}
.team-dash-sub {
  color: #B9B39E;
  margin: 0 0 var(--space-5);
  font-size: 14.5px;
}

/* 2026-09-04, второй заход: Артём прислал точный референс — OpenClaw
   "AI-офис" (soldout26.github.io/keis_Maria) — top-down пиксельный план
   офиса, каждый сотрудник за своим столом с именем и цветным статус-бейджем
   (работает/ищет в вебе/пишет/читает/выполняет/ждёт/готово/отдыхает).
   Переделано под этот формат вместо плоского списка карточек ниже. */
.office-room {
  background:
    repeating-linear-gradient(90deg, #6b4a2f 0 3px, #74512f 3px 6px),
    linear-gradient(#5f4128, #5f4128);
  border: 6px solid #2b2418;
  border-radius: var(--radius-md, 14px);
  padding: var(--space-4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.office-floor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4) var(--space-3);
}

.office-desk {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.office-desk-placeholder { opacity: 0.5; }

.office-desk-name {
  background: rgba(20, 20, 15, 0.85);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.office-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  background: #5b5646;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.office-status-working  { background: #2e7d46; }
.office-status-web      { background: #2f6fb0; }
.office-status-writing  { background: #7a4fb0; }
.office-status-reading  { background: #4a90a4; }
.office-status-executing{ background: #b0752f; }
.office-status-done     { background: #2e7d46; }
.office-status-waiting  { background: #8a8460; }
.office-status-resting  { background: #5b5646; }
.office-status-onhold   { background: #45443a; color: #a9a68f; }

.office-avatar {
  width: 34px;
  height: 34px;
  color: var(--color-accent-lg);
  shape-rendering: crispEdges;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4));
}
.office-desk-placeholder .office-avatar { color: #8a8672; }
.office-desk[data-busy="1"] .office-avatar { animation: office-bob 1.2s ease-in-out infinite; }

.office-desk-icon {
  width: 46px;
  height: 27px;
  color: #3b2c1c;
  opacity: 0.85;
  margin-top: -2px;
}

.office-task {
  font-size: 10.5px;
  color: #d8d2ba;
  max-width: 150px;
  line-height: 1.3;
}

@keyframes office-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .office-desk[data-busy="1"] .office-avatar { animation: none; }
}

.office-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-4);
}
.office-legend .office-status-pill { font-size: 10.5px; }

@media (prefers-reduced-motion: reduce) {
  .team-status-busy .team-dot { animation: none; }
}