/* ============================================================================
   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; } }

/* Full-width shell to 2000px, then centred with side gutters beyond.
   Logo + CTA ride the true screen edges (up to 2000px); nav stays centred. */
.container { width: 100%; max-width: 2000px; margin: 0 auto; padding: 0 var(--s-24); }

/* 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); }
}