/* ---------- TOKENS ---------- */
    :root {
      /* GRAYS */
      --gray-50:  #FAFAFB;
      --gray-100: #F6F5F8;
      --gray-200: #E4E3E5;
      --gray-300: #CAC9CC;
      --gray-400: #AEAEB2;
      --gray-500: #818184;
      --gray-600: #6B6B6E;
      --gray-700: #4D4D4F;
      --gray-800: #333333;
      --gray-850: #29292A;
      --gray-900: #1D1D1D;
      --gray-950: #0F0F10;

      /* DECORATIVE — palette */
      --red-100: #FFCDC9;
      --red-500: #FF9191;
      --yellow-100: #FDEA9E;
      --yellow-500: #FFD26A;
      --blue-100: #AEDFF5;

      /* BRAND — концепция AI-инициативы (тёмная тема по образцу pitch-материалов 2026-06-11).
         Brand-accent (Онтико red) сохраняется как фокусный цвет. */
      --brand-primary: #e8eaf0;     /* основной светлый текст */
      --brand-accent:  #E4032E;     /* Онтико red — CTA, фокус, акцент */
      --brand-surface: #0b0e14;     /* основной dark фон */

      /* DARK-палитра по референсу коллеги (3события_дек.html). */
      --dark-bg:       #05070b;     /* body — самый тёмный, под градиенты */
      --dark-bg-1:     #0b0e14;     /* основная сцена */
      --dark-bg-2:     #0e121b;     /* промежуточный фон под градиент */
      --dark-surface:  #12151d;     /* поверхность — band-блоки и т. п. */
      --dark-card:     #161a24;     /* фон карточек */
      --dark-card-hover:#1c2030;    /* hover-карточка */

      /* Линии — белые с альфой (мягкие границы вместо толстых чёрных). */
      --line-soft:     rgba(255,255,255,.09);
      --line:          rgba(255,255,255,.14);
      --line-strong:   rgba(255,255,255,.20);

      /* Акценты для категоризации карточек / маркеров. */
      --accent-coral:  #ff5a36;
      --accent-yellow: #f4c531;
      --accent-lav:    #c9b8ff;

      /* SEMANTIC — переопределены в dark. */
      --color-bg-default:    var(--dark-bg-1);
      --color-bg-subtle:     var(--dark-surface);
      --color-bg-muted:      var(--dark-card);
      --color-bg-card:       var(--dark-card);
      --color-bg-inverse:    #FFFFFF;
      --color-text-primary:  #e8eaf0;
      --color-text-secondary:#c8ccd6;
      --color-text-muted:    #99a2b3;
      --color-text-dim:      #6b7385;
      --color-text-inverse:  var(--dark-bg-1);
      --color-text-on-brand: #FFFFFF;
      --color-text-brand:    var(--brand-primary);
      --color-text-accent:   var(--brand-accent);
      --color-border-subtle: var(--line-soft);
      --color-border-default:var(--line);
      --color-border-strong: var(--line-strong);

      /* SPACING — INSET */
      --space-inset-xs:      8px;
      --space-inset-sm:      12px;
      --space-inset-md:      16px;
      --space-inset-lg:      20px;
      --space-inset-xl:      24px;
      --space-inset-section: 48px;

      /* SPACING — STACK */
      --space-stack-xs:   4px;
      --space-stack-sm:   8px;
      --space-stack-md:   12px;
      --space-stack-base: 16px;
      --space-stack-lg:   20px;
      --space-stack-xl:   32px;

      /* SPACING — GRID */
      --space-grid-sm: 12px;
      --space-grid-md: 16px;
      --space-grid-lg: 20px;

      /* SPACING — SECTION */
      --space-section-sm: 32px;
      --space-section-md: 48px;
      --space-section-lg: 64px;

      /* RADIUS — концептуально 0 (декоративный приём супрематики).
         pill остаётся для строчных кнопок (правило системы). */
      --radius-default: 0px;
      --radius-pill:    999px;

      /* CONTAINER */
      --container-max: 1200px;
      --container-padding: 20px;
    }
    @media (min-width: 480px) {
      :root {
        --space-inset-lg:      24px;
        --space-inset-xl:      32px;
        --space-inset-section: 64px;
        --space-stack-lg:      24px;
        --space-stack-xl:      40px;
        --space-grid-md:       16px;
        --space-grid-lg:       24px;
        --space-section-md:    64px;
        --space-section-lg:    96px;
        --container-padding:   48px;
      }
    }
    @media (min-width: 800px) {
      :root {
        --space-inset-section: 80px;
        --space-stack-base:    20px;
        --space-stack-lg:      32px;
        --space-stack-xl:      48px;
        --space-grid-md:       24px;
        --space-grid-lg:       32px;
        --space-section-md:    80px;
        --space-section-lg:    128px;
      }
    }
    @media (min-width: 1500px) {
      :root { --container-padding: 0; }
    }

    /* ---------- RESET ---------- */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      font-family: 'TT Travels', -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      /* Тёмный фон с лёгкими радиальными акцентами в коралл и лаванду — приём pitch-материалов коллеги. */
      background:
        radial-gradient(1200px 600px at 82% -10%, rgba(255,90,54,.10), transparent 58%),
        radial-gradient(900px 500px at -6% 30%, rgba(201,184,255,.07), transparent 60%),
        radial-gradient(1100px 540px at 50% 110%, rgba(228,3,46,.06), transparent 60%),
        linear-gradient(160deg, var(--dark-bg-1), var(--dark-bg-2) 55%, var(--dark-bg-1));
      background-color: var(--dark-bg);
      background-attachment: fixed;
      color: var(--color-text-primary);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: inherit; }
    h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; }
    ul { list-style: none; }
    img, svg { max-width: 100%; display: block; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ---------- TYPOGRAPHY ---------- */
    .h1-xl  { font-weight: 600; font-size: 32px; line-height: 34px; letter-spacing: -1.28px; }
    .h1     { font-weight: 600; font-size: 28px; line-height: 30px; letter-spacing: -0.84px; }
    .h2     { font-weight: 600; font-size: 12px; line-height: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
    .h3     { font-weight: 600; font-size: 24px; line-height: 26px; letter-spacing: -0.72px; }
    .h4     { font-weight: 600; font-size: 20px; line-height: 22px; letter-spacing: -0.6px; }
    .h5     { font-weight: 600; font-size: 16px; line-height: 18px; letter-spacing: -0.48px; }
    .display-1 { font-weight: 900; font-size: 40px; line-height: 48px; letter-spacing: -2.88px; }
    .display-3 { font-weight: 600; font-size: 32px; line-height: 40px; letter-spacing: -1.68px; }
    .subtitle-1 { font-weight: 500; font-size: 16px; line-height: 18px; letter-spacing: -0.48px; }
    .body-1 { font-weight: 400; font-size: 14px; line-height: 20px; }
    .body-2 { font-weight: 400; font-size: 12px; line-height: 14px; }
    .caption-1 { font-weight: 600; font-size: 14px; line-height: 18px; }
    .caption-2 { font-weight: 600; font-size: 12px; line-height: 14px; }
    .overline { font-weight: 600; font-size: 12px; line-height: 12px; text-transform: uppercase; }
    .button-2 { font-weight: 600; font-size: 12px; line-height: 16px; }

    @media (min-width: 480px) {
      .h1-xl  { font-size: 58px; line-height: 60px; letter-spacing: -2px; }
      .h1     { font-size: 34px; line-height: 36px; letter-spacing: -1.02px; }
      .h2     { font-size: 12px; line-height: 14px; letter-spacing: 1px; }
      .h3     { font-size: 26px; line-height: 28px; letter-spacing: -0.78px; }
      .h4     { font-size: 22px; line-height: 24px; letter-spacing: -0.66px; }
      .display-1 { font-size: 64px; line-height: 72px; }
      .display-3 { font-size: 32px; line-height: 40px; letter-spacing: -1.68px; }
      .subtitle-1 { font-size: 20px; line-height: 24px; letter-spacing: -0.54px; }
      .body-1 { font-size: 16px; line-height: 22px; }
      .body-2 { font-size: 14px; line-height: 18px; }
    }
    @media (min-width: 800px) {
      .h1-xl  { font-size: 84px; line-height: 86px; letter-spacing: -2.52px; }
      .h1     { font-size: 48px; line-height: 50px; letter-spacing: -1.44px; }
      .h2     { font-size: 14px; line-height: 16px; letter-spacing: 1px; }
      .h3     { font-size: 32px; line-height: 34px; letter-spacing: -0.96px; }
      .h4     { font-size: 24px; line-height: 26px; letter-spacing: -0.72px; }
      .display-1 { font-size: 96px; line-height: 104px; }
      .display-3 { font-size: 56px; line-height: 64px; }
      .subtitle-1 { font-size: 20px; line-height: 24px; letter-spacing: -0.6px; }
    }

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

    /* ---------- ICONS ---------- */
    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      display: inline-block;
      line-height: 1;
      text-transform: none;
      letter-spacing: normal;
      word-wrap: normal;
      white-space: nowrap;
      direction: ltr;
      font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      vertical-align: middle;
    }
    h2 .material-symbols-outlined,
    h3 .material-symbols-outlined,
    h4 .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    }

    /* ---------- HEADER ---------- */
    .site-header {
      padding-block: var(--space-inset-md);
    }
    .site-header .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-stack-md);
    }
    .brand-mark {
      font-weight: 600;
      font-size: 16px;
      line-height: 18px;
      letter-spacing: -0.48px;
      color: var(--color-text-primary);
      text-decoration: none;
    }
    .brand-mark .accent { color: var(--color-text-accent); }
    .site-header .ext {
      display: inline-flex;
      align-items: center;
      gap: var(--space-stack-sm);
      color: var(--color-text-primary);
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      line-height: 18px;
    }
    .site-header .ext .material-symbols-outlined { font-size: 16px; font-variation-settings: 'wght' 600, 'opsz' 20; }

    /* ---------- HERO ---------- */
    .hero {
      position: relative;
      padding-block: var(--space-section-lg);
      overflow: hidden;
    }
    /* Утилита для скрытия H2 секции (нужно для a11y/семантики, но визуально показывать не хотим). */
    .visually-hidden {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }
    .hero .container {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-stack-xl);
      align-items: center;
    }
    @media (min-width: 800px) {
      .hero .container {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--space-grid-lg);
      }
    }
    .hero .eyebrow {
      color: var(--color-text-accent);
      margin-bottom: var(--space-stack-md);
    }
    .hero h1 {
      max-width: 14ch;
    }
    .hero h1 .em {
      color: var(--color-text-accent);
    }
    .hero .lead {
      margin-top: var(--space-stack-lg);
      max-width: 56ch;
      color: var(--color-text-secondary);
    }
    .hero .meta {
      margin-top: var(--space-stack-xl);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-stack-md);
    }
    .hero .meta a {
      display: inline-flex;
      align-items: center;
      gap: var(--space-stack-sm);
      color: var(--color-text-primary);
      text-decoration: none;
      padding: 10px 18px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: rgba(255,255,255,.02);
      transition: .15s;
      font-weight: 600;
      font-size: 14px;
      line-height: 20px;
    }
    .hero .meta a:hover {
      background: var(--brand-accent);
      border-color: var(--brand-accent);
      color: #fff;
    }
    .hero .meta a .material-symbols-outlined { font-size: 16px; font-variation-settings: 'wght' 600, 'opsz' 20; }

    .hero-art {
      width: 100%;
      max-width: 480px;
      margin-left: auto;
      aspect-ratio: 1 / 1;
      align-self: stretch;
    }

    /* ---------- SECTION ---------- */
    .section {
      padding-block: var(--space-section-md);
    }
    .section-header {
      margin-bottom: var(--space-stack-xl);
    }
    .section-header .eyebrow {
      color: var(--color-text-accent);
      margin-bottom: var(--space-stack-md);
    }
    .section-header p {
      margin-top: var(--space-stack-md);
      color: var(--color-text-secondary);
      max-width: 64ch;
    }

    /* ---------- CARDS ---------- */
    .cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-grid-md);
    }
    @media (min-width: 480px) {
      .cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-grid-md); }
    }
    @media (min-width: 1500px) {
      .cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-grid-lg); }
    }

    .card {
      display: flex;
      flex-direction: column;
      gap: var(--space-stack-base);
      padding: var(--space-inset-xl);
      background: var(--color-bg-card);
      border: 1px solid var(--line);
      border-left: 4px solid var(--accent-yellow); /* дефолт; перекрываются по статусу ниже */
      border-radius: 16px;
      transition: .15s;
      height: 100%;
      position: relative;
    }
    .card:hover {
      background: var(--dark-card-hover);
      border-color: var(--line-strong);
    }
    /* Цветной левый кант кодирует статус — приём из pitch-материалов коллеги. */
    .card.is-live    { border-left-color: var(--brand-accent); }
    .card.is-active  { border-left-color: var(--accent-yellow); }
    .card.is-concept { border-left-color: var(--accent-lav); }
    .card.is-live:hover    { border-left-color: var(--brand-accent); }
    .card.is-active:hover  { border-left-color: var(--accent-yellow); }
    .card.is-concept:hover { border-left-color: var(--accent-lav); }
    .card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-stack-md);
    }

    /* Иконка проекта рядом с заголовком карточки. SVG-шильдики
       (Saint HighLoad, Saint TeamLead, TeamLead Сибирь, AI Weekends)
       и PNG-иконка Agentic Dev Conf лежат в assets/logos/. */
    .card-head-main {
      display: flex;
      align-items: center;
      gap: var(--space-stack-base);
      flex: 1;
      min-width: 0;
    }
    .card-icon {
      display: block;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      object-fit: contain;
    }
    .card h4 { color: var(--color-text-primary); }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: var(--space-stack-xs);
      padding: 4px 10px;
      background: transparent;
      color: var(--color-text-primary);
      white-space: nowrap;
      flex-shrink: 0;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 11px;
      border: 1px solid var(--line);
      border-radius: 30px;
    }
    .chip.chip-live    { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
    .chip.chip-active  { background: transparent; color: var(--accent-yellow); border-color: rgba(244,197,49,.45); }
    .chip.chip-concept { background: transparent; color: var(--accent-lav); border-color: rgba(201,184,255,.45); }

    .card .desc {
      color: var(--color-text-secondary);
    }
    .card .desc-list {
      list-style: disc;
      margin: 0;
      padding-left: 1.4em;
      color: var(--color-text-secondary);
    }
    .card .desc-list li {
      margin-bottom: 4px;
    }
    .card .desc-list li::marker {
      color: var(--color-text-dim);
    }

    .card-meta {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-stack-sm);
      margin-top: auto;
      padding-top: var(--space-stack-base);
    }
    .card-meta dl {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: var(--space-stack-xs) var(--space-stack-md);
      margin: 0;
    }
    .card-meta dt { color: var(--color-text-muted); }
    .card-meta dd { margin: 0; color: var(--color-text-secondary); }

    /* Ссылка-стрелка вместо pill-кнопки (правило системы про pill сохранено: тут это <a>, не кнопка) */
    .card-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-stack-sm);
      align-self: flex-start;
      color: var(--color-text-primary);
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      line-height: 18px;
      letter-spacing: -0.42px;
      padding-bottom: 4px;
      border-bottom: 2px solid var(--color-text-primary);
      transition: .15s;
    }
    .card-link:hover {
      color: var(--brand-accent);
      border-color: var(--brand-accent);
    }
    .card-link:focus-visible {
      outline: 2px solid var(--brand-accent);
      outline-offset: 4px;
    }
    .card-link .material-symbols-outlined {
      font-size: 16px;
      font-variation-settings: 'wght' 600, 'opsz' 20;
    }

    /* ---------- GROUPS ---------- */
    .group + .group { margin-top: var(--space-section-md); }
    .group-title {
      display: flex;
      align-items: center;
      gap: var(--space-stack-sm);
      margin-bottom: var(--space-stack-lg);
    }
    .group-title .num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      background: var(--brand-accent);
      color: #fff;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.04em;
      border-radius: 4px;
    }
    .group-title h3 { color: var(--color-text-primary); }

    /* ---------- ФИЛЬТР ПО РОЛИ (pure CSS, без JS) ----------
       Радиокнопки лежат ВНУТРИ лейблов, поэтому клик по лейблу не приводит
       к скачку страницы: focus переезжает на input, который уже внутри
       видимой пилюли. Активное состояние и фильтрация — через :has().
       Источник правды по таблице «Проект × Роль» — projects.md.        */
    .role-input {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }
    .role-filter {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-stack-sm);
      margin-bottom: var(--space-stack-xl);
    }
    .role-filter .role-eyebrow {
      display: block;
      width: 100%;
      color: var(--color-text-muted);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: var(--space-stack-sm);
    }
    .role-pill {
      display: inline-flex;
      align-items: center;
      padding: 8px 16px;
      background: rgba(255,255,255,.02);
      color: var(--color-text-primary);
      border: 1px solid var(--line);
      border-radius: 30px;
      font-weight: 500;
      font-size: 14px;
      line-height: 1.2;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }
    .role-pill:hover { background: rgba(255,255,255,.06); border-color: var(--line-strong); }

    /* «Активная» подсветка выбранной пилюли — через :has() */
    .role-pill:has(input:checked) {
      background: var(--brand-accent);
      color: #fff;
      border-color: var(--brand-accent);
    }

    /* Видимый фокус для клавиатуры */
    .role-pill:has(input:focus-visible) {
      outline: 2px solid var(--brand-accent);
      outline-offset: 4px;
    }

    /* Сама фильтрация карточек — на уровне .container через :has() */
    .container:has(#r-developer:checked)   .card:not([data-roles~="developer"])   { display: none; }
    .container:has(#r-sre:checked)         .card:not([data-roles~="sre"])         { display: none; }
    .container:has(#r-architect:checked)   .card:not([data-roles~="architect"])   { display: none; }
    .container:has(#r-teamlead:checked)    .card:not([data-roles~="teamlead"])    { display: none; }
    .container:has(#r-cto:checked)         .card:not([data-roles~="cto"])         { display: none; }
    .container:has(#r-product:checked)     .card:not([data-roles~="product"])     { display: none; }
    .container:has(#r-datascience:checked) .card:not([data-roles~="datascience"]) { display: none; }
    .container:has(#r-founder:checked)     .card:not([data-roles~="founder"])     { display: none; }

    /* Скрытие пустой группы (когда в ней не осталось видимых карточек) */
    .container:has(#r-developer:checked)   .group:not(:has(.card[data-roles~="developer"]))   { display: none; }
    .container:has(#r-sre:checked)         .group:not(:has(.card[data-roles~="sre"]))         { display: none; }
    .container:has(#r-architect:checked)   .group:not(:has(.card[data-roles~="architect"]))   { display: none; }
    .container:has(#r-teamlead:checked)    .group:not(:has(.card[data-roles~="teamlead"]))    { display: none; }
    .container:has(#r-cto:checked)         .group:not(:has(.card[data-roles~="cto"]))         { display: none; }
    .container:has(#r-product:checked)     .group:not(:has(.card[data-roles~="product"]))     { display: none; }
    .container:has(#r-datascience:checked) .group:not(:has(.card[data-roles~="datascience"])) { display: none; }
    .container:has(#r-founder:checked)     .group:not(:has(.card[data-roles~="founder"]))     { display: none; }

    /* ---------- MANIFESTO BAND (одна цветная секция-акцент) ---------- */
    .band {
      padding-block: var(--space-section-md);
      background: var(--brand-accent);
      color: #fff;
    }
    .band .container {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-stack-lg);
      align-items: center;
    }
    @media (min-width: 800px) {
      .band .container { grid-template-columns: 2fr 1fr; gap: var(--space-grid-lg); }
    }
    .band h2 { color: #fff; }
    .band p { max-width: 64ch; }
    .band a {
      display: inline-flex;
      align-items: center;
      gap: var(--space-stack-sm);
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
      padding: 10px 22px;
      border: 1.5px solid rgba(255,255,255,.7);
      border-radius: 30px;
      justify-self: start;
      transition: .15s;
    }
    .band a:hover { background: #fff; color: var(--brand-accent); }
    .band a .material-symbols-outlined { font-size: 16px; font-variation-settings: 'wght' 600, 'opsz' 20; }

    /* ---------- FOOTER ---------- */
    .site-footer {
      padding-block: var(--space-section-md);
      background: var(--dark-bg);
      color: var(--color-text-secondary);
      border-top: 1px solid var(--line);
    }
    .site-footer .row {
      display: flex;
      flex-direction: column;
      gap: var(--space-stack-lg);
    }
    @media (min-width: 800px) {
      .site-footer .row {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
      }
    }
    .site-footer dl {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: var(--space-stack-xs) var(--space-stack-md);
      margin: 0;
    }
    .site-footer dt { color: var(--gray-400); }
    .site-footer dd { margin: 0; color: #fff; }
    .site-footer a {
      color: #fff;
      text-decoration: none;
      border-bottom: 1px solid var(--gray-500);
    }
    .site-footer a:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
    .site-footer .legal { color: var(--gray-400); }