/* ============================================================================
   BENEFITS / LANDING PAGE STYLES — Somnium Workspace
   Inherits the design system from main.css (colors, type, spacing, buttons).
   This file only adds page-level composition: hero, module grid, segments,
   feature grid, security cards, KZ band, pilot steps, final CTA, footer.
   ============================================================================ */

html { height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  background:
    radial-gradient(900px 520px at 82% -8%, var(--warm-pale) 0%, rgba(240, 221, 212, 0) 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%);
}

/* Page-wide readability: lift the faint secondary text out of "too pale".
   Scoped to this page only (this stylesheet loads on the landing page alone),
   so the global palette in main.css is untouched. */
body { --ink-soft: #5f564c; }

/* Eyebrow labels — larger and more present across every section. */
.section-label { font-size: var(--font-size-base); letter-spacing: 0.12em; }

/* Section sub-headlines — darker (near-ink) and bigger, less "marketing pale". */
.section-sub {
  color: var(--ink);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
}

/* The shared nav is position:fixed (main.css). Offset the page below it. */
.bf-page { padding-top: var(--header-height); }

/* Constrain section content to a comfortable reading width and add rhythm.
   Side padding is kept tight so the hero split has room to breathe. */
.bf-section { padding: 96px var(--spacing-lg); }
.bf-inner { width: 100%; max-width: 1240px; margin: 0 auto; }
.bf-section--tight { padding-top: 64px; }

.bf-head { max-width: 720px; margin: 0 auto var(--spacing-2xl); text-align: center; }
.bf-head .section-label { justify-content: center; }
.bf-head .section-sub { max-width: 640px; margin: var(--spacing-md) auto 0; }

/* ----------------------------------------------------------------------------
   NAV additions
   ---------------------------------------------------------------------------- */
.bf-nav-right { display: flex; align-items: center; gap: var(--spacing-md); }
.bf-nav-login {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--ink-mid);
  padding: 8px 6px;
  white-space: nowrap;
}
.bf-nav-login:hover { color: var(--warm); }
.bf-brand-mark {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  box-shadow: var(--shadow-warm-soft);
}

/* ----------------------------------------------------------------------------
   HERO
   ---------------------------------------------------------------------------- */
.bf-hero { padding-top: 72px; padding-bottom: 64px; }
.bf-hero-grid {
  display: grid;
  /* minmax(0, …) pins the columns to a fixed 1.05 : 0.95 ratio so the
     growing editor inside the right column can't steal width from the left
     text (and the mock stays the same size through the whole animation). */
  /* Right column is a fixed-width stage (560px) so the scripted cursor's
     pixel coordinates stay accurate; left text takes the rest. */
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: var(--spacing-2xl);
  align-items: center;
}
.bf-hero-text { min-width: 0; }
.bf-hero-visual { min-width: 0; }
.bf-hero h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--spacing-lg);
}
.bf-hero h1 .accent { color: var(--warm); }
.bf-hero-sub {
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xl);
  line-height: 1.5;
  color: var(--ink-mid);
  margin-bottom: var(--spacing-lg);
}
.bf-hero-lead {
  font-size: var(--font-size-md);
  color: black;
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: var(--spacing-xl);
}
.bf-cta-row { display: flex; flex-wrap: wrap; gap: var(--spacing-md); align-items: center; }

/* "Разработано в Казахстане" badge — calm, not a shouty pill */
.bf-kz-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: var(--white);
  border: 1px solid var(--border-s);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}
.bf-kz-badge .bf-flag {
  width: 22px; height: 11px; border-radius: 2px;
  display: block; object-fit: cover;
  box-shadow: 0 0 0 1px var(--border);
}

/* ----------------------------------------------------------------------------
   HERO VISUAL — Somnium workspace: chat (left) that opens a document editor
   (right) in a split view, mirroring the real in-product behaviour.
   ---------------------------------------------------------------------------- */
.bf-mock {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: perspective(1500px) rotateY(-3deg);
  /* Purely a demonstration — the user can't interact with it; only the
     scripted cursor inside "clicks". */
  pointer-events: none;
  user-select: none;
  /* Isolate layout+paint so the chat compression inside never reflows or
     repaints the rest of the page (that was the source of the judder). */
  contain: layout paint;
}
.bf-mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--sand);
}
.bf-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-faint); }
.bf-mock-dot:nth-child(1) { background: #e5897a; }
.bf-mock-dot:nth-child(2) { background: #e8c069; }
.bf-mock-dot:nth-child(3) { background: #8fc99a; }
.bf-mock-title {
  margin-left: 8px; font-size: var(--font-size-xs);
  font-family: var(--font-family-mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
/* "Editing" pill appears in the title bar once the document opens */
.bf-ws-editing {
  margin-left: auto; font-size: 11px; font-weight: var(--font-weight-bold);
  color: var(--success-dark); background: var(--success-bg);
  padding: 2px 9px; border-radius: var(--radius-xs); opacity: 0;
  animation: bfEditingIn 16s ease-in-out infinite;
}

.bf-ws { position: relative; display: flex; align-items: stretch; height: 360px; }

.bf-mock-rail {
  flex: 0 0 auto; width: 54px;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  padding: 16px 0; background: var(--warm-bg); border-right: 1px solid var(--border);
}
.bf-mock-rail i {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: 1.05rem; color: var(--ink-soft);
}
.bf-mock-rail i.is-active { background: var(--warm); color: #fff; box-shadow: var(--shadow-warm-soft); }

/* Chat column — starts full width, compresses as the editor opens beside it */
.bf-ws-chat {
  flex: 1 1 0%; min-width: 0; overflow: hidden;
  padding: 16px; display: flex; flex-direction: column; gap: 11px;
  background: var(--white);
}
.bf-bubble {
  max-width: 88%; padding: 10px 13px; border-radius: 14px;
  font-size: var(--font-size-sm); line-height: 1.4; color: var(--ink-mid);
  background: var(--sand); border: 1px solid var(--border);
}
.bf-bubble.is-me {
  align-self: flex-end; background: var(--warm); color: #fff; border-color: transparent;
}
.bf-mock-file {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 11px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--white); box-shadow: var(--shadow-sm);
  animation: bfFileHover 16s ease-in-out infinite;
}
.bf-mock-file .bf-file-ic {
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 1rem;
  background: var(--file-word);
}
.bf-mock-file .bf-file-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bf-mock-file .bf-file-name {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-mock-file .bf-file-sub { font-size: var(--font-size-xs); color: var(--ink-soft); }

/* Editor column — its width grows from 0, so the chat beside it gives up
   space and compresses (real split, like in the product). Layout reflow is
   confined to the mock by `contain` on .bf-mock, so the page never judders.
   The editor's inner UI has a fixed width and is simply revealed (clipped),
   so the ribbon/page never re-flow while the panel widens. */
.bf-ws-doc {
  flex: 0 0 auto; width: 0; overflow: hidden;
  border-left: 1px solid var(--border); background: #e7e2d8;
  box-shadow: -10px 0 28px rgba(26, 22, 19, 0.10);
  animation: bfDocOpen 16s ease-in-out infinite;
}
/* Inner editor width == the panel's fully-open width, so at the end of the
   animation nothing is clipped; during the open it's just progressively
   revealed (and never re-flows, since its width is constant). */
.bf-ws-doc-inner { width: 300px; height: 100%; display: flex; flex-direction: column; }

/* Ribbon */
.bf-rib { background: var(--sand); border-bottom: 1px solid var(--border); padding: 8px 10px 0; }
.bf-rib-tabs { display: flex; gap: 13px; white-space: nowrap; font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--ink-soft); padding-bottom: 7px; }
.bf-rib-tabs span { position: relative; padding-bottom: 7px; }
.bf-rib-tabs .is-on { color: var(--warm); }
.bf-rib-tabs .is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--warm); border-radius: 1px; }
.bf-rib-tools {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 0; border-top: 1px solid var(--border);
}
.bf-rib-font { font-size: 11px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 3px 8px; color: var(--ink-mid); }
.bf-rib-size { font-size: 11px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 3px 7px; color: var(--ink-mid); }
.bf-rib-btn {
  width: 24px; height: 24px; border-radius: var(--radius-xs);
  display: grid; place-items: center; font-size: 12px; font-weight: var(--font-weight-bold);
  background: var(--white); border: 1px solid var(--border); color: var(--ink-mid);
}
.bf-rib-btn.is-on { background: var(--warm); color: #fff; border-color: transparent; }
.bf-rib-btn.bf-it { font-style: italic; }
.bf-rib-btn.bf-un { text-decoration: underline; }
.bf-rib-btn i.bi { font-size: 12px; font-weight: 400; }

/* Document sheet — holds two crossfading layers: the plain "before" text and
   the AI-improved "after" version. */
.bf-doc-page { flex: 1; background: #e9e4da; padding: 14px 16px 0; overflow: hidden; }
.bf-doc-sheet { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 3px; box-shadow: var(--shadow-sm); height: 100%; overflow: hidden; }
.bf-doc-layer { position: absolute; top: 16px; left: 18px; right: 18px; bottom: 0; }
.bf-doc-before { animation: bfDocBefore 16s ease-in-out infinite; }
.bf-doc-after { opacity: 0; animation: bfDocAfter 16s ease-in-out infinite; }
.bf-doc-title { font-family: var(--font-family-serif); font-size: 14.5px; font-weight: var(--font-weight-bold); color: #234b73; line-height: 1.25; margin-bottom: 9px; }
.bf-doc-after .bf-doc-title { text-align: center; }
.bf-doc-p { font-family: var(--font-family-serif); font-size: 11px; line-height: 1.55; color: var(--ink-mid); margin: 0 0 7px; }
.bf-doc-p b { color: var(--ink); }
.bf-doc-li { font-family: var(--font-family-serif); font-size: 11px; line-height: 1.5; color: var(--ink-mid); margin: 0 0 5px 16px; position: relative; }
.bf-doc-li::before { content: '•'; position: absolute; left: -12px; color: var(--warm); }
.bf-doc-edit-span { background: var(--warm-pale); border-radius: 2px; padding: 0 1px; }
.bf-doc-caret { display: inline-block; width: 1.5px; height: 11px; background: var(--warm); margin-left: 1px; vertical-align: -1px; animation: bfCaret 1.05s steps(1) infinite; }
@keyframes bfCaret { 50% { opacity: 0; } }

@keyframes bfDocBefore {
  0%, 52% { opacity: 1; } 60% { opacity: 0; }
  92% { opacity: 0; } 96%, 100% { opacity: 1; }
}
@keyframes bfDocAfter {
  0%, 56% { opacity: 0; } 64% { opacity: 1; }
  90% { opacity: 1; } 94%, 100% { opacity: 0; }
}

/* Trust pill — static row under the visual */
.bf-mock-float {
  margin-top: 16px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-full); box-shadow: var(--shadow-md);
  padding: 11px 16px; display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--ink);
}
.bf-mock-float .bf-lock {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--success-bg); color: var(--success-dark);
}

/* ============================================================================
   GUIDED WALKTHROUGH (16s loop). Scripted cursor travels across the fixed
   560px stage and clicks, in order:
     1) the file in chat            → editor opens, chat compresses
     2) the AI star in the rail     → AI assistant panel appears over the chat
     3) the contextual suggestion   → AI "rewrites" the document (text changes)
   Cursor coordinates are px relative to .bf-mock. Tune them in @keyframes
   bfCursor and the AI-panel/target positions below if the layout shifts.
   ============================================================================ */
.bf-cursor {
  position: absolute; left: 0; top: 0;
  width: 20px; height: 22px; z-index: 20; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(26, 22, 19, 0.32));
  animation: bfCursor 16s ease-in-out infinite;
}
.bf-cursor-ripple {
  position: absolute; left: 4px; top: 3px;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--warm); opacity: 0;
  animation: bfRipple 16s ease-out infinite;
}

@keyframes bfCursor {
  0%   { opacity: 0; transform: translate(600px, -30px) scale(1); }
  3%   { opacity: 1; }
  8%   { transform: translate(120px, 134px) scale(1); }   /* over file */
  11%  { transform: translate(120px, 134px) scale(1); }
  12%  { transform: translate(120px, 134px) scale(0.8); } /* click file */
  13%  { transform: translate(120px, 134px) scale(1); }
  24%  { transform: translate(27px, 270px) scale(1); }    /* to AI star */
  28%  { transform: translate(27px, 270px) scale(1); }
  29%  { transform: translate(27px, 270px) scale(0.8); }  /* click star */
  30%  { transform: translate(27px, 270px) scale(1); }
  42%  { transform: translate(157px, 208px) scale(1); }   /* to suggestion */
  46%  { transform: translate(157px, 208px) scale(1); }
  47%  { transform: translate(157px, 208px) scale(0.8); } /* click suggestion */
  48%  { transform: translate(157px, 208px) scale(1); }
  56%  { opacity: 1; transform: translate(157px, 208px) scale(1); }
  61%  { opacity: 0; transform: translate(182px, 234px) scale(1); }
  100% { opacity: 0; transform: translate(600px, -30px) scale(1); }
}

@keyframes bfRipple {
  0%, 11%   { opacity: 0;    transform: scale(0); }
  12.5%     { opacity: 0.45; transform: scale(0.4); }
  17%       { opacity: 0;    transform: scale(2.4); }
  28%       { opacity: 0;    transform: scale(0); }
  29.5%     { opacity: 0.45; transform: scale(0.4); }
  34%       { opacity: 0;    transform: scale(2.4); }
  46%       { opacity: 0;    transform: scale(0); }
  47.5%     { opacity: 0.45; transform: scale(0.4); }
  52%       { opacity: 0;    transform: scale(2.4); }
  100%      { opacity: 0;    transform: scale(2.4); }
}

@keyframes bfFileHover {
  0%, 6%    { border-color: var(--border);    box-shadow: var(--shadow-sm); background: var(--white);   transform: translateY(0); }
  8%, 13%   { border-color: var(--warm-soft); box-shadow: var(--shadow-md); background: var(--warm-bg); transform: translateY(-2px); }
  16%, 100% { border-color: var(--border);    box-shadow: var(--shadow-sm); background: var(--white);   transform: translateY(0); }
}

/* Editor width grows (chat compresses), holds through the AI demo, collapses.
   Loop begins and ends at width 0 for a seamless wrap. */
@keyframes bfDocOpen {
  0%, 13% { width: 0; }
  22%     { width: 300px; }
  86%     { width: 300px; }
  100%    { width: 0; }
}

@keyframes bfEditingIn {
  0%, 20% { opacity: 0; }
  26%     { opacity: 1; }
  90%     { opacity: 1; }
  94%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* The AI star in the rail lights up when the cursor reaches it and stays
   "active" while the assistant is open. */
.bf-ai-star { animation: bfStarHover 16s ease-in-out infinite; }
@keyframes bfStarHover {
  0%, 24%  { background: transparent; color: var(--ink-soft); }
  28%      { background: var(--warm); color: #fff; }
  90%      { background: var(--warm); color: #fff; }
  94%, 100%{ background: transparent; color: var(--ink-soft); }
}

/* ---- AI assistant panel (slides up over the chat) ---- */
.bf-ai-panel {
  /* Sits exactly over the chat column (54px rail .. 54+206), so it never
     overlaps the editor (which starts at 260px). */
  position: absolute; left: 54px; top: 8px; bottom: 8px; width: 206px;
  z-index: 12; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl); padding: 12px 11px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: 0; transform: translateY(14px);
  animation: bfAIPanel 16s ease-in-out infinite;
}
@keyframes bfAIPanel {
  0%, 30% { opacity: 0; transform: translateY(14px); }
  36%     { opacity: 1; transform: translateY(0); }
  88%     { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(14px); }
}
.bf-ai-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; color: var(--warm); background: var(--warm-pale); margin-bottom: 5px; }
.bf-ai-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); margin-bottom: 6px; }
.bf-ai-body { position: relative; width: 100%; flex: 1; }
.bf-ai-stage { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; }
.bf-ai-suggest { animation: bfAISuggest 16s ease-in-out infinite; }
@keyframes bfAISuggest {
  0%, 47% { opacity: 1; } 51% { opacity: 0; }
  92% { opacity: 0; } 96%, 100% { opacity: 1; }
}
.bf-ai-ctx { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--warm); font-weight: var(--font-weight-bold); display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.bf-ai-ctx-note { font-size: 10px; color: var(--ink-soft); line-height: 1.35; margin-bottom: 6px; text-align: left; }
.bf-ai-chip {
  width: 100%; text-align: left; font-size: 10.5px; line-height: 1.3;
  padding: 7px 9px; border-radius: var(--radius-sm);
  background: var(--sand); border: 1px solid var(--border); color: var(--ink-mid);
  display: flex; gap: 7px; align-items: flex-start;
}
.bf-ai-chip i { color: var(--warm); margin-top: 1px; flex-shrink: 0; font-size: 0.92rem; }
.bf-ai-chip--primary {
  background: var(--warm-bg); border-color: var(--warm-soft); color: var(--ink);
  font-weight: var(--font-weight-semibold);
  animation: bfSuggestHover 16s ease-in-out infinite;
}
@keyframes bfSuggestHover {
  0%, 41%  { box-shadow: none;            transform: translateY(0);    border-color: var(--warm-soft); }
  44%, 47% { box-shadow: var(--shadow-md);transform: translateY(-1px); border-color: var(--warm); }
  50%, 100%{ box-shadow: none;            transform: translateY(0);    border-color: var(--warm-soft); }
}
.bf-ai-progress { opacity: 0; align-items: center; justify-content: center; gap: 12px; animation: bfAIProgress 16s ease-in-out infinite; }
@keyframes bfAIProgress {
  0%, 49% { opacity: 0; } 53% { opacity: 1; }
  90% { opacity: 1; } 94%, 100% { opacity: 0; }
}
.bf-ai-working { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: bfAIWorking 16s ease-in-out infinite; }
@keyframes bfAIWorking {
  0%, 49% { opacity: 0; } 53% { opacity: 1; }
  62% { opacity: 1; } 66%, 100% { opacity: 0; }
}
.bf-ai-dots { display: flex; gap: 5px; }
.bf-ai-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--warm); animation: bfDots 1s ease-in-out infinite; }
.bf-ai-dots span:nth-child(2) { animation-delay: 0.15s; }
.bf-ai-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bfDots { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.bf-ai-working-text { font-size: var(--font-size-xs); color: var(--ink-mid); }
.bf-ai-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; animation: bfAIDone 16s ease-in-out infinite; }
@keyframes bfAIDone {
  0%, 62% { opacity: 0; } 67% { opacity: 1; }
  90% { opacity: 1; } 94%, 100% { opacity: 0; }
}
.bf-ai-done i { font-size: 1.6rem; color: var(--success-dark); }
.bf-ai-done span { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--success-dark); }

/* Office formats + perimeter note */
.bf-hero-note {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.bf-formats { display: flex; flex-wrap: wrap; gap: 7px; }
.bf-fmt {
  font-family: var(--font-family-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; padding: 4px 9px; border-radius: var(--radius-xs);
}
.bf-fmt--word    { background: var(--file-word-bg);    color: var(--file-word); }
.bf-fmt--excel   { background: var(--file-excel-bg);   color: var(--file-excel); }
.bf-fmt--impress { background: var(--file-impress-bg); color: var(--file-impress); }
.bf-fmt--draw    { background: var(--file-draw-bg);    color: var(--file-draw); }
.bf-hero-note p {
  margin: 0; font-size: var(--font-size-sm); color: var(--ink-mid); line-height: 1.6;
}
.bf-hero-note p strong { color: var(--ink); }

/* ----------------------------------------------------------------------------
   MODULE CARDS / GENERIC FEATURE CARDS
   ---------------------------------------------------------------------------- */
.bf-grid { display: grid; gap: var(--spacing-lg); }
.bf-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bf-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bf-grid-4 { grid-template-columns: repeat(4, 1fr); }

.bf-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  height: 100%;
}
.bf-card:hover { border-color: var(--warm-soft); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.bf-card h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-sm); }
.bf-card p { font-size: var(--font-size-sm); color: var(--ink-soft); margin: 0; line-height: 1.65; }

.bf-ic {
  width: 50px; height: 50px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: 1.4rem; color: #fff;
  margin-bottom: var(--spacing-md);
}
.bf-ic--warm { background: var(--warm); }
.bf-ic--info { background: var(--info); }
.bf-ic--violet { background: var(--call-purple); }
.bf-ic--green { background: var(--success-dark); }
.bf-ic--soft { background: var(--warm-soft); }

/* Intro paragraph under "Что такое Somnium Workspace" */
.bf-intro {
  max-width: 820px; margin: 0 auto var(--spacing-2xl); text-align: center;
  font-size: var(--font-size-md); color: var(--ink-mid); line-height: 1.8;
}

/* ----------------------------------------------------------------------------
   "ЗАЧЕМ БИЗНЕСУ" — benefit cards with leading dot
   ---------------------------------------------------------------------------- */
.bf-benefit { position: relative; padding-left: 0; }
.bf-benefit .bf-benefit-mark {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--warm-pale); color: var(--warm); font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
}

/* ----------------------------------------------------------------------------
   "ДЛЯ КОГО" — audience segments
   ---------------------------------------------------------------------------- */
.bf-seg { display: flex; gap: var(--spacing-md); align-items: flex-start; }
.bf-seg .bf-ic { margin-bottom: 0; flex-shrink: 0; }
.bf-seg .bf-seg-body h4 { margin-bottom: 6px; }

/* ----------------------------------------------------------------------------
   "КЛЮЧЕВЫЕ ВОЗМОЖНОСТИ" — capability chips
   ---------------------------------------------------------------------------- */
.bf-caps {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  max-width: 900px; margin: 0 auto;
}
.bf-cap {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 16px;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--ink-mid);
  transition: var(--transition);
}
.bf-cap:hover { border-color: var(--warm-soft); background: var(--warm-bg); }
.bf-cap i { color: var(--success-dark); font-size: 1rem; flex-shrink: 0; }

/* ----------------------------------------------------------------------------
   SECURITY SECTION
   ---------------------------------------------------------------------------- */
.bf-sec-band {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--spacing-2xl);
}
.bf-sec-lead { max-width: 760px; font-size: var(--font-size-md); color: var(--ink-mid); line-height: 1.8; margin-bottom: var(--spacing-xl); }
.bf-sec-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: var(--spacing-md) 0; border-top: 1px solid var(--border);
}
.bf-sec-item:first-child { border-top: none; }
.bf-sec-item i {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--success-bg); color: var(--success-dark);
}
.bf-sec-item span { font-size: var(--font-size-sm); color: var(--ink-mid); font-weight: var(--font-weight-medium); line-height: 1.5; }

/* ----------------------------------------------------------------------------
   "РАЗРАБОТАНО В КАЗАХСТАНЕ" BAND
   ---------------------------------------------------------------------------- */
.bf-kz {
  background: linear-gradient(135deg, var(--ink) 0%, #2c241d 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  color: var(--cream);
  box-shadow: var(--shadow-xl);
}
.bf-kz .section-label { color: var(--warm-soft); }
.bf-kz .section-label::before { background: var(--warm-soft); }
.bf-kz h2 { color: var(--white); margin-bottom: var(--spacing-md); }
.bf-kz p { color: rgba(250, 248, 244, 0.8); max-width: 760px; line-height: 1.8; }
.bf-kz-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-top: var(--spacing-xl); }
.bf-kz-point {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius); padding: var(--spacing-lg);
}
.bf-kz-point i { color: var(--warm-soft); font-size: 1.4rem; margin-bottom: 10px; display: block; }
.bf-kz-point h5 { color: var(--white); margin-bottom: 4px; }
.bf-kz-point p { font-size: var(--font-size-sm); margin: 0; }

/* ----------------------------------------------------------------------------
   PILOT STEPS
   ---------------------------------------------------------------------------- */
.bf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); counter-reset: step; }
.bf-step {
  position: relative; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--spacing-lg); box-shadow: var(--shadow-sm);
}
.bf-step-num {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--warm); color: #fff; font-weight: var(--font-weight-black);
  font-size: var(--font-size-lg); margin-bottom: var(--spacing-md);
}
.bf-step h4 { font-size: var(--font-size-md); margin-bottom: 6px; }
.bf-step p { font-size: var(--font-size-sm); color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* ----------------------------------------------------------------------------
   FINAL CTA
   ---------------------------------------------------------------------------- */
.bf-final {
  text-align: center;
  background: linear-gradient(135deg, var(--warm) 0%, var(--warm-soft) 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-warm-strong);
}
.bf-final h2 { color: #fff; margin-bottom: var(--spacing-md); }
.bf-final p { color: rgba(255, 255, 255, 0.92); max-width: 640px; margin: 0 auto var(--spacing-xl); font-size: var(--font-size-md); line-height: 1.7; }
.bf-final .bf-cta-row { justify-content: center; }
.bf-final .btn-warm { background: var(--white); color: var(--warm); }
.bf-final .btn-warm:hover { background: var(--cream); color: var(--warm-dark); }
.bf-final .btn-outline { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.bf-final .btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* ----------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------------- */
.bf-footer {
  padding: var(--spacing-2xl) var(--spacing-xl);
  border-top: 1px solid var(--border);
  text-align: center; color: var(--ink-soft); font-size: var(--font-size-sm);
}
.bf-footer .bf-footer-brand { font-weight: var(--font-weight-black); color: var(--ink); letter-spacing: 0.04em; }
.bf-footer .bf-footer-legal { font-size: var(--font-size-xs); color: var(--ink-soft); margin: 6px 0; letter-spacing: 0.02em; }

/* ----------------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .bf-hero-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); }
  .bf-mock { transform: none; }
  /* Stacked layout: chat on top, editor below — both static, no choreography. */
  .bf-ws { flex-direction: column; height: auto; }
  .bf-mock-rail { display: none; }
  .bf-ws-chat { border-bottom: 1px solid var(--border); }
  .bf-ws-doc {
    box-shadow: none; border-left: none;
    width: 100%; animation: none; min-height: 220px;
  }
  .bf-ws-doc-inner { width: 100%; }
  .bf-ws-editing { opacity: 1; animation: none; }
  .bf-doc-page { min-height: 200px; }
  .bf-doc-sheet { height: auto; }
  .bf-doc-layer { position: static; }
  .bf-doc-before { opacity: 1; animation: none; }
  .bf-doc-after { display: none; }
  .bf-mock-file { animation: none; }
  .bf-ai-star { animation: none; }
  .bf-ai-panel { display: none; }   /* the floating assistant demo is desktop-only */
  .bf-cursor { display: none; }
  .bf-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .bf-kz-points { grid-template-columns: 1fr; }
  .bf-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .bf-section { padding: 64px var(--spacing-md); }
  .bf-grid-2, .bf-grid-3, .bf-grid-4 { grid-template-columns: 1fr; }
  .bf-caps { grid-template-columns: 1fr; }
  .bf-steps { grid-template-columns: 1fr; }
  .bf-sec-band, .bf-kz, .bf-final { padding: var(--spacing-xl); }
  .bf-nav-login { display: none; } /* keep header clean on phones; CTA stays */
  .bf-cta-row .btn { width: 100%; }
}

@media (max-width: 480px) {
  .bf-section { padding: 48px var(--spacing-md); }
  .bf-hero h1 { font-size: 30px; }
}

/* Honor reduced-motion preferences for the fade-up reveals and the hero loop. */
@media (prefers-reduced-motion: reduce) {
  /* Only disable scroll-reveal motion here. The hero demo is the product
     story itself and must always play — many corporate/Windows Server setups
     report reduced-motion by default, which would otherwise hide it. */
  .fade-up { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}