/*---------------------------------------------
  NEUROMORPHIC + BIOMORPHIC MONOCHROME THEME
  Используется Bootstrap 5 – доп. стили
----------------------------------------------*/

/*=== CSS VARIABLES ===*/
:root {
  /* Фон */
  --bg-main: #f4f6fa;
  --bg-contrast: #e7eaf2;
  --bg-card: #ecf0f8;
  --bg-glass: rgba(250, 253, 253, 0.85);
  --bg-gradient: linear-gradient(120deg, #dbeafe 0%, #f4f6fa 100%);
  --bg-gradient-dark: linear-gradient(120deg, #0f1a24 0%, #202f45 100%);
  --bg-modal: #fff;
  --bg-section: #f7faff;

  /* Основные цвета */
  --primary: #4468e1;
  --primary-dark: #2540a5;
  --primary-light: #7ea6fa;
  --accent: #88e6c7;
  --accent-dark: #19bc9c;
  --accent-light: #bbffe7;

  /* Чёрный/тёмный */
  --text-main: #182036;
  --text-dark: #10131b;
  --text-subtle: #525a71;
  --text-invert: #fff;
  --text-link: #4468e1;
  --text-link-hover: #122669;

  /* Границы и тени */
  --border-main: #e5eaf6;
  --border-soft: #dde2ec;
  --shadow-soft: 0 3px 24px 2px rgba(33, 40, 91, 0.09);
  --shadow-glass: 0 2px 16px 0 rgba(58,67,104,0.09);

  /* Радиусы и отступы */
  --radius-xl: 2.6rem;
  --radius-lg: 1.6rem;
  --radius-md: .95rem;
  --radius-sm: .60rem;
  --gap-section: 4.2rem;

  /* Градиенты для подсветки */
  --grad-bright-1: linear-gradient(110deg, #80a4ff 10%, #e9f2ff 100%);
  --grad-bright-2: linear-gradient(100deg, #92c4ec 15%, #cbf8e6 90%);
}

/*=== СБРОС И БАЗОВЫЕ НАСТРОЙКИ ===*/
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  background: var(--bg-main);
  font-size: 16px;
}
*, *:before, *:after { box-sizing: inherit; }
body {
  font-family: 'Nunito', Arial, sans-serif;
  color: var(--text-main);
  background: var(--bg-gradient), var(--bg-main);
  min-height: 100vh;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  margin-bottom: .7rem;
}
h1, .display-4 { font-size: clamp(2.1rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2.1rem); }

/* Секции */
section {
  margin-bottom: var(--gap-section);
  background: var(--bg-section);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 2.2rem 0 2.6rem 0;
}

/*=== HEADER & NAV ===*/
.neu-header {
  background: var(--bg-gradient-dark);
  box-shadow: 0 2px 24px rgba(33,40,91,.13);
  border-bottom: 1px solid var(--border-main);
}
.navbar .navbar-brand {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 2.05rem;
  font-weight: 700;
  background: var(--grad-bright-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
}
.navbar-nav .nav-link {
  color: var(--text-invert);
  text-shadow: 0 1px 6px rgba(24,32,54,0.21);
  font-weight: 600;
  padding: .50rem 1.3rem;
  border-radius: var(--radius-sm);
  transition: background .18s, color .16s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  background: var(--primary);
  color: var(--text-invert);
}

/*** HERO SECTION ***/
.hero-section {
  position: relative;
  min-height: 450px;
  padding: 5rem 0 2.5rem;
  background: transparent;
  overflow: visible;
}
.hero-section .parallax-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: blur(0.5px) grayscale(0.12);
  transition: all .5s cubic-bezier(.83, .04, .37, .98);
}
.hero-section:after {
  /* Анимация частиц поверх Hero */
  content:"";
  pointer-events: none;
  position: absolute;
  z-index: 5;
  inset: 0;
  background-image: url('image/particles-overlay-biomorph.jpg'); /* описание: png прозрачный слой легких биоморфных частиц, 1920x500*/
  background-repeat: repeat-x;
  opacity: 0.17;
  animation: biomorphParticles 18s linear infinite;
}
@keyframes biomorphParticles {
  0% { background-position-x: 0; }
  100% { background-position-x: 800px; }
}
.hero-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(110deg,rgba(30,36,51,.82) 75%,rgba(45,61,87,.85) 100%);
  border-radius: var(--radius-xl);
  box-shadow: 0 7px 48px 0 rgba(15,16,45,0.21);
  color: var(--text-invert);
  text-shadow: 0 2px 8px rgba(20,26,37,0.48);
}
.hero-section h1, .hero-section p {
  color: var(--text-invert);
}
/* гарантируем читаемость текста hero */
.hero-content h1, .hero-content p {
  color: #fff !important;
}
.hero-section .btn {
  margin-top: .6em;
}

/*=== GLASSMORPHISM EFFECTS ===*/
.bg-glass, .neu-card, .neu-form, .neu-footer, .neu-progress {
  background: var(--bg-glass);
  backdrop-filter: blur(8px) saturate(1.13);
  box-shadow: var(--shadow-glass);
}

/*=== NEUROMORPHIC CARDS/BLOCKS ===*/
.neu-card, .card {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--bg-card);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  margin: 0 auto;
  transition: transform .28s cubic-bezier(.54,.13,.6,1.13), box-shadow .21s;
}
.neu-card:hover, .card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 10px 32px 0 rgba(60,97,185,0.14),var(--shadow-soft);
}

/* Карточки секций (Awards/Research/Case/Team) - обязательная центровка */
.card .card-image,
.neu-card .card-image,
.card .image-container,
.neu-card .image-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start;
  height: 144px !important;
  min-height: 144px;
  max-height: 180px;
  width: 100%;
  margin: 0 auto 1.2rem auto;
  overflow: hidden;
}
/* Все изображения внутри карточек */
.card .card-image img,
.neu-card .card-image img,
.card .image-container img,
.neu-card .image-container img {
  object-fit: cover !important;
  height: 100% !important;
  width: auto;
  max-width: 95%;
  margin: 0 auto;
  display: block;
  border-radius: var(--radius-md);
  background: #e1e8f2;
}

/* Центровка карточек и внутренних элементов */
.card,
.neu-card,
.item,
.testimonial,
.team-member,
.product-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  justify-content: flex-start;
}

/* текст карточки */
.card-content, .neu-card .card-content {
  width: 100%;
  padding: .7rem 1rem 1.2rem 1rem;
}

/*=== СКИДКАЕТ МАДЖИНОВ И ПАДДИНГОВ НА БУТССТРАП-БАЗЕ ===*/
.row.g-4 > .col,
.row.g-4 > .col-md-4,
.row.g-4 > .col-md-3,
.row.g-4 > .col-md-2 { padding-bottom: 1rem; }
section .row { margin-bottom: 0; }

/*=== SECTION SPACING ===*/
.neu-section {
  margin-bottom: var(--gap-section);
  background: var(--bg-section);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 2.2rem 0 2.6rem 0;
}

/*=== SUB-SECTION STYLES ===*/
[data-section="vision"] { background: var(--grad-bright-2); }
[data-section="process"] { background: var(--grad-bright-1); }
[data-section="community"] { background: var(--bg-contrast); }

/*=== IMAGE CONTAINERS ===*/
.image-container {
  display: flex !important;
  justify-content: center;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 32px 2px rgba(68, 97, 205, 0.10);
}
.image-container img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover !important;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  background: #d7e6f9;
}

/*=== ПРИМЕР ПАРАЛЛАКС ФОНА ДЛЯ HERO ===*/
.parallax-bg {
  position: fixed !important;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(1.2px) brightness(0.92);
  pointer-events: none;
  transition: filter .3s;
}

/*=== SECTION HEADERS ===*/
section > h2,
.neu-section > h2 {
  font-family: 'Oswald', Arial,sans-serif;
  font-weight: 700;
  color: var(--primary-dark);
  text-shadow: 0 1px 6px rgba(26,46,94,.10);
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 2.5rem;
}

/*=== PROGRESS BARS (RESEARCH) ===*/
.neu-progress,
.progress.neu-progress {
  background: rgba(230,239,252, 0.63);
  height: 1.2rem;
  border-radius: 1.8em;
  box-shadow: 0 1px 8px 0 rgba(80,105,192,0.09);
  overflow: hidden;
  margin-bottom: 0.8rem;
}
.neu-progress .progress-bar {
  font-weight: 600;
  font-size: 1.01em;
  background: var(--primary);
  color: #fff;
  text-shadow: 0 1px 8px rgba(50,34,123,.18);
  border-radius: 1.8em;
  transition: width .7s cubic-bezier(.39,.12,.61,.99);
}

/*=== BIOMORPHIC PARTICLE ANIMATION - UNIVERSAL CANVAS ===*/
.particle-bg-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .20;
}

/*=== NEUROMORPHIC BUTTONS (глобально) ===*/
.btn, button, input[type='submit'] {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 700;
  border: none;
  border-radius: 2em;
  padding: 0.7em 2.7em;
  background: var(--primary);
  color: var(--text-invert);
  text-shadow: 0 2px 8px rgba(12,31,46,.12);
  box-shadow: 0 4px 16px 0 rgba(20,24,55,0.10);
  font-size: 1.05rem;
  letter-spacing: .02em;
  outline: none;
  cursor: pointer;
  transition: 
    background .16s cubic-bezier(.21,0,.37,1),
    box-shadow .19s cubic-bezier(.21, 0, .37, 1),
    color .13s;
}
.btn:focus, .btn:active, button:focus, input[type='submit']:focus {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}
.btn:hover, button:hover, input[type='submit']:hover {
  background: var(--primary-dark);
  color: #fff;
  box-shadow: 0 6px 18px 0 rgba(38,44,110,0.15);
  transform: translateY(-2px) scale(1.021);
}
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-dark);
  color: #fff;
}
.btn-accent, .btn-success {
  background: var(--accent-dark);
  color: #fff;
}
.btn-accent:hover, .btn-success:hover {
  background: var(--accent-light);
  color: var(--primary-dark);
}
/* Читать далее */
a.read-more {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  display: inline-block;
  padding-bottom: 1px;
  margin-top: .13em;
  letter-spacing: 0.03em;
  transition: color .20s, border-color .20s;
  text-decoration: none;
}
a.read-more:hover {
  color: var(--accent-dark);
  border-bottom: 2px solid var(--accent-dark);
  text-decoration: none;
}

/*=== CONTACT FORM ===*/
.neu-form {
  background: var(--bg-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 2.6rem 2rem 2.2rem 2rem;
}
.neu-form label {
  font-weight: 600;
  color: var(--primary-dark);
  font-family: 'Oswald', Arial,sans-serif;
  letter-spacing: 0.01em;
}
.neu-form .form-control {
  border-radius: 2em;
  border: 1px solid var(--border-main);
  background: #f5f8ff;
  color: var(--text-main);
  box-shadow: 0 1px 4px 0 rgba(21,33,71,.06);
  transition: border-color .17s;
  margin-bottom: 1rem;
}
.neu-form .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px #a9bbf8;
}
.neu-form textarea.form-control { min-height: 110px; resize: vertical;}
.neu-form button[type='submit'] {
  margin-top: .5em;
}

/*=== FOOTER ===*/
.neu-footer {
  background: var(--bg-gradient-dark);
  color: #fff;
  font-size: 1.04em;
  letter-spacing: .01em;
  border-top: 1px solid #2a375a;
  box-shadow: 0 -2px 18px 1px rgba(30,40,90,0.12);
  padding: 2.1rem 0;
}
.neu-footer .fw-bold {
  color: #c4d4ff;
}
.neu-footer a {
  color: #aeeaff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .13s;
}
.neu-footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.neu-footer .social-text-link {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.03em;
  margin-right: 1.15em;
  color: var(--primary-light);
  letter-spacing: .04em;
  transition: color .15s;
}
.neu-footer .social-text-link:hover {
  color: var(--accent-dark);
  background: none;
}
/* универсальный стиль для текстовых социальных ссылок */
.neu-footer .social-text-link::before {
  display: inline-block;
  font-weight: bold;
  width: 1.2em;
  text-align: center;
  margin-right: .22em;
  font-family: 'Oswald', Arial, sans-serif;
  color: var(--accent);
}
.neu-footer .social-text-link[href*="facebook"]::before { content: "f"; color: #7ea6fa;}
.neu-footer .social-text-link[href*="twitter"]::before { content: "x"; color: #61c6f0;}
.neu-footer .social-text-link[href*="instagram"]::before { content: "i"; color: #bb86fc;}

@media (max-width: 991.98px) {
  .neu-footer .text-md-end, .neu-footer .text-md-start, .neu-footer .text-md-center {
    text-align: center !important;
  }
}

/*=== SUCCESS PAGE ===*/
body.success,
body .success-page,
body.success-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
  background: var(--bg-gradient);
}
.success-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.success-container h2 {
  color: var(--primary-dark);
  font-family: 'Oswald', Arial,sans-serif;
  margin-bottom: 1.55rem;
}
.success-container p {
  color: var(--text-main);
  font-size: 1.22em;
  margin-bottom: 2rem;
}

/*=== PADDING ДЛЯ ПОЛИТИК/УСЛОВИЙ ===*/
body.privacy-page main,
body.terms-page main {
  padding-top: 100px !important;
}

/*=== RESPONSIVE LAYOUT ===*/
@media (max-width: 1199.98px) {
  section, .neu-section { padding: 1.1rem 0 1.7rem 0;}
}
@media (max-width:991.98px){
  .hero-section { padding-top: 4rem;}
  .neu-section, section { padding: 1.9rem 0;}
  .card, .neu-card { min-width: 0;}
}

@media (max-width: 767.98px) {
  .hero-content { padding: 1.7rem 0.6rem; }
  section, .neu-section { border-radius: 1.2rem; }
}

@media (max-width: 450px) {
  .neu-footer { font-size: .98em;}
}

/*=== CUSTOM SERVICE CLASSES ===*/
.text-main { color: var(--text-main)!important; }
.text-accent { color: var(--accent-dark)!important; }
.bg-primary-gradient { background: var(--bg-gradient-dark); color: #fff;}
.rounded { border-radius: var(--radius-md) !important;}
.rounded-lg { border-radius: var(--radius-lg) !important;}
.shadow-neu { box-shadow: var(--shadow-soft)!important;}
.mt-section { margin-top: var(--gap-section);}
.mb-section { margin-bottom: var(--gap-section);}
.gap-lg { gap: 2.7rem !important;}
/* универсальная подсветка карточки */
.neu-highlight {
  background: linear-gradient(110deg, #fafaff 60%, #dbeafe 100%);
  box-shadow: 0 0 0 4px #eaf6fc inset;
}

.is-two-thirds {
  width: 66.6667%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 991.98px) { .is-two-thirds { width: 96%; } }
@media (max-width: 767.98px) { .is-two-thirds { width: 100%; } }

/*=== CARDS GRID (GRID+FLEX) ===*/
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 2.1rem;
  align-items: stretch;
  width: 100%;
}

/*=== СТИЛИ ДЛЯ "ЧИТАТЬ ДАЛЕЕ" ===*/
a.read-more {
  font-family: 'Oswald', Arial, sans-serif;
  color: var(--accent-dark);
  text-decoration: underline;
  font-weight: 700;
  font-size: 1.02em;
  padding-left: .15em;
  letter-spacing: .03em;
  transition: color .15s;
}
a.read-more:hover { color: var(--primary-dark); }

/*=== ПОДСВЕТКА ДЛЯ ССЫЛОК ===*/
a, a:visited {
  color: var(--text-link);
  text-underline-offset: 2px;
  transition: color .15s;
}
a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/*=== ОБЩИЙ ИНТЕРАКТИВ, ПЛАВНЫЕ ЭФФЕКТЫ ===*/
.card, .neu-card, .btn, input, .neu-form, .progress, .image-container, .neu-footer {
  transition:
    box-shadow .22s cubic-bezier(.4,0,.2,1),
    background .17s cubic-bezier(.34,0,.5,1),
    color .16s;
}

/*=== АННИМАЦИЯ ПРИ НАВЕДЕНИИ НА КАРТОЧКИ ===*/
.card:hover, .neu-card:hover {
  background: var(--bg-glass);
  box-shadow: 0 12px 48px 0 rgba(30,44,153,0.19), var(--shadow-soft);
  border-bottom: 1.7px solid var(--primary);
  transform: translateY(-6px) scale(1.025);
}
.card .read-more, .neu-card .read-more { margin-top: 0.31em; }
.card .read-more:hover, .neu-card .read-more:hover { color: var(--accent-dark); }

/*=== МОДАЛЬНОЕ ОКНО ===*/
.modal-content.neu-card {
  background: var(--bg-glass);
  box-shadow: 0 8px 40px 1px rgba(14,32,88,0.12);
  border-radius: var(--radius-lg);
}

/*=== СКРОЛЛБАР ===*/
::-webkit-scrollbar { width: 7px; background: #dfecff;}
::-webkit-scrollbar-thumb { background: #b3c3e7; border-radius: 4px;}
::-webkit-scrollbar-thumb:hover { background: #8faee4; }

/*=== CUSTOM OVERRIDES ===*/
/* Всегда затемненный градиент на bg изображениях с текстом поверх: */
.bg-with-overlay {
  position: relative;
  z-index: 1;
}
.bg-with-overlay::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background: linear-gradient(120deg,rgba(0,0,0,.55) 60%,rgba(22,36,66,.52) 100%);
  pointer-events:none;
}

.bg-primary-gradient, .bg-gradient {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Запрет блоку перекрываться с хедером */
.pt-navbar-offset { padding-top: 100px; }

/*=== ЗАПОЛНИТЕЛИ ДЛЯ ИЗОБРАЖЕНИЙ (пример): ===*/
/*
<img src="image/hero-business-consulting-office-meeting.jpg"
     alt="Офис, современная деловая встреча, нейроморфный стиль" width="1440" height="700">
/* описание: нейроморфный бэкграунд, офис, сотрудничество, стеклянный стол, мягкий свет
*/

/*=== END ===*/