/* InclusiveAI — Brand palette from inclusiveai.ru
   Soft periwinkle background, brand cyan + deep-purple accents,
   Manrope + Unbounded display. Audience: people with vision impairments,
   so the system supports a "Версия для слабовидящих" accessibility mode. */


:root {
  /* ── Paper & ink ──
     Audience: blind and low-vision children, their parents and teachers —
     frequently at 200–400% zoom, in bright rooms, often via screen reader.
     Contrast is the brand, not a compliance checkbox: body text runs 15:1,
     never the tinted-gray-on-tinted-white that looks "elegant" and reads badly. */
  --bg:        #fafafc;   /* near-white, a whisper of the brand hue */
  --bg-2:      #f2f2f7;
  --surface:   #ffffff;
  --surface-2: #f4f3fa;
  --ink:       #14121f;   /* near-black, brand-hued — 15.8:1 on --bg */
  --text:      #14121f;
  --muted:     #4a4763;   /* 8.4:1 — still a real reading colour */
  --muted-2:   #6b6885;   /* 5.4:1 — the lightest text we allow anywhere */

  --line:      #e2e1ec;
  --line-2:    #cbc9db;
  --ink-line:  #14121f;

  /* ── Brand ──
     The accent is the focus colour: for a keyboard or eye-tracker user the
     focus ring is the single most important mark on the page, so the brand
     is built around it rather than around a decorative wash. */
  --accent:        #4b3fd1;   /* 7.9:1 on --bg — passes AA as body text */
  --accent-bright: #6355ee;
  --accent-light:  #a89ff2;
  --accent-soft:   #eeecff;
  --accent-soft-2: #dad5ff;

  --brand:         #1c6fa8;   /* VK affordances only — 5.9:1, never decorative */
  --brand-vk:      #1c8fd6;
  --brand-soft:    #e2f1fb;

  /* ── Soft tint bands (toned down — periwinkle family) ── */
  --mint:      #d9f1e6;   /* still used for "free" badge */
  --mint-ink:  #0f7a45;
  --peach:     #fde0d2;
  --peach-ink: #a23708;
  --butter:    #fff1c5;
  --butter-ink:#7a5c00;
  --sky:       #d6efff;
  --sky-ink:   #0a4d8c;
  --rose:      #ffdbe6;
  --rose-ink:  #b0145c;

  --warm:      #ff6b35;
  --warm-soft: #ffd9c2;

  --white: #ffffff;

  /* ── Radii (chunky, playful) ── */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 100px;

  /* ── Type ── */
  --font:    'Manrope', system-ui, sans-serif;
  --reading: 'Atkinson Hyperlegible', 'Manrope', system-ui, sans-serif;
  --display: 'Unbounded', 'Manrope', sans-serif;

  /* ── Motion ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t:    0.25s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

/* long-form reading text → Atkinson Hyperlegible */
.hero-sub, .mission-body p, .lead, .audience-card p, .block-card p,
.sc-desc, .event-desc, .partner-card-body p, .vk-sub, .cta-sub,
.tl-body, .team-sub, .gallery-cap {
  font-family: var(--reading);
}

::selection { background: var(--accent-bright); color: #fff; }

/* ── KEYBOARD FOCUS ── */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  left: 12px; top: -120px;
  z-index: 1000;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 12px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ── LAYOUT ── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 768px) { .container { padding: 0 22px; } }

/* ── HEADER ── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: padding var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}
header.scrolled {
  background: rgba(250,250,252,0.88);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
  padding: 12px 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* ── LOGO ── */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo-mark { width: 38px; height: 32px; flex-shrink: 0; }
.logo-img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border: 2px solid var(--accent);
}
.logo-name {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ── NAV ──
   Scoped to the header. A bare `nav` type selector also captures in-page
   navigation landmarks elsewhere on the site and hides them below 960px. */
header nav { display: flex; align-items: center; gap: 2px; }
header nav a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
/* Two groups, not one undifferentiated row: the first three links move around
   this site, the last two leave it. Weight and colour carry that difference so
   no divider rule is needed. */
header nav a[target="_blank"] {
  font-weight: 500;
  color: var(--muted);
}
header nav a:not([target]) + a[target="_blank"] { margin-left: 12px; }
header nav a:hover,
header nav a:focus-visible,
header nav a.active { color: var(--accent); background: var(--accent-soft); }

.nav-cta {
  margin-left: 6px;
  background: var(--ink) !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--accent) !important; color: #fff !important; }

.lang-switcher {
  display: flex; gap: 2px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: 3px;
  margin-left: 8px;
}
.lang-btn {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  background: none; border: none; cursor: pointer;
  padding: 5px 11px; border-radius: 100px;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.lang-btn.active { color: #fff; background: var(--ink); }
.lang-btn:hover:not(.active) { color: var(--ink); }

/* ── MOBILE MENU ── */
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 8px; cursor: pointer; color: var(--ink);
}
/* The row carries three page links, two outbound links, a full-word
   accessibility control and a language switcher. Below roughly 1080px the
   accessibility label wraps to two lines and the whole bar goes lumpy, so
   the panel takes over well before phone width. */
@media (max-width: 1080px) {
  .menu-toggle { display: flex; align-items: center; }

  /* The panel is a CHILD of the header, so raising the header does nothing:
     the panel's z-index is compared against its siblings inside the header's
     own stacking context. The brand and the close button therefore need to be
     positioned and ranked above it themselves — otherwise the panel paints
     over its own dismiss control and the menu cannot be closed. */
  header { z-index: 300; }
  header .logo,
  header .menu-toggle { position: relative; z-index: 210; }

  /* The panel used to be five identical rows, each boxed by a hairline that
     ran wider than the text inside it, with the whole stack pinned to the top
     and a third of the screen left empty underneath. Rebuilt: the page links
     are the display face at a size that owns the screen, the two outbound
     links sit under them as a quieter pair, and the two controls are anchored
     to the bottom edge so the panel is composed rather than top-heavy. */
  header nav {
    display: none;
    position: fixed;
    inset: 0;
    /* clears the header bar rather than sitting under it */
    padding: 84px 22px calc(22px + env(safe-area-inset-bottom));
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    z-index: 200;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  header nav.open { display: flex; }
  header.scrolled nav { padding-top: 70px; }

  header nav a {
    font-family: var(--display);
    font-size: clamp(26px, 7.6vw, 32px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--ink);
    background: none;
    border: none;
    border-radius: 0;
    /* 44px minimum stays satisfied by the type size alone */
    padding: 14px 0;
  }
  header nav a:hover,
  header nav a:focus-visible { background: none; color: var(--accent); }

  /* Outbound links: quieter, and marked as leaving the site. */
  header nav a[target="_blank"] {
    font-family: var(--font);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    /* 17px of text needs the padding to clear the 44px touch floor on its own */
    padding: 14px 0;
  }
  header nav a[target="_blank"]::after {
    content: '↗';
    margin-left: 7px;
    font-size: 0.9em;
    color: var(--line-2);
  }
  header nav a:not([target]) + a[target="_blank"] {
    /* the desktop rule sets margin-left on this same selector; without the
       reset the first outbound link sits 12px right of everything else */
    margin-left: 0;
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1.5px solid var(--line);
  }

  /* The low-vision toggle is the most important control in this menu for the
     people this site is for. Give it its full label and full width. */
  /* `margin-top: auto` pushes this and everything after it to the bottom of
     the panel, which is what removes the dead third of the screen. Filled
     rather than outlined: for this audience it is the single most important
     control in the menu, so it should not read as the quietest thing on it. */
  /* Not anchored to the bottom edge: pinning it there left a 308px hole in the
     middle of the panel, which reads worse than the same space collected
     underneath one coherent block. */
  header nav .a11y-toggle {
    width: 100%;
    justify-content: center;
    margin: 34px 0 0;
    padding: 16px 18px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--r-md);
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
  header nav .a11y-toggle:hover { background: var(--accent); border-color: var(--accent); }
  header nav .a11y-toggle span { display: inline; }

  .nav-cta { margin-top: 8px; }
  /* left-aligned with the links above it, not floating in the centre */
  .lang-switcher { margin-left: 0; margin-top: 12px; align-self: flex-start; }


}


/* ── OPEN MOBILE MENU ──────────────────────────────────────────────
   `backdrop-filter` on the scrolled header creates a containing block for
   `position: fixed` descendants. The nav panel is a child of <header>, so once
   the user scrolled and the header gained `.scrolled`, the panel's `inset: 0`
   resolved against the HEADER's box instead of the viewport: it collapsed to
   header height and rendered as an empty bar. Opening the menu anywhere except
   the very top of the page produced a blank screen. Dropping the blur while
   the menu is open hands the viewport back as the containing block, and the
   blur is pointless then anyway because the panel covers everything.

   The scroll lock lives here rather than in the 960px block because the
   accessibility size modes force this same menu on wide screens too. */
body.nav-open header.scrolled {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.nav-open { overflow: hidden; }

/* ── EYEBROW ── */
.eyebrow {
  display: block;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

/* ── LINK ARROW (editorial text link) ── */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 0.9375rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ink);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.link-arrow::after {
  content: '→';
  transition: transform var(--t) var(--ease);
}
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ── BUTTONS ──
   Squared off, not pills: at 200%+ zoom a 100px radius eats the label's
   corners, and the low-vision schemes need a hard edge to sit against. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-size: 0.9688rem; font-weight: 700;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  min-height: 48px; padding: 12px 24px; border-radius: var(--r-sm);
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); }

.btn-tg { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-tg:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn-vk { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-vk:hover { background: #14567f; border-color: #14567f; }

/* ── FOOTER ── */
footer {
  border-top: 2px solid var(--ink-line);
  padding: 60px 0;
  margin-top: 0;
  background: var(--bg-2);
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.footer-links { display: flex; gap: 26px; }
.footer-links a {
  font-size: 0.875rem; color: var(--muted); text-decoration: none;
  transition: color var(--t) var(--ease);
}
.footer-links a:hover { color: var(--ink); }

/* Footer links were 22px tall — half the 44px minimum touch target — and sat
   26px apart in one row, so a mis-tap on a phone opens the wrong destination.
   Lives in main.css rather than home.css because every page has this footer,
   and team.html does not load home.css. */
@media (max-width: 600px) {
  .footer-links { gap: 6px 22px; flex-wrap: wrap; }
  .footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* "VK" is 17px of glyph; without a floor its tap area is a sliver */
    min-width: 44px;
  }
}
.footer-copy { font-size: 0.8125rem; color: var(--muted-2); }

/* ── ENTRANCE ──
   One orchestrated moment on load: the headline wipes up from its own baseline,
   the lines under it rise into place. Everything below the fold is simply there
   — no scroll-triggered fades. At 300% zoom you scroll a paragraph at a time,
   and content that fades in as you go is a nuisance, not a delight.

   The resting state of every element here is *visible*. The entrance is a
   keyframe animation with no fill-mode, so before it starts and after it ends
   the element uses its normal, readable style. A renderer that never advances
   animations, a background tab, Reader mode or a print stylesheet all land on
   plain visible content instead of a blank page. main.js also drops
   .js-motion after 2s as a hard backstop. */
.js-motion .reveal { animation: reveal-rise 0.55s var(--ease); }
.js-motion .d1 { animation-duration: 0.62s; }
.js-motion .d2 { animation-duration: 0.70s; }
.js-motion .d3 { animation-duration: 0.78s; }
.js-motion .d4 { animation-duration: 0.86s; }

@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(16px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* Curtain wipe on the two hero headlines — the single bold motion moment. */
.js-motion .hero-title,
.js-motion .chero-title { animation: headline-wipe 0.9s var(--ease); }

@keyframes headline-wipe {
  from { clip-path: inset(0 -4% 112% -4%); }
  to   { clip-path: inset(0 -4% -12% -4%); }
}

/* ── PARALLAX + MAGNETIC (JS-driven, GPU compositing only) ── */
[data-parallax] { will-change: transform; }

/* ── CHIP ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink);
  border: 1.5px solid var(--line-2);
  border-radius: 100px; padding: 7px 15px;
  background: var(--surface);
}
.chip-accent { color: var(--accent); border-color: var(--accent-soft-2); background: var(--accent-soft); }
.chip-warm   { color: var(--warm);   border-color: var(--warm-soft);    background: var(--warm-soft); }