/* ==========================================================================
   Alex Neon — design tokens (design-system record for this project)
   --------------------------------------------------------------------------
   System state at bootstrap: NONE → this file is the minimal foundation.
   Rules of the game:
   - One accent only: the azure-teal → violet gradient. No third hues.
   - Unbounded is display-only (h1, h2, large numbers, monogram), moderate
     weights 300–500. Manrope carries everything else.
   - Every color/space/radius in the layers below must reference a token.
   Contrast (against --bg #05060a): --text 18.2:1 · --text-2 9.3:1 ·
   --text-3 6.2:1 · --teal 12.9:1 · --violet 4.8:1 (large/graphic use only,
   --violet-text 7.1:1 is the text-safe violet).
   ========================================================================== */

/* ---- Self-hosted variable fonts (SIL OFL 1.1, see assets/fonts/) ---- */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Unbounded";
  src: url("fonts/unbounded-cyrillic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Unbounded";
  src: url("fonts/unbounded-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Foundation ----------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Color — surfaces */
  --bg: #05060a;
  --surface: #0c0f17;
  --surface-2: #12151f;

  /* Color — text */
  --text: #f0f3fa;
  --text-2: #a9b1c4;
  --text-3: #8891a6;

  /* Color — hairlines */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);

  /* Color — the single accent pair */
  --teal: #2ee6d6;
  --violet: #8b5cf6;
  --violet-text: #a78bfa; /* violet lightened to pass 7:1 on surfaces */
  --logo-violet: #9d76f8; /* wordmark stroke: brighter than --violet on black */
  --grad: linear-gradient(100deg, var(--teal), var(--violet));
  --tint-teal: rgba(46, 230, 214, 0.08);
  --tint-violet: rgba(139, 92, 246, 0.08);
  --glow-teal: rgba(46, 230, 214, 0.28);
  --glow-violet: rgba(139, 92, 246, 0.28);

  /* Typography — families */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-text: "Manrope", system-ui, sans-serif;

  /* Typography — scale (display roles use clamp; body stays 1rem) */
  --fs-h1: clamp(1.75rem, 1.3rem + 2vw, 2.55rem);
  --fs-h2: clamp(1.375rem, 1.08rem + 1.3vw, 1.95rem);
  --fs-num: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); /* card numbers 01–09 */
  --fs-h3: 1.1875rem;
  --fs-h4: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-meta: 0.8125rem;
  --fs-kicker: 0.75rem;
  --fs-chip: 0.6875rem;

  /* Typography — rhythm */
  --lh-display: 1.18;
  --lh-body: 1.65;
  --ls-caps: 0.08em;
  --ls-display: -0.015em;

  /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Layout */
  --section: clamp(6rem, 4.2rem + 5.5vw, 10rem);
  --container: 75rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 4.25rem;

  /* Radius scale */
  --r-sm: 0.625rem;
  --r-md: 1rem;
  --r-lg: 1.25rem;
  --r-pill: 999px;

  /* Elevation (borders carry structure; shadows stay soft on near-black) */
  --shadow-1: 0 16px 40px rgba(2, 4, 10, 0.55);
  --shadow-cta: 0 10px 30px rgba(46, 230, 214, 0.16),
    0 2px 12px rgba(139, 92, 246, 0.18);

  /* Motion */
  --t-fast: 160ms;
  --t-med: 220ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus */
  --focus-ring: 2px solid var(--teal);
  --focus-offset: 3px;
}

/* ==========================================================================
   Alex Neon — base layer: reset, document defaults, accessibility primitives
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg);
  /* Barely-there depth: one violet wash high right, one teal wash low left. */
  background-image:
    radial-gradient(75rem 50rem at 82% -12rem, var(--tint-violet), transparent 60%),
    radial-gradient(60rem 44rem at -8rem 34%, rgba(46, 230, 214, 0.05), transparent 55%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow-x: hidden;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h3,
h4 {
  font-family: var(--font-text);
  font-weight: 650;
  line-height: 1.35;
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

p {
  overflow-wrap: break-word;
}

ul,
ol {
  padding: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

blockquote {
  padding: 0;
}

::selection {
  background: rgba(46, 230, 214, 0.28);
  color: var(--text);
}

/* Focus: one visible ring, accent colored, everywhere.
   The outline follows each element's own border-radius. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---- System primitives: the shared atoms every component composes --- */

/* Caps label — the one uniform small-caps voice of the system. */
.kicker,
.compare-label,
.cat-label,
.benefit-label,
.xp-label,
.channel-kind,
.channels-title {
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-3);
}

.benefit-label,
.xp-label,
.channel-kind {
  font-size: var(--fs-chip);
}

/* Gradient text — display accents only. */
.brand-mark span,
.compare-b .compare-label,
.card-num,
.error-code {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Neuron dot — the recurring node motif. */
.kicker,
.community-access {
  display: inline-flex;
  /* The dot marks the first line, so a wrapped label keeps it at the top. */
  align-items: baseline;
  gap: 0.625rem;
}

.kicker::before,
.community-access::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--r-pill);
  background: var(--grad);
  box-shadow: 0 0 9px var(--glow-teal);
  flex-shrink: 0;
  /* Nudge off the text baseline back to the optical middle of the cap line. */
  transform: translateY(-0.0625rem);
}

/* Neuron list marker: node with a short ray. */
.n-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--text-2);
  font-weight: 500;
}

.n-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--r-pill);
  background: var(--teal);
  box-shadow: 0 0 8px var(--glow-teal);
}

.n-list li::after {
  content: "";
  position: absolute;
  left: 0.5625rem;
  top: calc(0.55em + 0.125rem);
  width: 0.625rem;
  height: 1px;
  background: linear-gradient(90deg, var(--teal), transparent);
  opacity: 0.7;
}

/* Chip. */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-chip);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.chip-accent {
  border-color: rgba(46, 230, 214, 0.35);
  color: var(--teal);
}

/* Tertiary action: arrow link. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 550;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease);
}

.link-arrow:hover {
  color: var(--teal);
}

/* ---- Utilities ------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Reduced motion: everything is static, revealed, and instant. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Alex Neon — layout layer: page scaffolding, section structure, grids,
   responsive behavior, page-level patterns (reveal, 404).
   Component skins live in components.css.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
  position: relative;
}

/* Shared section header: kicker → display h2 → measured lead. */
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.section-head h2 {
  font-size: var(--fs-h2);
  margin-top: var(--sp-4);
}

.section-lead {
  margin-top: var(--sp-4);
  color: var(--text-2);
  font-size: var(--fs-lead);
  max-width: 42rem;
}

/* ---- Header --------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(5, 6, 10, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--header-h);
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* The last nav item is the header's call to action, as on the source page. */
.nav-cta {
  margin-left: var(--sp-3);
}

.nav-toggle {
  display: none;
}

/* ---- Hero ----------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-8);
  overflow: hidden;
  /* Field composition, inherited by the canvas and read there by neural.js.
     --nr asks for a circle of that fraction of the canvas height; --nx / --ny
     place its centre. neural.js then keeps the circle clear of .hero-copy, so
     the rim never runs into the headline. */
  --nx: 0.72;
  --ny: 0.5;
  --nr: 0.44;
}

/* Soft corona behind the figure: gives the neurons depth without a third hue. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      42rem 42rem at calc(var(--nx) * 100%) calc(var(--ny) * 100%),
      var(--tint-teal),
      transparent 62%
    ),
    radial-gradient(
      34rem 34rem at calc(var(--nx) * 100% + 9rem) calc(var(--ny) * 100% + 6rem),
      var(--tint-violet),
      transparent 60%
    );
  pointer-events: none;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- Process: a quiet field that answers the hovered step ----------- */

.process-shell {
  position: relative;
}

.process-canvas {
  position: absolute;
  inset: -1.5rem -0.5rem;
  width: calc(100% + 1rem);
  height: calc(100% + 3rem);
  pointer-events: none;
  --nx: 0.5;
  --ny: 0.5;
  --nrx: 0.52;
  --nry: 0.55;
}

.hero-grid {
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: min(34rem, 52%);
}

/* ---- Demo card band -------------------------------------------------- */

.demo-section {
  padding-block: 0 var(--section);
}

.demo-inner {
  display: flex;
  justify-content: center;
}

.hero-copy h1 {
  font-size: var(--fs-h1);
  font-weight: 400;
  margin-top: var(--sp-5);
}

.hero-copy h1 span {
  display: block;
}

.hero-lead {
  margin-top: var(--sp-5);
  color: var(--text-2);
  font-size: var(--fs-lead);
  max-width: 34rem;
}

.hero-cta {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.hero-points {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-3) var(--sp-6);
  flex-wrap: wrap;
}

/* ---- Section structure ---------------------------------------------- */

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
}

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.scenario-cat {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.cat-head {
  margin-bottom: var(--sp-5);
  max-width: 46rem;
}

.cat-head h3 {
  font-size: 1.375rem;
  margin-top: var(--sp-2);
}

.finale .n-list {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-6);
}

.cta-bridge {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  display: flex;
  justify-content: flex-start;
}

/* Process: four steps on a gradient rail. */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6) var(--sp-5);
  position: relative;
  z-index: 1;
  counter-reset: step;
}

.process-grid::before {
  content: "";
  position: absolute;
  top: 0.3125rem;
  inset-inline: 0.5rem;
  height: 1px;
  background: var(--grad);
  opacity: 0.3;
}

.process-step {
  position: relative;
  padding-top: var(--sp-5);
  counter-increment: step;
}

/* The source numbers these steps 1–4; keep that ordinal visible. */
.process-step::after {
  content: counter(step);
  position: absolute;
  top: -0.125rem;
  left: 1.375rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-meta);
  line-height: 1;
  color: var(--text-3);
}

.process-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: var(--r-pill);
  background: var(--grad);
  box-shadow: 0 0 10px var(--glow-teal);
}

.process-step p {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-2);
}

/* About: text column + expertise rail. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.about-text > p {
  color: var(--text-2);
  max-width: 40rem;
}

.about-text > p + p {
  margin-top: var(--sp-4);
}

.about-links {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.xp-item {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-4);
}

.xp-item:last-child {
  border-bottom: 1px solid var(--line);
}

/* Community: one framed panel. */
.community-panel {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  background: radial-gradient(50% 90% at 85% 0%, rgba(139, 92, 246, 0.09), transparent),
    var(--surface);
}

.community-panel .section-head {
  margin-bottom: var(--sp-5);
}

/* FAQ and contact structure. */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.contact-points {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

.channels-title {
  display: block;
  margin-bottom: var(--sp-4);
}

.channel-list {
  display: grid;
  gap: var(--sp-3);
}

/* ---- Footer --------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Plain grey text, not the wordmark: the footer only signs the page. */
.footer-copyright {
  color: var(--text-3);
  font-size: var(--fs-small);
}

/* ---- Reveal on scroll (JS present; ≤ 250ms, fade + 10px rise) ------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---- 404 ------------------------------------------------------------ */

.error-page {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
}

.error-code {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4rem, 3rem + 6vw, 7rem);
  line-height: 1;
}

.error-page p {
  color: var(--text-2);
}

.error-page .btn {
  margin-top: var(--sp-4);
}

/* ---- Responsive ----------------------------------------------------- */

@media (max-width: 60em) {
  /* Section rhythm tightens: 8rem of air between blocks reads as generous on
     a desktop page and as dead space on a phone. */
  :root {
    --section: clamp(4rem, 3rem + 4vw, 6rem);
  }

  /* Navigation collapses to an accessible disclosure when JS is present;
     without JS the nav stays a visible wrapping row (page must work). */
  .js .nav-toggle {
    display: inline-flex;
  }

  .js .site-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    margin-left: 0;
    background: rgba(5, 6, 10, 0.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity var(--t-med) var(--ease),
      transform var(--t-med) var(--ease), visibility var(--t-med);
  }

  .js .site-header.nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .js .site-nav ul {
    flex-direction: column;
    gap: var(--sp-1);
  }

  .site-nav ul {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
  }

  /* The crown moves behind the headline; a scrim keeps the copy at AA. */
  .hero {
    align-items: flex-start;
    padding-top: calc(var(--header-h) + var(--sp-5));
    /* One column leaves no room for a circle beside the copy, so the copy owns
       the top of the hero and the figure owns the band under it. The centre
       sits exactly on the bottom edge, so what shows is the top half of the
       sphere — the desktop circle cut across, not a thin arc. neural.js grows
       it into whatever the copy leaves and never lets it touch the text. */
    --nx: 0.5;
    --ny: 1;
    --nr: 0.62;
  }

  /* The three points stand down on a phone so the dome can have the room.
     Everything they say is either in the lead above or on the page below, the
     CTA and the examples link still carry the next step, and desktop keeps
     them. Recorded under «Осознанные отклонения» in ../../CONTENT-AUDIT.md. */
  .hero-points {
    display: none;
  }

  .hero-copy {
    max-width: 34rem;
  }


  /* Scrim covers the copy and then gets out of the way. Below the last line the
     dome is the thing worth looking at, and any veil over it costs exactly the
     brightness the figure is there to show, so it clears to nothing. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(5, 6, 10, 0.2) 0%,
      rgba(5, 6, 10, 0.66) 26%,
      rgba(5, 6, 10, 0.88) 46%,
      rgba(5, 6, 10, 0.44) 64%,
      rgba(5, 6, 10, 0) 80%
    );
    pointer-events: none;
  }

  .compare-grid,
  .cards-3,
  .finale .n-list,
  .about-grid,
  .faq-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .process-grid::before {
    inset-inline: auto;
    left: 0.3125rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    height: auto;
  }

  .process-step {
    padding: 0 0 var(--sp-6) var(--sp-6);
  }

  .process-step:last-child {
    padding-bottom: 0;
  }

  .process-step::before {
    top: 0.375rem;
  }
}

@media (max-width: 60em) {
  /* Safari changes the visible viewport height as its bars collapse. If the
     hero follows that height, the copy-clearance clamp changes the dome's
     radius mid-scroll. Give the stacked composition a content-sized band
     instead: the width fixes the radius, and scrolling can only light it. */
  .hero {
    min-height: 0;
    padding-bottom: calc(var(--sp-5) + 62vw);
  }
}

@media (max-width: 30em) {
  /* Narrow phones: the headline and lead tighten so the primary call to
     action stays above the fold on a 360 × 760 screen. */
  :root {
    --fs-h1: 1.5rem;
    --fs-lead: 1rem;
    --lh-body: 1.55;
  }

  .hero {
    padding-top: calc(var(--header-h) + var(--sp-4));
  }

  .hero-copy h1 {
    margin-top: var(--sp-4);
  }

  .hero-lead,
  .hero-cta {
    margin-top: var(--sp-4);
  }

  .hero-points {
    margin-top: var(--sp-5);
    gap: var(--sp-2) var(--sp-5);
  }

  .hero-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-cta .btn {
    justify-content: center;
  }

  .header-inner {
    gap: var(--sp-3);
  }

  /* The mark-and-name lockup needs every pixel of the panel's inner width on a
     phone, and a 35 px inset buys nothing there. */
  .community-panel {
    padding: var(--sp-5);
  }
}

/* ==========================================================================
   Alex Neon — components layer: shared primitives and their states.
   Inventory: buttons · brand mark · navigation. Per-section blocks live in
   sections.css; system atoms (caps label, gradient text, neuron dot, n-list
   marker, chip, link-arrow) in base.css; structure and grids in layout.css.
   Interactive elements define hover / focus-visible / active (the focus ring
   itself comes from base.css).
   ========================================================================== */

/* ---- Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0.8125rem 1.75rem;
  border-radius: var(--r-pill);
  font-weight: 650;
  font-size: 0.9375rem;
  line-height: 1.2;
  transition: transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}

/* The one primary CTA style on the page. */
.btn-primary {
  background: var(--grad);
  color: #04060c;
  box-shadow: var(--shadow-cta);
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 14px 36px rgba(46, 230, 214, 0.24),
    0 4px 16px rgba(139, 92, 246, 0.26);
}

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(46, 230, 214, 0.45);
  background: rgba(255, 255, 255, 0.03);
}

.btn-primary:active,
.btn-ghost:active {
  transform: translateY(0);
}

.btn-compact {
  padding: 0.6875rem 1.375rem;
  font-size: var(--fs-small);
}

/* ---- Brand: the ALEX OXITOCIN wordmark ------------------------------ */

/* The sprite only carries the <symbol>; it must take no layout space. */
.logo-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.logo {
  /* Aspect ratio comes from the viewBox (1090 × 114), which is 14 units of
     stroke plus padding around a 1062 × 86 drawing — so these heights are not
     the wordmark's height, they are the box's. The caps were flattened from
     100 units to 86, which is why the same heights below now draw a mark a
     tenth wider than before: the box got shorter, so the uniform scale grew.
     Change the caps or the stroke and this has to be re-derived. */
  height: 1.125rem;
  width: auto;
  display: block;
}

.logo-alex {
  stroke: var(--teal);
  filter: drop-shadow(0 0 6px rgba(46, 230, 214, 0.35));
}

.logo-oxitocin {
  stroke: var(--logo-violet);
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.45));
}

.brand:hover .logo-alex,
.brand:hover .logo-oxitocin {
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.55));
}

/* The wordmark is 11.7 : 1 wide, so on narrow screens it has to come down or
   it crowds the menu toggle. These live here, not in layout.css, because this
   layer is concatenated later and would otherwise win. */
@media (max-width: 60em) {
  .logo {
    height: 0.9375rem;
  }
}

@media (max-width: 30em) {
  .logo {
    height: 0.78125rem;
  }
}

/* ---- Monogram (about chip) ------------------------------------------ */

.brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ---- Navigation ----------------------------------------------------- */

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-sm);
  font-weight: 550;
  font-size: 0.9375rem;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.site-nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.nav-toggle {
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.375rem;
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease);
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.nav-toggle .bar {
  width: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background: var(--text);
  transition: transform var(--t-med) var(--ease);
}

.nav-open .nav-toggle .bar:first-child {
  transform: translateY(0.25rem) rotate(45deg);
}

.nav-open .nav-toggle .bar:last-child {
  transform: translateY(-0.25rem) rotate(-45deg);
}

/* ==========================================================================
   Alex Neon — section blocks built from the components layer.
   Inventory: demo card · video placeholder · compare columns · control cards ·
   scenario cards · finale panel · about chip and expertise items · community
   access line · FAQ · contact channels.
   Informational cards deliberately have no hover state; only real controls
   and links react to the pointer.
   ========================================================================== */

/* ---- Demo card («письмо-голосом») ----------------------------------- */

.demo-card {
  width: min(26.5rem, 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%),
    var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1), 0 0 60px rgba(46, 230, 214, 0.05);
}

.demo-tags {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.demo-quote {
  margin-top: var(--sp-4);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
}

.demo-steps {
  margin-top: var(--sp-4);
}

.demo-steps li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  padding-block: 0.625rem;
  border-top: 1px solid var(--line);
}

.demo-status {
  flex-shrink: 0;
  min-width: 3.5rem;
  font-size: var(--fs-chip);
  font-weight: 650;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--teal);
}

.demo-step-title {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
}

.demo-step-detail {
  display: block;
  font-size: var(--fs-meta);
  color: var(--text-3);
}

.demo-steps .is-pending {
  background: var(--tint-violet);
  border-radius: var(--r-sm);
  padding-inline: 0.625rem;
  border-top-color: transparent;
}

.demo-steps .is-pending .demo-status {
  color: var(--violet-text);
}

.demo-domains {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  font-size: var(--fs-chip);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.demo-domains .sep {
  color: var(--teal);
  font-size: 0.5em;
  opacity: 0.75;
}

/* ---- Video placeholder (not interactive: no hover by design) -------- */

.video-shell {
  max-width: 56rem;
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: radial-gradient(60% 80% at 50% 0%, rgba(139, 92, 246, 0.06), transparent),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.play-badge {
  width: 4.25rem;
  height: 4.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-2);
}

.video-title {
  font-weight: 650;
  font-size: var(--fs-h4);
}

.video-sub {
  color: var(--text-3);
  font-size: var(--fs-small);
  max-width: 26rem;
}

/* ---- Compare columns ------------------------------------------------ */

.compare-col {
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.compare-col h3,
.finale h3 {
  margin-top: var(--sp-3);
}

.compare-a {
  border: 1px solid var(--line);
}

.compare-b {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  overflow: hidden;
}

.compare-b::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--grad);
}

.compare-list {
  margin-top: var(--sp-5);
  counter-reset: step;
  display: grid;
  gap: var(--sp-4);
}

.compare-list li {
  counter-increment: step;
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  color: var(--text-2);
}

.compare-list li::before {
  content: counter(step);
  flex-shrink: 0;
  min-width: 1.125rem;
  font-size: var(--fs-meta);
  font-weight: 650;
  color: var(--text-3);
}

.compare-b .compare-list li {
  color: var(--text);
  font-weight: 500;
}

.compare-b .compare-list li::before {
  color: var(--teal);
}

/* ---- Control cards -------------------------------------------------- */

.control-quote {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--text-2);
}

.control-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 2px;
  border-radius: 1px;
  background: var(--grad);
}

.control-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}

.control-card h3 {
  margin-top: var(--sp-4);
}

.control-card h3 + p {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-2);
}

/* Trust gradation across the three cards: teal → violet. */
.control-card:nth-child(2) .chip-state {
  border-color: rgba(139, 92, 246, 0.3);
  color: var(--violet-text);
}

.control-card:nth-child(3) .chip-state {
  border-color: rgba(139, 92, 246, 0.45);
  color: var(--violet-text);
  background: var(--tint-violet);
}

/* ---- Scenario cards ------------------------------------------------- */

.scenario-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

.card-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-num);
  line-height: 1;
  opacity: 0.85;
}

.scenario-card > p {
  font-size: var(--fs-small);
  color: var(--text-2);
  flex-grow: 1;
}

.scenario-card .card-benefit {
  flex-grow: 0;
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  font-weight: 550;
  color: var(--text);
}

.benefit-label {
  display: block;
  margin-bottom: var(--sp-1);
}

/* ---- Finale panel («И это только начало») --------------------------- */

.finale {
  margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  background: linear-gradient(120deg, var(--tint-teal), transparent 45%),
    linear-gradient(300deg, var(--tint-violet), transparent 45%), var(--surface);
}

/* ---- About chip and expertise items --------------------------------- */

.about-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.125rem 0.5rem 0.5rem;
  background: var(--surface);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--sp-5);
}

.about-chip .brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.8125rem;
  border-radius: var(--r-pill);
}

.xp-title {
  display: block;
  margin-top: var(--sp-2);
  font-weight: 650;
  font-size: var(--fs-h4);
}

.xp-desc {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--text-2);
}

/* ---- Community ------------------------------------------------------ */

/* Mark and name lockup: the community's own avatar with its label above its
   title to the right, the way the channel itself introduces itself.
   --community-mark is the square's side; the two lines beside it are sized so
   their ink — cap line of the label, baseline of the title — spans exactly
   that side, which is what makes the row read as aligned. The negative margins
   below take the half-leading out of the way so the line boxes stop hiding the
   ink behind a few pixels of air; they are in em, so they follow the type. */
.community-id {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  /* Derived from --fs-h2, not picked by eye: the column is the label's cap
     line plus its gap plus 0.96 of the title's size, so the square that ends
     flush with both has to follow the title as it scales. */
  --community-mark: clamp(2.875rem, 2.58rem + 1.25vw, 3.4375rem);
}

/* The community's own Telegram mark; see ../../CONTENT-AUDIT.md. */
.community-mark {
  width: var(--community-mark);
  height: var(--community-mark);
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  display: block;
  flex-shrink: 0;
}

/* A column, not a block: .kicker is inline-flex, and inside a block its line
   box would swallow the leading trim below instead of letting the margin move
   the ink. As flex items both lines answer to their own margins. */
.community-id-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.community-id .kicker {
  /* A label, not a paragraph: the body leading only pads the lockup out. */
  line-height: 1.4;
  margin-top: -0.348em;
}

.community-id h2 {
  margin-top: var(--sp-3);
  margin-bottom: -0.218em;
}

.community-id + .section-lead {
  margin-top: var(--sp-5);
}

/* 36em is where the title stops fitting on one line. Below it both the label
   and the title run to two lines, the column grows to about 74 px, and the
   mark grows with it to stay flush top and bottom. The title pays for that in
   size: «Нейросеточная?» is one unbreakable word and at 360 px it is the
   widest thing the column has to carry. The cap holds that wrap steady across
   the whole range instead of letting it snap back to one line near 36em. */
@media (max-width: 36em) {
  .community-id {
    --community-mark: 4.5rem;
    gap: var(--sp-3);
  }

  .community-id-text {
    max-width: 13rem;
  }

  .community-id h2 {
    font-size: 1.0625rem;
    margin-top: var(--sp-2);
  }
}

/* ---- Community access line ------------------------------------------ */

.community-access {
  display: flex;
  margin-block: var(--sp-5);
  font-size: var(--fs-small);
  font-weight: 550;
  color: var(--text-2);
}

.community-access::before {
  background: var(--teal);
}

/* ---- FAQ ------------------------------------------------------------ */

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  font-weight: 600;
  font-size: var(--fs-h4);
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--text-3);
  transition: transform var(--t-med) var(--ease), color var(--t-fast) var(--ease);
}

.faq-list summary:hover::after,
.faq-list details[open] summary::after {
  color: var(--teal);
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list details p {
  padding-bottom: var(--sp-5);
  color: var(--text-2);
  max-width: 42rem;
}

/* ---- Contact channels ----------------------------------------------- */

.channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: transform var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.channel:hover {
  transform: translateY(-2px);
  border-color: rgba(46, 230, 214, 0.4);
  background: var(--surface-2);
}

.channel:active {
  transform: translateY(0);
}

/* The terminal conversion action carries the gradient hairline. */
.channel-primary {
  border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
}

.channel-primary:hover {
  border-color: transparent;
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--grad) border-box;
}

.channel-note {
  display: block;
  margin-top: var(--sp-1);
  font-weight: 600;
}

.channel-arrow {
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.channel:hover .channel-arrow {
  color: var(--teal);
  transform: translate(2px, -2px);
}

.contact-note {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--tint-violet);
  font-size: var(--fs-small);
  color: var(--text-2);
}