:root{
      --bg: #0b1220;
      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.72);
      --line: rgba(255,255,255,0.12);
      --accent: rgba(255,255,255,0.9);
      --shadow: 0 18px 60px rgba(0,0,0,0.45);
      --radius: 22px;
    } 

    *{ box-sizing: border-box; }
    html, body { min-height: 100vh; }
    body{
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
       background:
        radial-gradient(900px 600px at 15% 20%, rgba(120,170,255,0.18), transparent 55%),
        radial-gradient(900px 600px at 85% 80%, rgba(180,120,255,0.16), transparent 55%),
        radial-gradient(900px 600px at 60% 15%, rgba(120,255,210,0.10), transparent 60%),
        var(--bg);
		
      display: flex;
      flex-direction: column;
      align-items: center;       /* Центрируем контент по горизонтали */
      justify-content: flex-start; /* Прижимаем контент к самому верху */
      min-height: 100vh;         /* Растягиваем фон на всю высоту экрана */
      padding: 28px 16px 28px;   /* Увеличили первый отступ до 60px, чтобы прижать, но не «вплотную» */
    } 
    	  
	/* Обновленная навигация */
    .nav-bar {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 34px; /* Больше воздуха внутри */
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(10px);
      border: 1px solid var(--line);
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
  
      /* Нижние углы оставляем острыми для стыковки */
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      margin-bottom: 0;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 20px; /* Увеличили разрыв между лого и текстом */
      text-decoration: none;
      color: inherit;
    }

    .nav-logo {
      width: 64px;
      height: 64px;
      object-fit: cover;        /* Чтобы скругление углов корректно обрезало края картинки */
      border-radius: 14px;      /* Тот же радиус, что у фото */
      border: 1px solid var(--line); /* Тонкая рамка по самому краю */
      display: block;
      padding: 0;               /* Убираем отступы внутри */
      background: none;         /* Убираем подложку */
    }

    .nav-title h1 {
      font-size: 36px; /* Возвращаем мощный заголовок */
      font-weight: 800;
      margin: 0;
      letter-spacing: -0.5px;
      line-height: 1;
    }

    .nav-title p {
      font-size: 15px; /* Крупный подзаголовок */
      margin: 6px 0 0 0;
      color: rgba(255,255,255,0.85);
      font-weight: 500;
    }

    /* Стили для кнопок в меню */
    .nav-links {
      display: flex;
      gap: 10px; /* Расстояние между кнопками */
      align-items: center;
    }

    .nav-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      padding: 0 16px;            /* Изменили: 0 сверху/снизу, 16 по бокам */
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.05);
      transition: all 0.2s ease;

      /* ДОБАВЛЯЕМ ЭТО: */
      display: inline-flex;       /* Позволяет кнопке центровать иконку внутри */
      align-items: center;        /* Центровка по вертикали */
      justify-content: center;    /* Центровка по горизонтали */
      height: 40px;               /* Фиксированная высота, чтобы кнопки были в ряд */
      min-width: 40px;            /* Если внутри только иконка, кнопка будет квадратной */
    }

    .nav-links a:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-color: var(--line);
      transform: translateY(-1px);
    }

    /* Active menu item with glow effect */
    .nav-links a.active {
      color: #ffffff !important;
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.3);
  
      /* Outer glow for the button */
      box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.08), 
        inset 0 0 10px rgba(255, 255, 255, 0.03);
  
      transform: translateY(-1px);
    }

    /* Enhancing glow for SVG icons and Text inside active button */
    .nav-links a.active svg,
    .nav-links a.active {
      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
    }

    /* Ensuring icon stroke is pure white when active */
    .nav-links a.active svg {
      stroke: #ffffff !important;
    }

	.card {
      margin-top: 24px; 
    }

    /* Специальное правило для первой карточки, которая идет СРАЗУ после меню */
    .nav-bar + .card {
      margin-top: -1px; /* Нахлест рамок для идеального стыка */
  
    /* Убираем скругление только сверху */
      border-top-left-radius: 0;
      border-top-right-radius: 0;
  
    /* Нижние углы карточки остаются круглыми (по умолчанию из .card) */
      border-bottom-left-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
    }
	 
      
    .wrap {
      width: 100%; /* На мобильных занимает 100% */
      max-width: 920px; /* На ПК ограничивается */
      display: flex;
      flex-direction: column;
      gap: 0;
    }
	  
	img, iframe {
      max-width: 100%;
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 34px;
      backdrop-filter: blur(10px);
    }

    h2{
      margin: 0 0 16px 0;
      font-size: 22px;
      letter-spacing: -0.5px;
      line-height: 1.08;
    }

    .subtitle{
      margin: 0 0 18px 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.6;
      max-width: 70ch;
    }

    .badge{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.06);
      color: var(--accent);
      font-size: 13px;
      margin-bottom: 18px; /* Increased spacing */
      width: fit-content;
    }

    .dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.9);
      box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
      animation: pulse 1.6s ease-in-out infinite;
    }

    @keyframes pulse{
      0%{ transform: scale(0.92); opacity: 0.7; }
      50%{ transform: scale(1.12); opacity: 1; }
      100%{ transform: scale(0.92); opacity: 0.7; }
    }

    .ctaRow{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 18px; /* Slightly bigger buttons */
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.08);
      color: var(--text);
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
    }
    .btn:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.18);
    }

    .btn.primary{
      background: rgba(255,255,255,0.92);
      color: #0b1220;
      border-color: rgba(255,255,255,0.92);
    }
    .btn.primary:hover{
      background: rgba(255,255,255,1);
      border-color: rgba(255,255,255,1);
    }

    .footer {
      display: flex;
      flex-direction: column; /* Ставим элементы друг под другом */
      gap: 20px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,0.04);
      color: var(--muted);
      font-size: 13px;
      
      /* Отступы, которые мы обсудили ранее */
      margin-top: 24px;
      margin-bottom: 40px;
    }

    /* Верхняя часть футера (основная инфо) */
    .footer-main {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 20px;
      width: 100%;
      border-bottom: 1px solid rgba(255,255,255,0.05); /* Разделительная линия */
      padding-bottom: 20px;
    }

    /* Нижняя часть (копирайт и ссылки) */
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12px;
      opacity: 0.7;
    }

    .footer-col h4 {
      color: #fff;
      margin: 0 0 8px 0;
      font-size: 14px;
      font-weight: 600;
    }

    .footer-col p, .footer-col a {
      margin: 0;
      line-height: 1.6;
      color: var(--muted);
      text-decoration: none;
      display: block;
    }
    
    .footer-col a:hover { color: #fff; }

    .links{
      display: inline-flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .links a{
      color: rgba(255,255,255,0.78);
      text-decoration: none;
      border-bottom: 1px dashed rgba(255,255,255,0.25);
      padding-bottom: 1px;
    }
    .links a:hover{
      color: rgba(255,255,255,0.95);
      border-bottom-color: rgba(255,255,255,0.45);
    }

    .player-container {
      margin-top: 24px;
      border-radius: 12px;
      overflow: hidden;
	}
    
    /* Глобальный стиль для фото основателя (ПК + Мобильные) */
    .founder-photo {
      width: 160px;          /* Размер для ПК (можно подправить под себя) */
      height: 160px;
      border-radius: 22px !important; /* Твой фирменный радиус */
      object-fit: cover;
      display: block;
      flex-shrink: 0;
      border: 1px solid var(--line);
    
    /* Фикс для принудительного скругления в браузерах на ПК */
      overflow: hidden;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    /* Если на About странице фото лежит внутри .card */
    .card img {
      border-radius: 22px !important;
    }


    /* ФИНАЛЬНЫЙ БЛОК ДЛЯ МОБИЛЬНЫХ (ОДИН ВМЕСТО ВСЕХ) */
    @media (max-width: 640px) {
      body { padding: 20px 12px; }
      .card { padding: 24px; }

      /* Шапка: всё влево и без лишних отступов */
      .nav-bar {
        flex-direction: column;
        align-items: flex-start; /* Прижимаем всё влево */
        text-align: left;
        gap: 20px;
        padding: 24px;
        /* Возвращаем скругление только верху */
        border-top-left-radius: var(--radius) !important;
        border-top-right-radius: var(--radius) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
      }

      .nav-brand {
        width: 100%;
        justify-content: flex-start;
      }

      .nav-logo {
        width: 54px; 
        height: 54px;
        border-radius: 12px;
        padding: 0; /* Убираем здесь тоже */
      }

      .nav-title h1 {
        font-size: 26px;
      }

      /* Кнопки в ряд, прижаты влево */
      .nav-links {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap; /* Если не влезут в одну строку, мягко перенесутся */
        gap: 6px;
      }

      .nav-links a {
        padding: 10px 14px;
        font-size: 13px;
        flex: 0 1 auto; /* Кнопки не растягиваются на всю ширину, а стоят в ряд */
      }

      /* Сетка автора */
      .founder-grid {
        flex-direction: column;
        align-items: flex-start; /* Тоже прижимаем влево для единства стиля */
        text-align: left;
      }
      
      .founder-photo {
        width: 140px;
        height: 140px;
        border-radius: 14px;
        object-fit: cover;    /* Это важно: фото будет обрезаться, а не растягиваться */
        aspect-ratio: 1 / 1;  /* Гарантирует идеальный квадрат */
        flex-shrink: 0;       /* Запрещает контейнеру сжимать картинку */
        border: 1px solid var(--line);
      }
      
      .founder-aside {
        width: 100%;
        max-width: 140px;
      }
		
	  .founder-bio {
        color: var(--muted); /* Это сделает цвет приглушенным, как в Lab */
        font-size: 16px;
        line-height: 1.6;
        margin: 0;
      }

      /* А это оставит само имя ярким и заметным */
      .founder-bio strong {
        color: #ffffff; 
      }
		
	  
		
		
    }
	  
	  
/* --- Стили для всех устройств (ПК и Мобильные) --- */

/* 1. Базовый цвет иконки ESG в футере */
.footer .nav-links a.esg-accent {
    color: #3EE0A8 !important; /* Мятный неон */
    border-color: rgba(62, 224, 168, 0.2) !important;
    background: rgba(62, 224, 168, 0.05) !important;
    opacity: 0.9;
    transition: all 0.3s ease;
}

/* Окрашиваем саму иконку внутри */
.footer .nav-links a.esg-accent svg {
    stroke: #3EE0A8 !important;
}

/* 2. Эффект при наведении */
.footer .nav-links a.esg-accent:hover {
    opacity: 1;
    background: rgba(62, 224, 168, 0.1) !important;
    border-color: rgba(62, 224, 168, 0.4) !important;
    transform: translateY(-2px);
    filter: drop-shadow(0 0 8px rgba(62, 224, 168, 0.5));
}

/* Состояние, когда зеленая кнопка АКТИВНА */
.footer .nav-links a.esg-accent.active {
    opacity: 1;
    background: rgba(62, 224, 168, 0.15) !important; /* Прозрачный зеленый фон */
    border-color: rgba(62, 224, 168, 0.5) !important; /* Яркая зеленая рамка */
    
    /* Мощное зеленое свечение */
    box-shadow: 0 0 20px rgba(62, 224, 168, 0.15);
    filter: drop-shadow(0 0 5px rgba(62, 224, 168, 0.4));
    
    transform: translateY(-1px);
}

/* Принудительно красим иконку внутри активной кнопки */
.footer .nav-links a.esg-accent.active svg {
    stroke: #3EE0A8 !important;
}

/* Контейнер заголовка в Lab */
.lab-header-row {
    display: flex;
    justify-content: space-between; /* Текст влево, лого вправо */
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 10px;
}

.lab-text-content {
    flex: 1; /* Текст занимает всё свободное место */
}

/* Логотип-маска подкаста */
.podcast-logo-mask {
    width: 180px; /* Настрой ширину под свой лого */
    height: 100px; /* Настрой высоту */
    background-color: var(--text); /* Окрашивает логотип в цвет текста */
    
    -webkit-mask-image: url('../img/s4p-logo.png');
    mask-image: url('../img/s4p-logo.png');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center right;
    mask-position: center right;
    
    opacity: 0.8;
    flex-shrink: 0; /* Чтобы лого не сжималось */
}

/* Адаптив для мобильных */
@media (max-width: 640px) {
    .lab-header-row {
        flex-direction: column; /* На телефоне логотип уйдет под текст */
        gap: 15px;
    }
    .podcast-logo-mask {
        mask-position: center left;
        height: 50px;
        width: 120px;
    }
}

/* ESG Grid Styles */
.esg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Автоматическая сетка */
    gap: 20px;
    margin-top: 40px;
}

.esg-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.esg-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(62, 224, 168, 0.3); /* Подсветка мятным при наведении */
    transform: translateY(-4px);
}

/* Заголовок карточки (Pillar) */
.esg-pillar {
    color: #3EE0A8; /* Твой мятный неон */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Что мы делаем (Focus) */
.esg-focus {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

/* Результат (Impact) */
.esg-impact {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
    margin-top: auto; /* Прижимает текст вниз */
}

/* Особенный стиль для пятой карточки (Integrity) */
.esg-item.accent {
    border-color: rgba(62, 224, 168, 0.2);
    background: linear-gradient(145deg, rgba(62, 224, 168, 0.05), transparent);
}

/* Services modules: hover motion like ESG cards */
.module-card {
    transition: all 0.3s ease;
    will-change: transform;
}

/* Services modules: move on hover (no color changes) */
.module-card:hover {
    transform: translate3d(0, -6px, 0) !important;
}

/* --- Стили брендинга ТОЛЬКО для страницы ESG (только цвет и свечение) --- */

/* Название ZIANIC — только градиент и тень, шрифт не меняем */
.esg-page .nav-title h1 {
    background: linear-gradient(135deg, #fff 20%, #3EE0A8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(62, 224, 168, 0.4));
}

/* Позиционирование внутри карточки */
.module-icon-link {
    position: absolute;
    bottom: 15px; /* Расстояние от низа карточки */
    right: 15px;  /* Расстояние от правого края карточки */
    line-height: 0;
    z-index: 10;
}

.module-neon-icon {
    width: 22px;
    height: 22px;
    /* Твой светло-синий цвет через фильтр */
    filter: invert(80%) sepia(20%) saturate(1000%) hue-rotate(185deg) brightness(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Эффект при наведении */
.module-icon-link:hover .module-neon-icon {
    opacity: 1;
    transform: scale(1.1);
    /* Синее неоновое свечение */
    filter: invert(60%) sepia(50%) saturate(3000%) hue-rotate(190deg) brightness(110%)
            drop-shadow(0 0 8px rgba(79, 172, 254, 0.9));
}