/* ============================================================================
   NZT homepage — chessboard-specific layout ONLY.
   Tokens, reset, fonts, particle canvas, reveal, and the df-star, display and
   lede classes all come from the design system: load
     /assets/ds/css/nzt-ds.css  then  /assets/ds/css/compat.css  then THIS file.
   Everything here references DS tokens (var(--void), var(--plum), var(--s-*) …).
   NOTE: never write a glob like "df-star-slash" as star-slash in a comment —
   the star-slash sequence terminates this comment early and the parser then
   silently swallows the first rule below it.
   ============================================================================ */

html { scroll-padding-top: var(--header-h); }

/* Gentle vertical scroll-snap for the chessboard (never traps the user). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-modal);
  background: var(--plum); color: #fff; padding: 10px 16px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* Load-in overlay — a brief LOADING screen on pure black that fades out as the
   brain assembles from particles (JS toggles .is-hidden; see particles.js). */
.nzt-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-12); background: #000; color: var(--bone, #fff);
  font-family: var(--font-body); text-transform: uppercase;
  transition: opacity 0.6s var(--ease-standard, ease);
}
.nzt-loader__label { font-size: 12px; letter-spacing: 0.42em; padding-left: 0.42em; opacity: 0.65; }
.nzt-loader__num   { font-size: 13px; letter-spacing: 0.12em; opacity: 0.9; font-variant-numeric: tabular-nums; }
.nzt-loader.is-hidden { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nzt-loader { transition: none; } }

/* nzt-023: контентная область уже, чем экран — широкие боковые поля
   (5vw, 36–120px) вместо прежних 24px впритык к краям, шапка и футер
   дышат теми же полями. Фигуры не задеты: канвас частиц полноэкранный,
   позиции фигур заданы в NDC и от контейнера не зависят. */
.container {
  width: 100%; max-width: 1720px; margin: 0 auto;
  padding: 0 clamp(var(--s-36), 5vw, var(--s-120));
}

/* Full-screen scroll anchors for the continuous particle field. */
.shape-section {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; scroll-snap-align: start;
}
.shape-section > .container { position: relative; z-index: var(--z-raised); }
.shape-section--tall {
  align-items: flex-start;
  padding-top: calc(var(--header-h) + var(--s-36));
  padding-bottom: var(--s-60);
}
/* nzt-008: the last section before the footer used to snap its own top back
   into view when the user scrolled toward the footer. Opting it out of snap
   lets the end of the page stay put. nzt-015: that section is now #contacts
   (the quiz was removed) — it is no longer taller than 100vh, but the opt-out
   is kept because the footer interaction it fixed is unchanged. */
#contacts { scroll-snap-align: none; }
/* Empty particle-stage sections: room for the bulb→gear and gear→globe dispersals.
   A plain div carries no scroll-snap-align, so the proximity snap skips them.
   nzt-013: doubled to 200vh. The first transition (brain→bulb) spans ~279vh of
   scroll while these two got ~150vh each, which is exactly why they read as
   abrupt. particles.js derives its timeline from MEASURED anchor centres, so
   this height is a free knob — no stage constant depends on it. */
.shape-spacer { min-height: 200vh; }
.no-webgl .shape-section::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: min(60vh, 520px); height: min(60vh, 520px);
  transform: translate(-50%, -50%); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(128,82,255,0.22), transparent 60%),
    radial-gradient(circle at 60% 60%, rgba(255,184,41,0.14), transparent 55%);
  filter: blur(10px); z-index: 0;
}

/* --- NZT wordmark ------------------------------------------------------ */
.nzt { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); }
.nzt__spark { width: 22px; height: 22px; color: var(--plum); }
.nzt__name { display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; }
.nzt__n { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 18px; letter-spacing: 0.02em; }
.nzt__b { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: var(--tracking-cta); color: var(--ash); text-transform: uppercase; }

/* --- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  backdrop-filter: blur(var(--blur-header)); background: rgba(0,0,0,0.45);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner { display: flex; align-items: center; gap: var(--s-24); height: var(--header-h); }
.site-nav { display: flex; gap: var(--s-36); margin: 0 auto; }
.site-nav a { font-size: 18px; letter-spacing: var(--tracking-nav); color: var(--bone); transition: color var(--dur-base) var(--ease-standard); }
.site-nav a:hover { color: var(--plum); }
/* nzt-008: header phone — sits between the (centred) nav and the CTA, in the
   nav type scale. tabular-nums keeps the digits even. */
.site-header__phone {
  font-size: 18px; letter-spacing: var(--tracking-nav); color: var(--bone);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: color var(--dur-base) var(--ease-standard);
}
.site-header__phone:hover { color: var(--plum); }

/* --- Hero & feature copy ----------------------------------------------- */
/* The brain (and the whole morph cinematic) paints on the single full-bleed
   .nzt-particles canvas behind every section; the hero copy just layers over it. */
.hero__grid {
  display: grid; grid-template-columns: 1fr;
  align-items: center; gap: var(--s-36);
}
/* Column sized to the (slightly reduced) two-line heading; the descriptor below
   fills the same column so its right edge lines up with the heading's. */
.hero__copy { max-width: min(46vw, 640px); text-shadow: var(--shadow-text); }
/* Reduce the DS hero scale a touch so the heading is narrower (the DS rule uses
   :where(), specificity 0, so this plain selector wins). */
.hero__copy .display--hero { font-size: clamp(2.2rem, 3.7vw, 3.7rem); }
/* Keep the two authored lines (each half on one line); the second line may
   extend under the top-right figure — overlap is acceptable per design. */
.hero__copy .display--hero { white-space: nowrap; }
.hero__lede { margin-top: var(--s-24); max-width: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-30); }
/* «Связаться» is a <button>; strip native form-control rendering so its text
   matches the <a> «Получить консультацию» exactly. Ghost fill/border unchanged. */
.hero__actions button.df-cta { -webkit-appearance: none; appearance: none; }

/* Contact modal form: reveal the success block and hide the inputs on submit. */
.contact-form .form-field + .form-field { margin-top: var(--s-18); }
.contact-form .df-cta { margin-top: var(--s-18); }
.contact-form.is-sent .form-field,
.contact-form.is-sent .form-status,
.contact-form.is-sent > button[type="submit"] { display: none; }
.contact-form.is-sent .form-success { display: block; }
.feature__copy { max-width: 46ch; padding: var(--s-30) 0; text-shadow: var(--shadow-text); }
.feature__copy--wide { max-width: 64ch; }
.feature__copy--right { margin-left: auto; }
/* nzt-008: the #what intro block sits at the FAR RIGHT (reverses nzt-007's
   left alignment); keeps the hero measure (min(46vw,640px)) and the enriched
   lede. Text stays left-aligned inside the right-hugging column. ID selector
   (1,1,0) beats .feature__copy--right (0,1,0). */
#what .feature__copy { max-width: min(46vw, 640px); margin-left: auto; margin-right: 0; text-align: left; }
/* nzt-009: statement cards are now [ large lilac icon | title + subtext ] rows.
   The nzt-008 panel chrome (surface, border, radius, padding, measure) stays;
   the inner layout becomes a flex row — icon fixed on the left, text column right. */
.feature__copy--center {
  display: flex;
  align-items: center;
  gap: var(--s-30);
  max-width: min(760px, 94vw);
  margin-inline: auto;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-30);
}
/* nzt-010: icons enlarged ~4× (56→224px). vector-effect:non-scaling-stroke on the
   symbol shapes keeps the line a crisp ~2px at any render size (see sprite.svg). */
.feature__icon {
  flex: none;
  width: 224px; height: 224px;
  color: var(--plum);
  stroke: currentColor;
  fill: none;
}
.feature__copy-text { min-width: 0; }
.feature__copy--center .feature__statement {
  max-width: none;
  margin-inline: 0;
  text-align: left;
  /* nzt-006 title size (kept): ~22% smaller than the other --lg headers.
     :where(.display--lg) is 0-specificity so this wins. */
  font-size: clamp(1.5rem, 2.65vw, 2.25rem);
}
/* nzt-008: explanatory subtext under the title — smaller, muted, one card. */
.feature__copy--center .feature__statement-sub {
  margin-top: var(--s-16);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.5;
  color: var(--text-muted);
  text-align: left;
}
@media (min-width: 920px) {
  /* nzt-010: widen so the 224px icon + a ≥360px text column read comfortably. */
  .feature__copy--center { max-width: min(900px, 66vw); }
}
.feature__copy p + p { margin-top: var(--s-18); }
.feature__copy strong { color: var(--bone); font-weight: var(--fw-bold); }
.feature__lede { margin-top: var(--s-18); }
.problem__actions { margin-top: var(--s-36); }

.section-head { max-width: 60ch; margin: 0 auto var(--s-36); text-align: center; }
.section-head .lede { margin: var(--s-18) auto 0; }

/* --- Horizontal deep-dive ---------------------------------------------- */
.problem { padding: 0; display: block; }
.deepdive { width: 100%; }
.deepdive__track {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.deepdive__track::-webkit-scrollbar { display: none; }
.deepdive__panel {
  flex: 0 0 100%; min-width: 100%; min-height: 100vh;
  display: flex; align-items: center; scroll-snap-align: start;
}
.deepdive__panel--detail .feature__copy { border-left: 2px solid var(--plum); padding-left: var(--s-24); }
.deepdive__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 12px;
  letter-spacing: var(--tracking-cta); text-transform: uppercase; color: var(--text-muted);
  background: none; border: 0; cursor: pointer; margin-bottom: var(--s-24);
  transition: color var(--dur-base) var(--ease-standard);
}
.deepdive__back:hover { color: var(--bone); }
.deepdive__back svg { width: 16px; height: 16px; }

/* --- How we work (4 steps) -------------------------------------------- */
.how { width: 100%; }
.how__head { max-width: 56ch; margin-bottom: var(--s-60); }
.how__head .lede { margin-top: var(--s-18); }
.how__steps { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-18); }
.how__step {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-30); background: var(--surface-card);
  transition: border-color var(--dur-cta) var(--ease-standard), transform var(--dur-cta) var(--ease-standard), background-color var(--dur-cta) var(--ease-standard);
}
.how__step:hover { border-color: var(--border-strong); background: var(--plum-004); transform: translateY(-3px); }
.how__num { font-family: var(--font-display); font-weight: var(--fw-light); font-size: 30px; color: var(--plum); }
.how__title { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 20px; margin: var(--s-12) 0; letter-spacing: -0.01em; }
.how__body { color: var(--text-body); font-size: 15px; line-height: 1.55; }

/* --- Glass card (contacts here; quiz on /v2/) -------------------------- */
.form-card {
  max-width: 600px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-36); background: rgba(0,0,0,0.66); backdrop-filter: blur(var(--blur-glass));
}

/* nzt-015: the homepage no longer collects personal data — the consultation
   quiz was replaced by a plain contacts block (phone + email). Two rows of
   "icon + value" inside the same glass card the form used, so the end of the
   page keeps its shape over the particle field. */
/* nzt-016: the globe rests in the RIGHT half (GLOBE_SHIFT_X in particles.js), so
   the whole contacts column hugs the LEFT rather than sitting centred under it —
   the mirror of how #what hugs the right against a left-side figure. Scoped to
   #contacts so the shared .section-head / .form-card stay centred on /v2/. */
#contacts .section-head { max-width: min(46vw, 620px); margin-inline: 0; text-align: left; }
#contacts .section-head .lede { margin-inline: 0; }
#contacts .form-card { margin-inline: 0; }

.contacts { display: grid; gap: var(--s-24); }
.contacts__row {
  display: flex; align-items: center; gap: var(--s-18);
  text-decoration: none; color: var(--bone);
}
.contacts__icon { width: 28px; height: 28px; flex: none; color: var(--plum); }
.contacts__value {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  overflow-wrap: anywhere;                 /* the email must never overflow on a phone */
  transition: color var(--dur-cta) var(--ease-standard);
}
.contacts__row:hover .contacts__value,
.contacts__row:focus-visible .contacts__value { color: var(--plum); }

/* --- Consultation quiz — still used by /v2/, which loads this stylesheet - */
.form-card.quiz { max-width: 880px; }
.quiz-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: var(--s-30); }
.quiz-dot { width: 28px; height: 4px; border-radius: 2px; background: var(--border-strong); transition: background-color var(--dur-cta) var(--ease-standard); }
.quiz-dot.is-active { background: var(--plum); }
.quiz-step { border: 0; padding: 0; margin: 0; }
.quiz-legend { font-family: var(--font-display); font-weight: var(--fw-light); font-size: 22px; margin-bottom: var(--s-24); color: var(--bone); }
.quiz-options { display: grid; gap: var(--s-12); grid-template-columns: 1fr 1fr; }
.quiz-option {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; cursor: pointer; color: var(--text-body);
  transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.quiz-option:hover { border-color: var(--border-strong); color: var(--bone); }
.quiz-option input { width: 18px; height: 18px; accent-color: var(--plum); flex: 0 0 auto; }
.quiz-option:has(input:checked) { border-color: var(--plum); background: var(--plum-008); color: var(--bone); }
.quiz-nav { display: flex; gap: var(--s-12); margin-top: var(--s-30); flex-wrap: wrap; }

.form-fields { display: grid; gap: var(--s-18); grid-template-columns: 1fr 1fr; }
.form-fields .form-consent, .form-fields .form-hp, .form-fields .quiz-nav, .form-fields .form-status { grid-column: 1 / -1; }
.form-field { display: grid; gap: 8px; }
.form-field label { font-size: 13px; letter-spacing: var(--tracking-nav); color: var(--text-body); }
.form-field input, .form-field select {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--bone);
  background: var(--surface-input); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 13px 15px;
  transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.form-field select { appearance: none; cursor: pointer; }
.form-field select option { color: #111; }
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--plum); background: var(--plum-006); }
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.form-consent a { color: var(--ash); text-decoration: underline; }
.form-consent input { margin-top: 3px; accent-color: var(--plum); }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 13px; min-height: 1em; margin-top: var(--s-6); }
.form-status--ok  { color: var(--status-success); }
.form-status--err { color: var(--status-warning); }
.form-success { text-align: center; }
.form-card.is-sent .quiz-step, .form-card.is-sent .quiz-progress { display: none; }
.form-success__title { font-family: var(--font-display); font-weight: var(--fw-light); font-size: 28px; }
.form-success p { color: var(--text-body); margin-top: var(--s-12); }

/* --- Footer ------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--hairline); padding: var(--s-60) 0 var(--s-36); background: rgba(0,0,0,0.55); }
.site-footer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); flex-wrap: wrap; }
.site-footer__links { display: flex; gap: var(--s-24); flex-wrap: wrap; }
.site-footer__links a { color: var(--ash); text-decoration: underline; font-size: 13px; }
.site-footer__links a:hover { color: var(--bone); }
.site-footer__legal {
  display: grid; gap: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
/* nzt-016: the divider only makes sense when there is a row above it to divide
   from. The homepage footer is now the copyright line alone (the wordmark row
   was removed), while /v2/ still has the logo + document links above — this
   keeps the rule correct for both without scoping by page. */
.site-footer__top + .site-footer__legal {
  margin-top: var(--s-36); padding-top: var(--s-24); border-top: 1px solid var(--hairline);
}

/* --- Custom cursor dot ------------------------------------------------- */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%; background: var(--plum);
  pointer-events: none; z-index: var(--z-cursor); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.cursor-dot.is-active { opacity: 0.9; }
.cursor-dot.is-hover { transform: scale(2.2); background: var(--amber); }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 920px) {
  .hero__copy, .feature__copy { max-width: none; }
  /* nzt-008: the #what ID rule (1,1,0) beats the line above, so re-neutralise
     it here — full width, no right-hug — on phones/tablets. */
  #what .feature__copy { max-width: none; margin: 0; }
  /* Same story for the contacts column: min(46vw, …) is only ~180px on a phone,
     and the figures are centred at this width anyway, so drop the cap. */
  #contacts .section-head { max-width: none; }
  /* Re-allow wrapping on small screens so the hero heading can't cause
     horizontal overflow (the figure isn't top-right at this width). */
  .hero__copy .display--hero { white-space: normal; }
  .how__steps { grid-template-columns: 1fr; }
  .shape-section { min-height: 92vh; }
  .shape-spacer { min-height: 184vh; }   /* nzt-013: 2× the section height, as on desktop */
  .hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* nzt-009: header CTA removed entirely; ≤600px keeps just logo + phone
     (nav collapses here, phone stays visible). */
  .site-nav { display: none; }
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .shape-section { min-height: 88vh; }
  .shape-spacer { min-height: 176vh; }   /* nzt-013: 2× the section height, as on desktop */
  /* nzt-010: a 224px side-by-side icon can't share a 390px row — stack it above
     the text and shrink to ~120px so the card reads cleanly on mobile. */
  .feature__copy--center {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--s-18);
  }
  .feature__icon { width: 120px; height: 120px; }
  .form-card { padding: var(--s-24); }
  .form-card.quiz { max-width: 600px; }
  .quiz-options, .form-fields { grid-template-columns: 1fr; }
  .nzt__name { white-space: nowrap; }
  .nzt__n { font-size: 16px; }
  .nzt__b { font-size: 11px; }
  .container { padding: 0 var(--s-18); }
}

/* --- Content sections below the cinematic (#products … #effects) --------
   nzt-017: these live past the particle-timeline cut (measureAnchors stops
   at #who), so they are plain sections: no .shape-section, no snap-align.
   The resting globe stays fixed behind them — a light scrim keeps the cards
   readable without hiding it. Grids come from the DS (.nzt-cards). */
.content-section {
  position: relative;
  padding: var(--s-60) 0;
  /* 0.35 left the bare #effects text noisy over the resting globe — 0.55
     keeps the particles as texture while the copy reads cleanly. */
  background: rgba(0, 0, 0, 0.55);
}
.content-section > .container { position: relative; z-index: var(--z-raised); }
.section-head--left { margin-inline: 0; text-align: left; max-width: 64ch; }
.section-head--left .lede { margin-inline: 0; }

.mod-icon { width: 44px; height: 44px; color: var(--plum); margin-bottom: var(--s-18); display: block; }
.nzt-card .mod-icon { margin-bottom: var(--s-12); }

.products__note { max-width: 64ch; margin: var(--s-36) 0 0; }
.products__custom { margin-top: var(--s-48); }
.products__custom .lede { max-width: 64ch; margin: var(--s-18) 0 0; }
.products__systems {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s-12);
  margin: var(--s-24) 0 0; padding: 0;
}
.products__systems .nzt-tag { font-size: 14px; padding: 8px 14px; color: var(--text-body); }
.products__systems b { color: var(--text-primary); font-weight: var(--fw-bold); }

.teamos__cap { display: block; margin-top: var(--s-30); }

/* nzt-022: «40 эффектов» — одноэкранный горизонтальный слайдер по образцу
   блока «100 улучшений» (buona-fortuna): карточка = группа из 5 эффектов,
   бейдж с диапазоном номеров, круглые стрелки на вертикальных границах
   карточки, scroll-snap доводит трек до целой карточки. Хром — ДС NZT:
   стеклянная панель, plum-номера, amber-бейдж. */
#effects { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
#effects > .container { min-width: 0; width: 100%; }
#effects .section-head--left { max-width: min(56vw, 860px); }
.effects-scroller { position: relative; margin-top: var(--s-36); min-width: 0; }
.effects-track {
  display: flex; gap: var(--s-24); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.effects-track::-webkit-scrollbar { display: none; }
/* Полукадр: на экране две карточки-группы разом → 4 позиции слайдера.
   Snap-точка только у нечётных карточек, поэтому слайд — всегда ПАРА групп
   (остановиться «между» парами нельзя). */
.effects-card {
  flex: 0 0 calc(50% - var(--s-24) / 2); min-width: calc(50% - var(--s-24) / 2);
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-30) var(--s-36);
  backdrop-filter: blur(var(--blur-glass));
}
.effects-card:nth-child(odd) { scroll-snap-align: start; }
.effects-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-24); margin-bottom: var(--s-30); padding-bottom: var(--s-24);
  border-bottom: 1px solid var(--hairline);
}
.effects-card__head h3 {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: clamp(19px, 1.6vw, 25px); letter-spacing: -0.01em; margin: 0;
}
.effects-card__badge {
  font-family: var(--font-display); font-weight: var(--fw-light); font-size: 13px;
  letter-spacing: 0.08em; color: var(--amber); border: 1px solid var(--amber);
  border-radius: 999px; padding: 5px 14px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.effects-card__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--s-18);
}
.effects-card__list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 17px; line-height: 1.55; color: var(--text-body);
}
.effects-card__list b {
  font-family: var(--font-display); font-weight: var(--fw-light);
  color: var(--plum); flex: none; width: 2.4ch; padding-top: 1px;
  font-variant-numeric: tabular-nums;
}
.effects-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  color: #fff; background: var(--plum);
  box-shadow: 0 8px 22px rgba(128, 82, 255, 0.30);
  font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard);
}
.effects-nav:hover { transform: translateY(-50%) scale(1.06); }
.effects-nav:focus-visible { outline: 3px solid var(--plum-030, rgba(128, 82, 255, 0.45)); outline-offset: 2px; }
/* Центр круга ложится ровно на вертикальную границу карточки (44px → 22px). */
.effects-nav--prev { left: -22px; }
.effects-nav--next { right: -22px; }

/* nzt-018: the homepage now mirrors the 7-sheet products deck. */
/* Cover fact line under the hero lede — the deck's «интегрируется с TeamOS». */
.hero__facts {
  margin-top: var(--s-18); max-width: 46ch;
  color: var(--text-muted); font-size: 15px; line-height: 1.55;
}
.hero__facts strong { color: var(--text-primary); }

/* nzt-020: the gear is retired — #industries reads LEFT like #who/#teamos, and
   the glass note spreads full-width in two text columns (the deck's own layout). */
#industries .feature__copy { max-width: min(52vw, 760px); margin: 0; }
.industries__grid { margin: var(--s-36) 0; }
.industries__note { max-width: none; }
.industries__note .feature__body { column-count: 2; column-gap: var(--s-36); }
.nzt-card--industry .nzt-card__title { margin-top: var(--s-12); }

/* Contacts follow the deck's closing sheet: label over value, four records.
   Single column — the long email must stay on one line inside the left-hugged card. */
.contacts__row { flex-direction: column; align-items: flex-start; gap: 3px; }
.contacts__label { font-size: 13px; font-weight: var(--fw-bold); color: var(--text-muted); }

/* --- nzt-019: desktop polish — hierarchy, rhythm, glass panels ---------- */

/* Headings stop breaking with orphan tails. */
.display { text-wrap: balance; }

/* Body tier under the lede: deck paragraphs read as text, not as five stacked
   ledes; <strong> becomes the accent layer again. */
.feature__body {
  font-size: 16.5px; line-height: 1.65; color: var(--text-body);
  margin-top: var(--s-18); text-shadow: var(--shadow-text);
}
.feature__body strong { color: var(--text-primary); }
.feature__copy .lede + .feature__body { margin-top: var(--s-24); }

/* Hero fact line → badge with an amber rule, not a footnote. */
.hero__facts {
  font-size: 16px; color: var(--text-body);
  border-left: 2px solid var(--amber); padding-left: var(--s-18);
  margin-top: var(--s-24);
}

/* #who column widens — the bulb rests with its centre at 69.8% of the frame. */
#who .feature__copy--wide { max-width: min(48vw, 720px); }
#who .display--lg { margin-bottom: var(--s-12); }

/* Industry tiles → compact icon+title rows; the half-empty cards collapse. */
.industry-row {
  display: flex; align-items: center; gap: var(--s-18);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-card); padding: var(--s-18) var(--s-24);
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.industry-row:hover { border-color: var(--border-strong); background: var(--plum-004); }
.industry-row__ic {
  flex: none; width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--plum-008); display: grid; place-items: center;
}
.industry-row__ic .mod-icon { width: 30px; height: 30px; margin: 0; }
.industry-row__title {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 17px; letter-spacing: -0.01em;
}

/* The industries paragraph rides a glass panel — readable over the drifting dust. */
.glass-note {
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--s-30);
}
.glass-note .feature__body { margin-top: 0; }

/* #teamos: 64ch of 16px (~512px) broke the h2 at «IT-» — widen the head, keep
   the lede at a readable measure. The globe rests right, the left half is free. */
#teamos .section-head--left { max-width: min(48vw, 720px); }
#teamos .section-head--left .lede { max-width: 64ch; }

/* #teamos: the module cap becomes a divider — kicker + growing hairline. */
.teamos__cap { display: flex; align-items: center; gap: var(--s-18); margin: var(--s-36) 0 0; }
.teamos__cap::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* Closing heading gets the final-chord scale. */
#contacts .display--lg { font-size: clamp(2.4rem, 4vw, 4rem); }

@media (max-width: 920px) {
  #who .feature__copy--wide, #industries .feature__copy { max-width: none; }
  .industries__note .feature__body { column-count: 1; }
  /* nzt-022: на узких экранах слайдер разбирается — карточки-группы встают
     вертикальным стеком с естественной высотой, стрелки не нужны. */
  #effects { display: block; min-height: auto; }
  #effects .section-head--left { max-width: none; }
  .effects-track { display: block; overflow-x: visible; scroll-snap-type: none; }
  .effects-card { min-width: 0; width: auto; margin-bottom: var(--s-18); padding: var(--s-24); }
  .effects-card__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .effects-card__list { grid-template-columns: 1fr; }
  .effects-nav { display: none; }
}
@media (max-width: 600px) {
  .content-section { padding: var(--s-48) 0; }
  .industry-row { padding: var(--s-12) var(--s-18); }
  .glass-note { padding: var(--s-18); }
}

/* --- nzt-023: вертикальный ритм ---------------------------------------- */
/* После лампочки (#who) зияло 200vh пустоты, а секции дальше шли встык.
   Спейсер после #who укорочен (particles.js меряет якоря по факту — высота
   спейсера свободная ручка, разлёт лампочки просто происходит на более
   коротком прогоне), а секциям после разлёта добавлен воздух между собой.
   Первый спейсер (мозг → рассыпание → лампочка) не тронут: там переход
   занимает весь прогон и пустым не выглядит. */
#who + .shape-spacer { min-height: 110vh; }
#teamos, #effects, #contacts { margin-top: 14vh; }