/* === только главная iisy.ru — герой, граф, флоу, форма заявки === */
html {
        scroll-behavior: smooth;
      }

body {
        margin: 0;
        min-width: 320px;
      }

.brand {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        font-weight: 760;
        letter-spacing: 0;
      }

.nav {
        display: flex;
        align-items: center;
        color: var(--muted);
        font-size: 14px;
        font-weight: 600;
      }

.nav a {
        padding: 9px 11px;
        transition: color 160ms ease, background 160ms ease;
      }

.nav a:hover {
        color: #bcd3ff;
        background: rgba(255, 255, 255, 0.055);
      }

.nav .login {
        color: #0b0b0b;
        background: #f4f4f4;
      }

.hero {
        display: grid;
        align-items: start;
      }

.hero::after {
        content: none;
        position: absolute;
        top: -118px;
        right: -96px;
        width: min(540px, 52vw);
        aspect-ratio: 1;
        background: url("/logo.png") center / contain no-repeat;
        opacity: 0.08;
        filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.12));
        pointer-events: none;
      }

.hero-inner {
        grid-area: copy;
      }

.eyebrow::before {
        content: "";
        border: 1px solid rgba(108, 154, 232, 0.85);
        border-radius: 999px;
      }

.hero-title-row {
        display: flex;
        align-items: center;
        gap: 14px;
      }

.hero-wordmark {
        max-width: 620px;
        margin: 0;
        font-weight: 760;
        letter-spacing: 0;
        background-size: 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
      }

.hero-telegram {
        position: relative;
        display: inline-grid;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 999px;
        transform: translateY(4px);
        transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
      }

.hero-telegram:hover {
        transform: translateY(1px);
        box-shadow: 0 16px 42px rgba(255, 255, 255, 0.14);
      }

.hero-telegram svg {
        display: block;
        width: 54%;
        height: 54%;
      }

.hero-telegram::after {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 10px);
        z-index: 4;
        padding: 7px 9px;
        color: var(--text);
        border: 1px solid var(--line-soft);
        border-radius: 9px;
        background: rgba(12, 12, 12, 0.94);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
        content: attr(data-tooltip);
        font-size: 12px;
        font-weight: 650;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(4px);
        transition: opacity 140ms ease, transform 140ms ease;
        white-space: nowrap;
      }

.hero-telegram:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

.lead {
        margin: 26px 0 0;
      }

.actions {
        grid-area: actions;
        flex-wrap: nowrap;
      }

.actions .button {
        flex: 0 0 auto;
      }

.hero-channels {
        display: flex;
        grid-area: channels;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
      }



.channel-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border: 1px solid rgba(255, 255, 255, 0.12);
      }

.channel-pill img {
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 4px;
        object-fit: contain;
      }

.button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 18px;
        border: 1px solid var(--line);
        color: var(--text);
        font-size: 14px;
        font-weight: 760;
        cursor: pointer;
        transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
      }

.button:hover {
        transform: translateY(-1px);
        border-color: rgba(255, 255, 255, 0.26);
        background: rgba(255, 255, 255, 0.095);
      }

.button.primary {
        border-color: #f4f4f4;
        background: #f4f4f4;
        color: var(--button-text);
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
      }

.button:disabled {
        cursor: default;
        opacity: 0.62;
        transform: none;
      }

.hero-note {
        grid-area: notes;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

.note strong {
        display: block;
        line-height: 1.25;
      }

.note span {
        display: block;
        color: var(--muted);
      }

.section-head {
        justify-content: space-between;
      }

h2 {
        margin: 0;
      }

.section-head p {
        margin: 0;
        color: var(--muted);
      }

.card {
        position: relative;
        border: 1px solid var(--line-soft);
        transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
      }

.card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(130deg, transparent 30%, rgba(141, 180, 245, 0.9) 50%, transparent 70%);
        background-size: 300% 100%;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 200ms ease;
        pointer-events: none;
      }

.card:hover::before {
        opacity: 1;
        animation: border-flow 2.4s linear infinite;
      }

.card h3 {
        margin: 0;
        line-height: 1.2;
      }

.card p {
        margin: 10px 0 0;
        color: var(--muted);
      }

.index {
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        color: var(--muted);
        font-weight: 760;
      }

@media (max-width: 820px) {
  .shell {
            border: 0;
            border-radius: 0;
            margin: 0;
          }
  .topbar,
          .footer,
          .section {
            padding-inline: 18px;
          }
  .nav {
            width: 100%;
            flex-wrap: wrap;
            overflow: visible;
            padding-bottom: 0;
          }
  .nav a {
            padding: 8px 10px;
          }
  .hero {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-areas:
              "copy"
              "actions"
              "channels"
              "preview"
              "notes";
            min-height: 580px;
            padding: 58px 18px 22px;
          }
  .hero-inner {
            display: block;
          }
  .hero::after {
            top: -72px;
            right: -110px;
            width: 380px;
            opacity: 0.07;
          }
  .hero-title-row {
            gap: 10px;
          }
  .actions {
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-top: 32px;
          }
  .actions .button {
            flex: 0 1 auto;
          }
  .hero-channels {
            justify-content: flex-start;
            margin-top: 0;
          }
  .section-head {
            align-items: start;
            flex-direction: column;
          }
}

.reveal-on .section,
      .reveal-on .hero .hero-note {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
        will-change: opacity, transform;
      }

.reveal-on .section.is-visible,
      .reveal-on .hero .hero-note.is-visible {
        opacity: 1;
        transform: none;
      }

@media (prefers-reduced-motion: reduce) {
  .reveal-on .section,
          .reveal-on .hero .hero-note {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
          }
}

.hero {
        isolation: isolate;
      }

.aurora {
        position: absolute;
        top: -22%;
        left: 50%;
        z-index: 0;
        width: 78vw;
        height: 78vw;
        max-width: 920px;
        max-height: 920px;
        transform: translateX(-50%);
        background: radial-gradient(circle, rgba(108, 154, 232, 0.2) 0%, rgba(108, 154, 232, 0.06) 34%, transparent 64%);
        filter: blur(36px);
        pointer-events: none;
        animation: aurora-drift 16s ease-in-out infinite alternate;
      }

.reveal-on .hero-inner > *,
.reveal-on .hero > .actions,
.reveal-on .hero > .hero-channels,
.reveal-on .hero > .hero-note {
        animation: hero-rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
      }

.reveal-on .hero-inner .eyebrow {
        animation-delay: 0.05s;
      }

.reveal-on .hero-inner .hero-title-row {
        animation-delay: 0.16s;
      }

.reveal-on .hero-inner .lead {
        animation-delay: 0.3s;
      }

.reveal-on .hero > .actions {
        animation-delay: 0.42s;
      }

.reveal-on .hero > .hero-channels {
        animation-delay: 0.52s;
      }

.reveal-on .hero > .hero-note {
        animation-delay: 0.62s;
      }

@media (prefers-reduced-motion: reduce) {
  .aurora {
            animation: none;
          }
  .reveal-on .hero-inner > *,
  .reveal-on .hero > .actions,
  .reveal-on .hero > .hero-channels,
  .reveal-on .hero > .hero-note,
  .hero-wordmark {
            animation: none !important;
          }
}

h2 {
        -webkit-background-clip: text;
        background-clip: text;
      }

.section {
        border-top: 0 !important;
        padding-top: 56px !important;
      }

@keyframes border-flow {
        to {
          background-position: 300% 0;
        }
      }

@keyframes aurora-drift {
        0% {
          transform: translateX(-56%) translateY(0) scale(1);
          opacity: 0.72;
        }
        100% {
          transform: translateX(-44%) translateY(3%) scale(1.09);
          opacity: 1;
        }
      }

@keyframes hero-rise {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

.reveal-on .hero-inner > *,
.reveal-on .hero > .actions,
.reveal-on .hero > .hero-channels {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.hero {
  position: relative;
  grid-template-columns: minmax(340px, 0.72fr) minmax(620px, 1.28fr);
  grid-template-areas:
    "copy preview"
    "actions preview"
    "actions channels";
  min-height: min(690px, calc(100svh - 108px));
  column-gap: 54px;
  row-gap: 20px;
  align-content: center;
  padding: 64px 0 32px;
  overflow: visible;
}

.aurora {
  display: none;
}

.hero-title-row {
  margin-top: 20px;
}

.hero-wordmark {
  font-size: 148px;
  line-height: 0.84;
  color: #f7f7f7;
  background: none;
  filter: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

.hero-telegram {
  width: 42px;
  height: 42px;
  border-color: rgba(255, 255, 255, 0.28);
  background: #e9e9e9;
  box-shadow: none;
}

.hero-channels {
  align-self: start;
  justify-content: flex-start;
  max-width: 500px;
  margin-top: 0;
}



.channel-pill {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.028);
  color: #aeb1b6;
  font-size: 12px;
  box-shadow: none;
}

.channel-pill::before {
  width: 5px;
  height: 5px;
  box-shadow: none;
}

.hero-note {
  width: 100%;
  margin-top: 0;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.note {
  min-height: 132px;
  padding: 26px 30px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
}

.note:first-child {
  padding-left: 0;
}

.note:last-child {
  padding-right: 0;
  border-right: 0;
}

.note strong {
  font-size: 16px;
}

.note span {
  max-width: 330px;
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.5;
}

.section {
  padding: 104px 0 !important;
  border-top: 0 !important;
  position: relative;
}

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 211, 255, 0.2) 50%, transparent);
  pointer-events: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 80px;
  align-items: start;
  margin-bottom: 46px;
}

.section-head p {
  max-width: 520px;
  padding-top: 8px;
  font-size: 17px;
  line-height: 1.58;
}

.card {
  min-height: 250px;
  padding: 28px;
  border-color: rgba(255, 255, 255, 0.105);
  border-radius: 8px;
  background: #0d0e10;
  box-shadow: none;
}

.card::before {
  display: none;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--landing-sky-line);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.26);
}

.card h3 {
  font-size: 22px;
}

.card p {
  max-width: 330px;
  margin-top: 13px;
  font-size: 15px;
  line-height: 1.52;
}

.index {
  width: 30px;
  height: 30px;
  margin-bottom: 42px;
  border-radius: 6px;
  font-size: 11px;
}

.footer-copyright a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.footer-copyright a:hover {
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 760px) {
  .cta-card-section {
      height: auto;
      padding: 0;
    }
  .cta-canvas {
      position: relative;
      width: 100%;
      height: auto;
      margin-left: 0;
      left: auto;
      top: auto;
      padding: 32px 18px;
      border-radius: 0;
      overflow: visible;
    }
  .cta-card {
      position: relative;
      width: 100%;
      max-width: 100%;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      cursor: default;
    }
  .cta-card:active { cursor: default; }
  .cta-card-inner { padding: 36px 24px 28px; }
  .cta-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .blog-carousel {
      grid-template-columns: 1fr;
      padding: 0 18px 40px;
    }
  .blog-carousel-card { padding: 36px 18px; }
  .blog-carousel-card h3 { font-size: 22px; }
  .blog-carousel-head { padding: 48px 18px 0; }
  .blog-carousel-head h2 { font-size: 34px; }
}

@media (max-width: 760px) {
  .section-wave { height: 30px; }
  .section-wave svg { height: 30px; }
}

@media (max-width: 1120px) {
  .hero {
      grid-template-columns: minmax(320px, 0.78fr) minmax(500px, 1.22fr);
      column-gap: 20px;
    }
  .hero-wordmark {
      font-size: 124px;
    }
}

@media (max-width: 900px) {
  .hero {
      grid-template-columns: 1fr;
      grid-template-areas:
        "copy"
        "actions"
        "channels"
        "preview";
      min-height: auto;
      padding-top: 60px;
    }
  .hero-inner {
      max-width: 680px;
    }
  .section-head {
      grid-template-columns: 1fr;
      gap: 24px;
    }
}

@media (max-width: 1180px) {
  .hero-note { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .hero {
      padding-inline: 0;
    }
  .hero-note {
      grid-template-columns: 1fr;
    }
  .note,
  .note:first-child,
  .note:last-child {
      padding: 24px 0;
      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  .note:last-child {
      border-bottom: 0;
    }
  .card {
      min-height: 220px;
    }
  .section {
      padding: 78px 0 !important;
    }
}

@media (max-width: 620px) {
  .hero {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 16px;
      padding-top: 44px;
    }
  .hero > * {
      min-width: 0;
    }
  .hero-wordmark {
      font-size: 88px;
    }
  .hero-channels {
      width: 100%;
      max-width: 100%;
      gap: 6px;
    }
  .channel-pill {
      flex: 0 1 auto;
      min-width: 0;
    }
}

.hero-telegram {
  color: #07131b;
  border-color: rgba(143, 211, 255, 0.74);
  background: var(--landing-sky);
  box-shadow: 0 12px 34px rgba(57, 170, 240, 0.16);
}

.hero-telegram:hover {
  border-color: #c7ebff;
  background: #b6e4ff;
}

.channel-pill {
  border-color: rgba(143, 211, 255, 0.1);
  background: rgba(143, 211, 255, 0.035);
}

.card:hover {
  border-color: var(--landing-sky-line);
}

/* === Graph background breakout === */
/* === CTA card section === */
.section-wave {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  height: 60px;
  line-height: 0;
  background: #e2e8f0;
}

.section-wave svg {
  width: 100%;
  height: 60px;
  display: block;
}

.cta-card-section {
  padding: 0;
  position: relative;
  height: 680px;
  overflow: visible;
}

.cta-canvas {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 680px;
  margin-left: -50vw;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(92,151,255,0.08) 0%, transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(119,119,122,0.55) 0.5px, transparent 0.8px),
    #07080a;
  background-size: auto, 22px 22px, auto;
  background-position: center, center center, center;
  overflow: hidden;
  pointer-events: auto;
}

.cta-card {
  position: absolute;
  width: 720px;
  max-width: calc(100vw - 48px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(18, 20, 24, 0.96);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  backdrop-filter: blur(12px);
}

.cta-card:active {
  cursor: grabbing;
}

.cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: rgba(143, 211, 255, 0.6);
  z-index: 3;
}

.cta-card-grab {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: rgba(143, 211, 255, 0.05);
  border-bottom: 1px solid rgba(143, 211, 255, 0.1);
  cursor: grab;
  z-index: 2;
}

.cta-card-grab::before {
  display: none;
}

.cta-card-grab::after {
  content: "#1";
  position: absolute;
  top: 9px;
  right: 14px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  line-height: 1;
}

.cta-card-inner {
  padding: 48px 40px 36px;
  position: relative;
}

.cta-card h2 {
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--text);
}

.cta-subtitle {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  max-width: 520px;
}

.cta-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cta-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cta-field span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cta-field input,
.cta-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  resize: vertical;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.cta-field input:focus,
.cta-field textarea:focus {
  outline: none;
  border-color: rgba(143, 211, 255, 0.4);
  background: rgba(143, 211, 255, 0.04);
  box-shadow: 0 0 0 3px rgba(143, 211, 255, 0.1);
}

.cta-field.invalid input,
.cta-field.invalid textarea {
  border-color: #e85a5a;
}

.cta-hidden {
  display: none;
}

.cta-form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cta-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.4;
  cursor: pointer;
  flex: 1;
  min-width: 200px;
}

.cta-consent input {
  margin-top: 2px;
  cursor: pointer;
}

.cta-consent a {
  color: var(--accent);
  text-decoration: none;
}

.cta-consent.invalid {
  color: #e85a5a;
}

.cta-submit {
  padding: 13px 28px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #6c9ae8, #8db4f5);
  color: #060818;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 200ms ease;
  box-shadow: 0 6px 20px rgba(108, 154, 232, 0.3);
}

.cta-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(108, 154, 232, 0.45);
}

.cta-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.cta-status {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}

.cta-status.success { color: #6cda8e; }

.cta-status.error { color: #e85a5a; }

@media (max-width: 620px) {
  .cta-card-inner { padding: 24px 20px; }
  .cta-form-row { grid-template-columns: 1fr; }
  .cta-form-actions { flex-direction: column; align-items: stretch; }
  .cta-submit { width: 100%; }
}

/* === Flow section (React Flow style) === */
.flow-section {
  padding-top: 56px;
  position: relative;
}

.flow-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 20, 0.5);
  z-index: -1;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  pointer-events: none;
}

.flow-blocks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 88px;
  isolation: isolate;
}

.flow-block {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.flow-connectors {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.flow-connectors.is-ready {
  opacity: 1;
}

.flow-connector-glow,
.flow-connector-line {
  fill: none;
  stroke-linecap: round;
}

.flow-connector-glow {
  stroke: rgba(97, 194, 255, 0.16);
  stroke-width: 11;
}

.flow-connector-line {
  stroke: var(--landing-sky-line);
  stroke-width: 1.9;
  stroke-dasharray: 5 7;
  animation: flow-connector-route 18s linear infinite;
}

/* По связям идёт импульс — тот же приём, что в схеме на первом экране:
   видно, что это поток, а не декоративная змейка. */
.flow-connector-impuls {
  fill: none;
  stroke: rgba(143, 211, 255, 0.95);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 22 460;
  animation: flow-impuls 4.2s linear infinite;
  pointer-events: none;
}

.flow-connector-impuls[data-flow-edge="1"] { animation-delay: 1.1s; }

@keyframes flow-impuls {
  from { stroke-dashoffset: 482; }
  to { stroke-dashoffset: 0; }
}

.flow-connector-halo {
  fill: #070809;
  stroke: rgba(143, 211, 255, 0.14);
  stroke-width: 1;
}

.flow-connector-port {
  fill: #0d1115;
  stroke: var(--landing-sky);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 10px rgba(97, 194, 255, 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .flow-connector-impuls {
      animation: none;
      opacity: 0;
    }
  .flow-connector-line {
      animation: none;
    }
}

.flow-block-reverse {
  grid-template-columns: 1fr 1fr;
}

.flow-block-reverse .flow-block-text {
  order: 2;
}

.flow-block-reverse .flow-block-visual {
  order: 1;
}

.flow-block-text h3 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.flow-block-text p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
  max-width: 420px;
}

.flow-block-visual {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(11, 11, 11, 0.5);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.flow-block-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* === Resources panel === */
.flow-block-resources {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(11, 11, 11, 0.5);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.resources-panel {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resources-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  margin-bottom: 4px;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(21, 23, 26, 0.6);
  transition: border-color 160ms ease;
}

.resource-item:hover {
  border-color: rgba(143, 211, 255, 0.2);
}

.resource-accent {
  width: 3px;
  height: 32px;
  border-radius: 0 2px 2px 0;
  background: rgb(var(--rgb) / 0.68);
  flex-shrink: 0;
}

.resource-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.resource-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}

.resource-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

/* === Channels grid === */
.flow-block-channels {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(11, 11, 11, 0.5);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  padding: 24px 20px;
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.channel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(21, 23, 26, 0.6);
  transition: border-color 160ms ease;
}

.channel-card:hover {
  border-color: rgba(143, 211, 255, 0.2);
}

.channel-card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.channel-card span {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}

@media (max-width: 820px) {
  .channels-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

/* === Blog carousel === */
.examples-preview-section {
  padding: 64px 0 48px;
}

.examples-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}

.examples-preview-head h2 {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.examples-preview-all {
  font-size: 15px;
  font-weight: 700;
  color: #60a5fa;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.examples-preview-all:hover { opacity: 0.7; }

.examples-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.examples-preview-item {
  display: block;
  padding: 36px 28px;
  text-decoration: none;
  transition: background 160ms ease;
}

.examples-preview-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.examples-preview-item h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.15;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(96, 165, 250, 0.25);
  transition: text-decoration-color 160ms ease;
}

.examples-preview-item:hover h3 {
  text-decoration-color: rgba(96, 165, 250, 0.6);
}

.examples-preview-item p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-2);
  margin: 0 0 12px;
}

@media (max-width: 620px) {
  .examples-preview-grid { grid-template-columns: 1fr; }
  .examples-preview-item { padding: 28px 20px; }
  .examples-preview-item h3 { font-size: 20px; }
  .examples-preview-head h2 { font-size: 34px; }
}

.blog-carousel-section {
  padding: 0;
  position: relative;
  background: #e2e8f0;
  color: #0f172a;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.blog-carousel-section::after {
  display: none;
}

.blog-carousel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 0 30px;
  width: min(1560px, calc(100% - 96px));
  margin-inline: auto;
}

.blog-carousel-head h2 {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0;
}

.blog-carousel-all {
  font-size: 15px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.blog-carousel-all:hover {
  opacity: 0.7;
}

.blog-carousel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(1560px, calc(100% - 96px));
  margin-inline: auto;
  padding: 0 30px 56px;
}

.blog-carousel-card {
  display: block;
  padding: 56px 40px;
  text-decoration: none;
  transition: background 160ms ease;
}

.blog-carousel-card:hover {
  background: rgba(15, 23, 42, 0.04);
}

.blog-carousel-date {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  display: block;
  margin-bottom: 8px;
}

.blog-carousel-card h3 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 16px;
  line-height: 1.1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(37, 99, 235, 0.25);
  transition: text-decoration-color 160ms ease;
}

.blog-carousel-card:hover h3 {
  text-decoration-color: rgba(37, 99, 235, 0.6);
}

.blog-carousel-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

.blog-carousel-head {
  padding-top: 64px;
}

@media (max-width: 620px) {
  .blog-carousel {
      grid-template-columns: 1fr;
      padding: 0 20px 40px;
    }
  .blog-carousel-card { padding: 40px 24px; }
  .blog-carousel-card h3 { font-size: 24px; }
  .blog-carousel-head { padding: 48px 20px 0; }
  .blog-carousel-head h2 { font-size: 34px; }
}

.flow-block-graph {
  position: relative;
  width: 100%;
  height: 200px;
  background: #07080a;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.flow-block-graph::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(143,211,255,0.12) 1px, transparent 1.2px);
  background-size: 22px 22px;
  pointer-events: none;
}

.flow-mini-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.flow-mini-edges path {
  stroke: rgba(119, 177, 219, 0.28);
  stroke-width: 1.5;
  fill: none;
}

.flow-mini-nodes {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  z-index: 2;
}

.flow-mini-node {
  position: relative;
  width: 160px;
  height: 78px;
  border-radius: 10px;
  background: rgba(21, 23, 26, 0.94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  overflow: hidden;
}

.flow-mini-node .node-mini-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: rgb(var(--slot-rgb) / 0.06);
  border-bottom: 1px solid rgb(var(--slot-rgb) / 0.12);
}

.flow-mini-node .node-accent {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: rgb(var(--slot-rgb) / 0.7);
}

.flow-mini-node .node-dot {
  position: absolute;
  top: 11px;
  left: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--slot-rgb) / 0.9);
  box-shadow: 0 0 6px rgb(var(--slot-rgb) / 0.3);
}

.flow-mini-node .node-id {
  position: absolute;
  bottom: 8px;
  left: 12px;
  color: rgba(255, 255, 255, 0.22);
  font-size: 8px;
  font-weight: 700;
}

.flow-mini-node .node-title {
  position: absolute;
  top: 7px;
  left: 30px;
  right: 10px;
  color: #f6f6f7;
  font-weight: 750;
  font-size: 13px;
  line-height: 1.1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.flow-mini-node .node-type-label {
  position: absolute;
  top: 34px;
  left: 30px;
  right: 10px;
  font-size: 9px;
  font-weight: 600;
  color: rgb(var(--slot-rgb) / 0.65);
  line-height: 1;
}

@media (max-width: 820px) {
  .flow-blocks {
      gap: 56px;
    }
  .flow-connectors {
      display: none;
    }
  .flow-block {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  .flow-block-reverse .flow-block-text {
      order: 1;
    }
  .flow-block-reverse .flow-block-visual {
      order: 2;
    }
}

.hero-inner {
  position: relative;
  z-index: 10;
  align-self: end;
  max-width: 490px;
  padding: 0 0 4px;
}

.hero-channels {
  position: relative;
  z-index: 10;
}

.hero-graph-breakout {
  --graph-origin-x: 73%;
  --graph-pan-x: 0px;
  --graph-pan-y: 0px;
  --graph-grid-major: 88px;
  --graph-grid-minor: 22px;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  overflow: hidden;
  z-index: 1;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  background:
    radial-gradient(ellipse 40% 50% at var(--graph-origin-x) 48%, rgba(92,151,255,0.12) 0%, rgba(92,151,255,0.06) 40%, transparent 70%),
    #07080a;
}

.hero-graph-breakout.is-dragging {
  cursor: grabbing;
}

.hero-graph-breakout::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(119,119,122,0.55) 0.5px, transparent 0.8px);
  background-position:
    calc(var(--graph-origin-x) + var(--graph-pan-x)) calc(50% + var(--graph-pan-y));
  background-size:
    var(--graph-grid-minor) var(--graph-grid-minor);
  pointer-events: none;
  z-index: 0;
}

.hero-graph-breakout::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 82% at var(--graph-origin-x) 46%, transparent 0%, rgba(7,8,10,0.08) 72%, rgba(5,5,7,0.24) 100%);
  pointer-events: none;
  z-index: 3;
}

.graph-canvas-wrap {
  position: absolute;
  top: 50%;
  left: 73%;
  width: 1300px;
  height: 600px;
  margin-left: -650px;
  margin-top: -300px;
  z-index: 1;
  will-change: transform;
}

@media (max-width: 900px) {
  .hero-inner {
      max-width: min(620px, 78%);
    }
  .hero-graph-breakout {
      --graph-origin-x: 82%;
    }
  .graph-canvas-wrap {
      left: 82%;
      opacity: 0.52;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.2) 38%, #000 66%);
      mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.2) 38%, #000 66%);
    }
}

@media (max-width: 620px) {
  .hero-inner {
      max-width: 100%;
    }
  .hero-graph-breakout {
      --graph-origin-x: 50%;
      /* из фоновой подложки становится обычным блоком под текстом:
         схема — главное объяснение продукта, прятать её незачем */
      position: relative;
      left: auto;
      margin-left: 0;
      width: 100%;
      height: 300px;
      margin-top: 28px;
      overflow: hidden;
    }
  .hero-graph-breakout::before {
      opacity: 0.72;
    }
  .graph-canvas-wrap {
      top: 0;
      left: 0;
      margin: 0;
      opacity: 1;
      /* масштаб ставит скрипт: он считает его от ширины окна */
      transform-origin: 0 0;
      -webkit-mask-image: none;
      mask-image: none;
    }
}

@media (max-width: 520px) { .hero-graph-breakout { height: 250px; } }
@media (max-width: 420px) { .hero-graph-breakout { height: 214px; } }

.graph-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
}

.graph-edges path {
  stroke: rgba(119,177,219,0.55);
  stroke-width: 1.8;
  fill: none;
}

.graph-edges .graph-edge-pulse {
  stroke: rgba(143,211,255,0.94);
  stroke-width: 2.4;
  stroke-dasharray: 26 210;
  animation: edge-flow 3.6s linear infinite;
}

.graph-node {
  position: absolute;
  width: 228px;
  height: 98px;
  padding: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgb(var(--slot-rgb) / 0.05), transparent 42%),
    rgba(20, 22, 26, 0.95);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgb(var(--slot-rgb) / 0.12);
  overflow: hidden;
  cursor: inherit;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, background 220ms ease;
}

.graph-node:hover {
  border-color: rgb(var(--slot-rgb) / 0.55);
  background:
    linear-gradient(180deg, rgb(var(--slot-rgb) / 0.12), transparent 46%),
    rgba(24, 27, 32, 0.97);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgb(var(--slot-rgb) / 0.18),
    0 0 28px rgb(var(--slot-rgb) / 0.22),
    inset 0 1px 0 rgb(var(--slot-rgb) / 0.3);
  transform: translateY(-3px);
}

/* точка узла пульсирует, пока по схеме идёт поток */
.graph-node:hover .node-dot {
  box-shadow: 0 0 0 4px rgb(var(--slot-rgb) / 0.16), 0 0 14px rgb(var(--slot-rgb) / 0.6);
}

.graph-node .node-dot { transition: box-shadow 220ms ease; }

/* акцентная полоса разгорается вместе с узлом */
.graph-node .node-accent-bar { transition: box-shadow 220ms ease, background 220ms ease; }
.graph-node:hover .node-accent-bar {
  background: rgb(var(--slot-rgb) / 0.95);
  box-shadow: 0 0 12px rgb(var(--slot-rgb) / 0.5);
}

.graph-node .node-header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: rgb(var(--slot-rgb) / 0.06);
  border-bottom: 1px solid rgb(var(--slot-rgb) / 0.12);
  pointer-events: none;
}

.graph-node .node-accent-bar {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: rgb(var(--slot-rgb) / 0.7);
}

.graph-node .node-dot {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--slot-rgb) / 0.9);
  box-shadow: 0 0 8px rgb(var(--slot-rgb) / 0.3);
}

.graph-node .node-body {
  position: absolute;
  top: 10px;
  left: 38px;
  right: 16px;
}

.graph-node .node-id {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1;
}

.graph-node .node-title {
  color: #f4f4f5;
  font-weight: 750;
  font-size: 16px;
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.graph-node .node-type {
  position: absolute;
  top: 39px;
  left: 38px;
  right: 16px;
  font-size: 11px;
  font-weight: 600;
  color: rgb(var(--slot-rgb) / 0.7);
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.graph-node-tool {
  width: 168px;
  height: 72px;
}

.graph-node-tool .node-title {
  font-size: 13px;
}

.graph-node-tool .node-header-bg {
  height: 26px;
}

.graph-node-tool .node-dot {
  top: 11px;
  left: 12px;
  width: 8px;
  height: 8px;
}

.graph-node-tool .node-body {
  top: 7px;
  left: 30px;
  right: 12px;
}

.graph-node-tool .node-type {
  top: 30px;
  left: 30px;
  right: 12px;
  font-size: 9px;
}

.graph-node-tool .node-id {
  bottom: 8px;
  left: 12px;
  font-size: 8px;
}

.graph-node-tool .node-accent-bar {
  top: 6px;
  bottom: 6px;
}

@keyframes flow-connector-route {
  to { stroke-dashoffset: -120; }
}

@keyframes edge-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -258; }
}

/* Разворот-высказывание. Страница шла ровным перечислением карточек, и
   перепада ритма в ней не было ни одного. Мысль взята из своей же статьи
   в блоге, ссылка ведёт туда же. */
.mysl {
  position: relative;
  margin: clamp(80px, 12vw, 180px) 0;
  padding: clamp(64px, 9vw, 140px) var(--pole, 24px);
  background: #eef2f7;
  color: #0b0d11;
  overflow: hidden;
}

.mysl::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(11,13,17,0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}

.mysl-text {
  position: relative;
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(34px, 6.4vw, 92px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.mysl-text em {
  font-style: normal;
  color: #2f6fd0;
}

.mysl-ssylka {
  position: relative;
  display: inline-block;
  margin: clamp(26px, 3vw, 44px) auto 0;
  color: #2f6fd0;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(47,111,208,0.35);
  padding-bottom: 2px;
}

.mysl-ssylka:hover { border-bottom-color: #2f6fd0; }

@media (min-width: 900px) {
  .mysl { padding-inline: clamp(48px, 8vw, 160px); }
  .mysl-text { margin: 0; }
  .mysl-ssylka { margin-left: 0; }
}

/* пульт схемы */
.graph-pult {
  position: absolute;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 4;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(12, 14, 18, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.graph-knopka {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #e7e9ee;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
}

.graph-knopka:hover:not(:disabled) { background: rgba(143, 211, 255, 0.18); color: #8fd3ff; }
.graph-knopka:disabled { opacity: 0.32; cursor: default; }

.graph-knopka-sbros {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.graph-podskazka {
  position: absolute;
  right: clamp(14px, 2vw, 28px);
  bottom: calc(clamp(14px, 2vw, 26px) + 46px);
  z-index: 4;
  font-size: 12px;
  color: rgba(231, 233, 238, 0.62);
  background: rgba(12, 14, 18, 0.7);
  padding: 5px 10px;
  border-radius: 8px;
  transition: opacity 420ms ease, transform 420ms ease;
}

.graph-podskazka.ushla {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

@media (max-width: 620px) {
  .graph-pult { right: 10px; bottom: 10px; }
  .graph-podskazka { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .graph-podskazka { transition: none; }
}

/* ── Схема собирается на глазах ───────────────────────────────────────
   Граф появлялся целиком и сразу — статичной картинкой. Теперь узлы
   встают по очереди, а связи прочерчиваются между ними: это и есть
   показ того, что продукт делает. */
.reveal-on .graph-node {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  animation: graf-uzel 620ms cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
}

.reveal-on .graph-node:nth-of-type(1) { animation-delay: 260ms; }
.reveal-on .graph-node:nth-of-type(2) { animation-delay: 420ms; }
.reveal-on .graph-node:nth-of-type(3) { animation-delay: 580ms; }
.reveal-on .graph-node:nth-of-type(4) { animation-delay: 900ms; }
.reveal-on .graph-node:nth-of-type(5) { animation-delay: 740ms; }
.reveal-on .graph-node:nth-of-type(6) { animation-delay: 820ms; }

@keyframes graf-uzel {
  to { opacity: 1; transform: none; }
}

/* связи прочерчиваются вслед за узлами */
.reveal-on .graph-edges > path:not(.graph-edge-pulse) {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: graf-svyaz 700ms ease forwards;
}

.reveal-on .graph-edges > path:not(.graph-edge-pulse):nth-of-type(1) { animation-delay: 380ms; }
.reveal-on .graph-edges > path:not(.graph-edge-pulse):nth-of-type(2) { animation-delay: 520ms; }
.reveal-on .graph-edges > path:not(.graph-edge-pulse):nth-of-type(3) { animation-delay: 820ms; }
.reveal-on .graph-edges > path:not(.graph-edge-pulse):nth-of-type(4) { animation-delay: 660ms; }
.reveal-on .graph-edges > path:not(.graph-edge-pulse):nth-of-type(5) { animation-delay: 740ms; }

@keyframes graf-svyaz {
  to { stroke-dashoffset: 0; }
}

/* импульсы включаются, только когда схема уже собрана */
.reveal-on .graph-edges > .graph-edge-pulse {
  opacity: 0;
  animation: edge-flow 3.6s linear infinite, graf-impuls-vklyuchit 400ms ease 1.3s forwards;
}

@keyframes graf-impuls-vklyuchit {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on .graph-node,
  .reveal-on .graph-edges > path,
  .reveal-on .graph-edges > .graph-edge-pulse {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}

/* ── Карточки въезжают по очереди ─────────────────────────────────────
   Секция появлялась целиком: все карточки разом, одним движением.
   Ступенька даёт направление чтения — слева направо, сверху вниз. */
.reveal-on .section .note,
.reveal-on .channels-grid > *,
.reveal-on .blog-carousel-card,
.reveal-on .examples-preview-grid > * {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 620ms cubic-bezier(0.22, 0.7, 0.25, 1),
              translate 620ms cubic-bezier(0.22, 0.7, 0.25, 1);
}

.reveal-on .section.is-visible .note,
.reveal-on .section.is-visible .channels-grid > *,
.reveal-on .blog-carousel-section.is-visible .blog-carousel-card,
.reveal-on .section.is-visible .examples-preview-grid > *,
.reveal-on .hero-note.is-visible .note {
  opacity: 1;
  translate: none;
}

.reveal-on .note:nth-child(1),
.reveal-on .channels-grid > *:nth-child(1),
.reveal-on .blog-carousel-card:nth-child(1),
.reveal-on .examples-preview-grid > *:nth-child(1) {
  transition: opacity 620ms cubic-bezier(0.22, 0.7, 0.25, 1) 40ms,
              translate 620ms cubic-bezier(0.22, 0.7, 0.25, 1) 40ms,
              background 320ms ease,
              transform 380ms cubic-bezier(0.22, 0.7, 0.25, 1);
}

.reveal-on .note:nth-child(2),
.reveal-on .channels-grid > *:nth-child(2),
.reveal-on .blog-carousel-card:nth-child(2),
.reveal-on .examples-preview-grid > *:nth-child(2) {
  transition: opacity 620ms cubic-bezier(0.22, 0.7, 0.25, 1) 130ms,
              translate 620ms cubic-bezier(0.22, 0.7, 0.25, 1) 130ms,
              background 320ms ease,
              transform 380ms cubic-bezier(0.22, 0.7, 0.25, 1);
}

.reveal-on .note:nth-child(3),
.reveal-on .channels-grid > *:nth-child(3),
.reveal-on .examples-preview-grid > *:nth-child(3) {
  transition: opacity 620ms cubic-bezier(0.22, 0.7, 0.25, 1) 220ms,
              translate 620ms cubic-bezier(0.22, 0.7, 0.25, 1) 220ms,
              background 320ms ease,
              transform 380ms cubic-bezier(0.22, 0.7, 0.25, 1);
}

.reveal-on .note:nth-child(4),
.reveal-on .channels-grid > *:nth-child(4),
.reveal-on .examples-preview-grid > *:nth-child(4) {
  transition: opacity 620ms cubic-bezier(0.22, 0.7, 0.25, 1) 310ms,
              translate 620ms cubic-bezier(0.22, 0.7, 0.25, 1) 310ms,
              background 320ms ease,
              transform 380ms cubic-bezier(0.22, 0.7, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on .section .note,
  .reveal-on .channels-grid > *,
  .reveal-on .blog-carousel-card,
  .reveal-on .examples-preview-grid > * {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ── Свой указатель ───────────────────────────────────────────────────
   Одна точка: идёт за мышью и разрастается над тем, что можно нажать. */
.kursor { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }

.kursor-tochka {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #8fd3ff;
  box-shadow: 0 0 14px rgba(143, 211, 255, 0.6);
  will-change: transform;
  transition: width 240ms cubic-bezier(0.22, 0.7, 0.25, 1),
              height 240ms cubic-bezier(0.22, 0.7, 0.25, 1),
              margin 240ms cubic-bezier(0.22, 0.7, 0.25, 1),
              background 240ms ease,
              opacity 200ms ease;
}

.kursor.nad-celyu .kursor-tochka {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background: #8fd3ff;
  box-shadow: 0 0 20px rgba(143, 211, 255, 0.55);
}

/* На светлых секциях голубая точка терялась — там она тёмная. */
.kursor.na-svetlom .kursor-tochka {
  background: #14161b;
  box-shadow: 0 0 12px rgba(20, 22, 27, 0.35);
}

.kursor.na-svetlom.nad-celyu .kursor-tochka {
  background: #14161b;
  box-shadow: 0 0 16px rgba(20, 22, 27, 0.3);
}

.kursor.nazhat .kursor-tochka {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
}

.kursor.ushyol .kursor-tochka { opacity: 0; }

/* системный указатель прячем только когда свой уже показался — иначе
   на тач-экранах и до первого движения мыши остались бы без указателя */
.svoy-kursor,
.svoy-kursor a,
.svoy-kursor button,
.svoy-kursor summary,
.svoy-kursor .hero-graph-breakout,
.svoy-kursor .graph-node { cursor: none; }

.svoy-kursor input,
.svoy-kursor textarea { cursor: text; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .kursor { display: none; }
  .svoy-kursor,
  .svoy-kursor a,
  .svoy-kursor button { cursor: auto; }
}

/* ── Отклик на наведение ──────────────────────────────────────────────
   Реакции были — смена фона на три процента, её никто не замечал.
   Приём тот же, что на arksite: строка сдвигается вправо и подсвечивается,
   стрелка уезжает следом. */
.note {
  padding-left: 22px;
  padding-right: 22px;
  border-radius: 10px;
  transition: background 320ms ease, transform 380ms cubic-bezier(0.22, 0.7, 0.25, 1);
}

.note:hover {
  background: rgba(143, 211, 255, 0.05);
  transform: translateY(-3px);
}

.note strong { transition: color 220ms ease; }
.note:hover strong { color: #8fd3ff; }

.channel-card {
  transition: border-color 240ms ease, background 240ms ease,
              transform 320ms cubic-bezier(0.22, 0.7, 0.25, 1),
              box-shadow 300ms ease;
}

.channel-card:hover {
  border-color: rgba(143, 211, 255, 0.42);
  background: rgba(143, 211, 255, 0.05);
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), 0 0 24px rgba(143, 211, 255, 0.12);
}

.channel-card img { transition: transform 320ms cubic-bezier(0.22, 0.7, 0.25, 1); }
.channel-card:hover img { transform: scale(1.1); }

.examples-preview-item {
  transition: background 240ms ease, transform 380ms cubic-bezier(0.22, 0.7, 0.25, 1);
}

.examples-preview-item:hover {
  background: rgba(143, 211, 255, 0.05);
  transform: translateX(10px);
}

.examples-preview-item h3 { transition: color 220ms ease; }
.examples-preview-item:hover h3 { color: #8fd3ff; }

.blog-carousel-card {
  transition: background 240ms ease, transform 380ms cubic-bezier(0.22, 0.7, 0.25, 1),
              box-shadow 300ms ease;
}

.blog-carousel-card:hover {
  background: rgba(47, 111, 208, 0.06);
  transform: translateX(10px);
  box-shadow: -3px 0 0 0 #2f6fd0;
}

/* стрелка в ссылках уезжает вперёд */
.examples-preview-all,
.blog-carousel-all,
.mysl-ssylka {
  display: inline-block;
  transition: color 220ms ease, transform 320ms cubic-bezier(0.22, 0.7, 0.25, 1);
}

.examples-preview-all:hover,
.blog-carousel-all:hover,
.mysl-ssylka:hover { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .note, .channel-card, .examples-preview-item, .blog-carousel-card,
  .examples-preview-all, .blog-carousel-all, .mysl-ssylka { transition: none; }
}

@media (min-width: 901px) {
  /* каналы прижаты к правому краю — под схемой, а не под кнопками */
  .hero-channels {
    justify-content: flex-end;
    align-self: start;
    margin-top: 6px;
  }
}