<!-- Neuro Pattern & Co · UI KIT + дизайн-система · версия 2026-10-02 · 2
     Тильда → Настройки сайта → Ещё → «HTML-код для вставки внутрь head». Заменить старый код целиком на этот.
     Часть 1: твой UI kit без изменений. Часть 2: новое из дизайн-системы. -->


/* =========================================
   NEURO PATTERN & CO — UI KIT
========================================= */

:root {
  --np-font: "Montserrat", Arial, sans-serif;

  --np-bg: #ffffff;
  --np-text: #000000;
  --np-border: rgba(0, 0, 0, 0.18);

  --np-radius-card: 34px;
  --np-radius-pill: 999px;

  --np-space-8: 8px;
  --np-space-12: 12px;
  --np-space-14: 14px;
  --np-space-16: 16px;
  --np-space-18: 18px;
  --np-space-24: 24px;
  --np-space-30: 30px;
  --np-space-34: 34px;
  --np-space-40: 40px;
  --np-space-48: 48px;
}


/* =========================================
   GLOBAL
========================================= */

html {
  scroll-behavior: smooth;
}

body,
.t-body,
#allrecords {
  margin: 0;
  background: var(--np-bg) !important;
  color: var(--np-text);
  font-family: var(--np-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select,
a {
  font-family: var(--np-font);
}


/* =========================================
   TYPOGRAPHY
========================================= */

/* Надзаголовок */

.np-eyebrow {
  margin: 0 0 14px;
  font-family: var(--np-font);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-text);
}


/* Основной заголовок */

.np-title {
  margin: 0;
  font-family: var(--np-font);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--np-text);
}


/* Основной текст */

.np-text {
  max-width: 420px;
  margin: 0 auto;
  font-family: var(--np-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
  color: var(--np-text);
}


/* Служебная подпись */

.np-caption {
  font-family: var(--np-font);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-text);
}

@media (min-width: 480px) {
  .np-eyebrow {
    font-size: 26px;
  }

  .np-title {
    font-size: 26px;
  }
}


/* =========================================
   FAQ
========================================= */

.np-faq-clean {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 34px 18px 28px;
  box-sizing: border-box;
  font-family: var(--np-font);
}

.np-faq-clean-title {
  margin: 0 0 34px;
  font-family: var(--np-font);
  font-size: 26px !important;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  text-align: center;
  color: var(--np-text) !important;
}

.np-faq-card {
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--np-bg);
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius-card);
}

.np-faq-head {
  width: 100%;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--np-font);
}

.np-faq-head span {
  display: block;
}

.np-faq-head b {
  display: block;
  margin-bottom: 10px;
  font-family: var(--np-font);
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: var(--np-text) !important;
}

.np-faq-head small {
  display: block;
  font-family: var(--np-font);
  font-size: 12px !important;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--np-text) !important;
}

.np-faq-head em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 26px;
  line-height: 1;
  color: var(--np-text);
  transition: transform 0.25s ease;
}

.np-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.np-faq-body p {
  margin: 0 24px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--np-border);
  font-family: var(--np-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--np-text);
}

.np-faq-card.active .np-faq-body {
  max-height: 420px;
}

.np-faq-card.active .np-faq-head em {
  transform: rotate(180deg);
}

@media (max-width: 480px) {
  .np-faq-clean {
    padding: 30px 18px 24px;
  }

  .np-faq-clean-title {
    margin-bottom: 30px;
  }

  .np-faq-card {
    margin-bottom: 16px;
    border-radius: 32px;
  }

  .np-faq-head {
    padding: 22px 24px;
  }

  .np-faq-body p {
    margin: 0 24px 24px;
  }
}


/* =========================================
   SYMPTOMS / MARQUEE
========================================= */

.np-symptoms {
  width: 100%;
  padding: 40px 0 16px;
  overflow: hidden;
  background: var(--np-bg);
  font-family: var(--np-font);
  text-align: center;
  color: var(--np-text);
}

.np-symptoms-head {
  padding: 0 24px;
  margin-bottom: 40px;
}

.np-symptoms-label {
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--np-text);
}

.np-symptoms h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-text);
}

.np-marquee-row {
  width: 100%;
  margin: 20px 0;
  overflow: hidden;
  white-space: nowrap;
}

.np-marquee-track {
  width: max-content;
  display: inline-flex;
  gap: 18px;
}

.np-marquee-track span {
  min-width: max-content;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--np-bg);
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: var(--np-radius-pill);

  font-family: var(--np-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--np-text);
}

.row-left .np-marquee-track {
  animation: npMoveLeft 26s linear infinite;
}

.row-right .np-marquee-track {
  animation: npMoveRight 28s linear infinite;
}

@keyframes npMoveLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes npMoveRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .np-symptoms {
    padding: 48px 0 38px;
  }

  .np-symptoms-head {
    margin-bottom: 30px;
  }

  .np-symptoms h2 {
    font-size: 26px;
  }

  .np-marquee-row {
    margin: 14px 0;
  }

  .np-marquee-track span {
    padding: 13px 24px;
    font-size: 14px;
  }
}

:root {

  --np-font: "Montserrat", sans-serif;

  --np-bg: #FFFFFF;
  --np-black: #000000;
  --np-white: #FFFFFF;

  /* Градиенты */

  --np-gradient-pause: linear-gradient(
    135deg,
    #D5E06E 0%,
    #BDC766 50%,
    #A5AF5D 100%
  );

  --np-gradient-summer: linear-gradient(
    135deg,
    #43C7E7 0%,
    #5ABAEF 33%,
    #70A3F3 66%,
    #8188F0 100%
  );

  --np-gradient-basic: linear-gradient(
    135deg,
    #F4C9DD 0%,
    #F08BC8 45%,
    #E85BB8 100%
  );

  --np-gradient-orange: linear-gradient(
    135deg,
    #FFDC59 0%,
    #FEAE29 50%,
    #FC8901 100%
  );

  --np-gradient-blue: linear-gradient(
    135deg,
    #A0B6F8 0%,
    #7391F4 50%,
    #4160F4 100%
  );

}


/* =========================================
   ДИЗАЙН-СИСТЕМА 2026-10-02 (новое)
   Новые классы не пересекаются со старыми, старые страницы не меняются.
========================================= */

:root{
  /* ---------- Цвета: основа ---------- */
  --np-muted:#9A9A9A;           /* сноски, второстепенные ссылки */
  --np-card-border:#E5E5E5;
  --np-pill-border:rgba(17,17,17,.55);

  /* ---------- Цвета: акценты (сплошные) ---------- */
  --np-green:#A5AF5D;           /* Tutorial Book Mini */
  --np-orange:#FD9811;
  --np-pink:#F781C6;            /* Абстракции · BASIC */
  --np-blue:#7A98F5;            /* Геометрия · GEOMETRIC */
  --np-flora:#94C469;           /* Флористика · FLORA */
  --np-wheel:#7996F2;           /* Интерактивный круг */
  --np-turq:#4FC2FF;            /* Личный кабинет */

  /* ---------- Градиенты ---------- */
  --np-grad-green:linear-gradient(90deg,#D5E06E,#BDC766,#A5AF5D);
  --np-grad-orange:linear-gradient(90deg,#FFDC59,#FEAE29,#FC8901);
  --np-grad-pink:linear-gradient(90deg,#F4C9DD,#F08BC8,#E85BB8);
  --np-grad-blue:linear-gradient(90deg,#A0B6F8,#7391F4,#4160F4);
  --np-grad-flora:linear-gradient(90deg,#AADE7F,#7DAA52);
  --np-grad-wheel:linear-gradient(90deg,#43C7E7,#5ABAEF,#70A3F3,#8188F0);
  --np-grad-turq:linear-gradient(90deg,#95DDFF,#21B0FF);

  /* ---------- Сетка ---------- */
  --np-max:1200px;
  --np-gutter:20px;             /* боковой отступ на телефоне в новых блоках */

  /* ---------- Кнопки ---------- */
  --np-btn-h:50px;
}
@media (max-width:480px){ :root{ --np-btn-h:48px; } }

/* ---------- Типографика (телефон / от 481px) ---------- */
.np, .np *{ font-family:'Montserrat',sans-serif; font-weight:400; box-sizing:border-box; }
.np-wrap{ max-width:var(--np-max); margin:0 auto; padding:0 var(--np-gutter); }

.np-hero-eyebrow{ font-size:26px; letter-spacing:.08em; line-height:1.25; text-transform:uppercase; color:var(--np-text); margin:0 0 8px; }
.np-hero-title  { font-size:26px; letter-spacing:.06em; line-height:1.15; text-transform:uppercase; color:var(--np-green); margin:0; }
.np-label       { font-size:12px; letter-spacing:.14em; line-height:1.3;  text-transform:uppercase; color:var(--np-muted); margin:0 0 18px; }
.np-label--accent{ color:var(--np-accent, var(--np-green)); }
.np-section-title{ font-size:26px; letter-spacing:.08em; line-height:1.35; text-transform:uppercase; color:var(--np-text); margin:0; }
.np-subtitle    { font-size:16px; color:var(--np-text); }   /* разрядка и межстрочный: позже */
.np-body        { font-size:16px; letter-spacing:.02em; line-height:1.7; color:var(--np-text); }
.np-footnote    { font-size:11px; letter-spacing:.03em; line-height:1.6; color:var(--np-muted); margin-top:18px; }
.np-fact-label  { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--np-muted); }

@media (min-width:481px){
  .np-hero-eyebrow, .np-hero-title, .np-section-title{ font-size:26px; }
  .np-label{ font-size:14px; }
}

/* ---------- Карточки ---------- */
.np-card{ background:#fff; border:1px solid var(--np-card-border); border-radius:34px; padding:34px 26px; text-align:center; }
.np-card-number{ font-size:13px; letter-spacing:.08em; color:var(--np-green); margin-bottom:14px; }
.np-card-title { font-size:22px; letter-spacing:.08em; line-height:1.25; text-transform:uppercase; color:var(--np-green); margin:0 0 22px; }
.np-card-text  { font-size:14px; letter-spacing:.05em; line-height:1.9; color:var(--np-text); margin:0 0 16px; }
.np-cards{ display:grid; gap:20px; max-width:var(--np-max); margin:0 auto; }
@media (min-width:961px){ .np-cards{ grid-template-columns:1fr 1fr; } }

/* ---------- Цифры-факты ---------- */
.np-facts{ display:flex; justify-content:center; gap:22px; }
.np-fact{ text-align:center; }
.np-fact-num{ display:block; font-size:30px; line-height:1; color:var(--np-green); }
.np-fact .np-fact-label{ display:block; margin-top:6px; }
@media (min-width:481px){ .np-facts{ gap:32px; } .np-fact-num{ font-size:36px; } }

/* ---------- Кнопки ----------
   Залитая:  <a class="np-btn np-btn--green">Выбрать рисунок</a>
   Контурная: <a class="np-btn np-btn--outline np-btn--green">Выбрать рисунок</span></a>
   Цвета: --green --orange --pink --blue --flora --wheel --turq */
.np-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--np-btn-h); padding:0 32px; border-radius:999px; border:0;
  font-family:'Montserrat',sans-serif; font-size:16px; font-weight:500 !important;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:#fff !important; text-decoration:none !important; cursor:pointer;
  background:var(--np-btn-fill);
  transition:opacity .25s ease, transform .2s ease;
}
.np-btn:hover{ opacity:.9; }
.np-btn:active{ transform:scale(.97); }

.np-btn--outline{
  border:1px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, var(--np-btn-out) border-box;
}
.np-btn span{ font-weight:inherit !important; }
.np-btn--outline span{
  background:var(--np-btn-out); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* растянутые градиенты: залитая -5% / 115%, контурная -25% / 125% */
.np-btn--green { --np-btn-fill:linear-gradient(90deg,#D5E06E -5%,#BDC766 45%,#A5AF5D 115%); --np-btn-out:linear-gradient(90deg,#D5E06E -25%,#BDC766 50%,#A5AF5D 125%); }
.np-btn--orange{ --np-btn-fill:linear-gradient(90deg,#FFDC59 -5%,#FEAE29 45%,#FC8901 115%); --np-btn-out:linear-gradient(90deg,#FFDC59 -25%,#FEAE29 50%,#FC8901 125%); }
.np-btn--pink  { --np-btn-fill:linear-gradient(90deg,#F4C9DD -5%,#F08BC8 55%,#E85BB8 115%); --np-btn-out:linear-gradient(90deg,#F4C9DD -25%,#F08BC8 50%,#E85BB8 125%); }
.np-btn--blue  { --np-btn-fill:linear-gradient(90deg,#A0B6F8 -5%,#7391F4 55%,#4160F4 115%); --np-btn-out:linear-gradient(90deg,#A0B6F8 -25%,#7391F4 50%,#4160F4 125%); }
.np-btn--flora { --np-btn-fill:linear-gradient(90deg,#AADE7F -5%,#7DAA52 115%);              --np-btn-out:linear-gradient(90deg,#AADE7F -25%,#7DAA52 125%); }
.np-btn--wheel { --np-btn-fill:linear-gradient(90deg,#43C7E7 -5%,#5ABAEF 35%,#70A3F3 75%,#8188F0 115%); --np-btn-out:linear-gradient(90deg,#43C7E7 -25%,#5ABAEF 25%,#70A3F3 75%,#8188F0 125%); }
.np-btn--turq  { --np-btn-fill:linear-gradient(90deg,#95DDFF -5%,#21B0FF 115%);              --np-btn-out:linear-gradient(90deg,#95DDFF -25%,#21B0FF 125%); }

/* ---------- Капсулы ---------- */
.np-pill{
  display:inline-flex; align-items:center; padding:13px 24px; border:1px solid var(--np-pill-border);
  border-radius:999px; background:#fff; font-size:14px; letter-spacing:.02em; line-height:1.2; color:#111; white-space:nowrap;
}
@media (min-width:769px){ .np-pill{ padding:14px 28px; font-size:15px; } }

</style>


/* Отступы сверху и снизу у блоков: 0, регулируются в настройках блока Тильды */
.np-symptoms,
.np-principles,
.np-inside,
.np-sk{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
</style>