/* =========================================================================
   Аспро.Agile — направление A «Спринт-план»
   Линза: high-end-visual-design · палитра залочена брендом Аспро.Cloud
   Body: Inter (self-hosted) · Display: Unbounded (self-hosted, кириллица)
   Все токены, контраст и мотивация — в манифест.md
   ========================================================================= */

/* ---------- Шрифты (self-hosted, subset cyrillic + latin) ---------- */
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/unbounded-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/unbounded-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+2000-206F,U+2122,U+2191,U+2192,U+2197;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/unbounded-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/unbounded-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+2000-206F,U+2122,U+2191,U+2192,U+2197;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/unbounded-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/unbounded-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+2000-206F,U+2122,U+2191,U+2192,U+2197;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+2000-206F,U+2122;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+2000-206F,U+2122;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+2000-206F,U+2122;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/inter-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/inter-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+2000-206F,U+2122;
}

/* ---------- Токены ---------- */
:root {
  /* Акцент (бренд Аспро.Cloud, залочено) */
  --blue: #3761E9;          /* доминанта акцента: CTA, ссылки, брендинг */
  --blue-hover: #1C4ADE;    /* hover основной кнопки */
  --blue-ink: #0F1B4C;      /* глубокий синий: тёмные поверхности, инверсия (bucket синего) */
  --blue-10: rgba(55, 97, 233, 0.10);   /* плашки на светлом */
  --blue-16: rgba(55, 97, 233, 0.16);   /* hover плашки / hairline */
  --green: #35D3AC;         /* вторичный акцент: статус «готово», позитив */
  --pink: #FF7188;          /* точечный акцент: одна метка (сдержанно) */

  /* Нейтральные (тёплого-нейтрального нет в бренде — держим сине-серую шкалу Cloud) */
  --ink: #1B1D26;           /* заголовки */
  --text: #333338;          /* основной текст */
  --muted: #5B6272;         /* вторичный текст на светлом */
  --muted-dark: #C8CFDF;    /* текст на тёмном (вторичный, APCA Lc≥75 на --blue-ink) */
  --divider: #E6E9F2;
  --bg: #F8F9FD;            /* основной фон (не чистый белый) */
  --surface: #FFFFFF;       /* карточки */
  --surface-2: #F2F4FB;     /* утопленные плашки */

  /* Типографика — модульная шкала ×1.25 (major third), база 18px */
  --step--1: 0.889rem;      /* 14.2px — подписи */
  --step-0: 1rem;           /* 18px база body (html font-size 112.5%) */
  --step-1: 1.25rem;        /* 22.5px */
  --step-2: 1.5625rem;      /* 28.1px */
  --step-3: 1.953rem;       /* 35.2px */
  --step-4: 2.441rem;       /* 43.9px */
  --step-5: 3.052rem;       /* 54.9px */

  /* Радиус — единая шкала (Cloud radius 8px как база) */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 100px;

  /* Пространство — 8pt-сетка */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;

  /* Тень — двухуровневая, оттенок согласован с сине-серым фоном */
  --shadow-1: 0 1px 2px rgba(38, 38, 62, 0.06);
  --shadow-2: 0 1px 2px rgba(38, 38, 62, 0.05), 0 16px 32px -12px rgba(38, 38, 62, 0.16);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

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

html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-family: "Unbounded", "Inter", sans-serif;
  color: var(--ink);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--blue-hover); text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-family: "Inter", sans-serif;
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: var(--sp-2); top: -60px;
  background: var(--blue-ink); color: #fff; padding: 12px 20px;
  border-radius: var(--r-sm); z-index: 100; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: "Inter", sans-serif; font-size: var(--step-0); font-weight: 600;
  padding: 12px 20px 12px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px;
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  transition: transform 0.4s var(--ease);
}
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-1); }
.btn--primary .btn__icon { background: rgba(255,255,255,0.16); }
.btn--primary:hover { background: var(--blue-hover); box-shadow: var(--shadow-2); }
.btn--primary:hover .btn__icon { transform: translate(3px, -3px); }
.btn--ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--divider); box-shadow: var(--shadow-1);
}
.btn--ghost .btn__icon { background: var(--blue-10); color: var(--blue); }
.btn--ghost:hover { border-color: var(--blue-16); }
.btn--ghost:hover .btn__icon { transform: translate(3px, -3px); }
.btn--sm { padding: 8px 16px 8px 20px; min-height: 40px; font-size: var(--step--1); }
.btn--sm .btn__icon { width: 26px; height: 26px; }
.btn__icon svg { width: 16px; height: 16px; }

/* ---------- Хедер / плавающий остров ---------- */
.site-header { position: sticky; top: 0; z-index: 40; padding-top: var(--sp-3); }
.nav {
  display: flex; align-items: center; gap: var(--sp-3);
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  padding: 8px 12px 8px 24px;
  box-shadow: var(--shadow-1);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.03em; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.nav__links { display: flex; gap: var(--sp-3); margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav__links a { color: var(--text); font-weight: 500; font-size: var(--step--1); padding: 8px 4px; position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 2px;
  background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 8px; }
.nav__links-cta { display: none; }
.nav__login { color: var(--ink); font-weight: 600; font-size: var(--step--1); padding: 12px; }

.nav-toggle { display: none; }

/* ---------- HERO ---------- */
.hero { padding-top: var(--sp-7); padding-bottom: var(--sp-6); overflow: clip; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-6);
  align-items: center;
}
.hero__copy, .board { min-width: 0; }  /* позволяет грид-элементам сжиматься (fix grid blowout) */
.hero__title {
  font-size: clamp(2.5rem, 6.2vw, var(--step-5));
  font-weight: 700;
  margin-top: var(--sp-3);
}
.hero__title .accent { color: var(--blue); }
.hero__lead {
  margin-top: var(--sp-3);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text);
  max-width: 34ch;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.hero__note { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--muted); }

/* сигнатура: миниатюрная сцена «доска-спринт» из мира продукта */
.board {
  position: relative;
  background: var(--blue-ink);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--shadow-2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.board::before {
  content: "Спринт №14 · доска команды";
  position: absolute; top: calc(-1 * var(--sp-3) - 8px); left: 6px;
  font-size: var(--step--1); color: var(--muted); font-weight: 500;
}
.board__col { display: flex; flex-direction: column; gap: var(--sp-1); }
.board__label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted-dark); padding: 0 4px 4px; display: flex; align-items: center; gap: 6px;
}
.board__label .swatch { width: 8px; height: 8px; border-radius: var(--r-xs); }
.swatch--todo { background: var(--muted-dark); }
.swatch--doing { background: var(--blue); }
.swatch--done { background: var(--green); }
.ticket {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-sm);
  padding: 12px;
  color: #EEF1FB;
  font-size: 0.82rem; line-height: 1.35;
}
.ticket__meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tag {
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: var(--r-pill);
}
.tag--design { background: var(--blue-16); color: #BCC9F7; }
.tag--dev { background: rgba(53,211,172,0.18); color: #9BEAD3; }
.tag--review { background: rgba(255,113,136,0.18); color: #FFC0CA; }
.ticket--done { opacity: 0.86; }
.ticket--done .ticket__title { text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.4); }

/* ---------- Бренд-полоса клиентов (текстом — лого не даны) ---------- */
.trust { padding-block: var(--sp-5); border-top: 1px solid var(--divider); }
.trust__label { text-align: center; color: var(--muted); font-size: var(--step--1); }
.trust__row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-3);
}
.trust__name { font-family: "Unbounded", sans-serif; font-weight: 600; color: var(--muted); font-size: var(--step-1); letter-spacing: -0.02em; }

/* ---------- РАЗДЕЛ ФИЧ — «доска возможностей» ---------- */
.features { padding-block: var(--sp-8); }
.section-head { max-width: 60ch; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, var(--step-4)); margin-top: var(--sp-2); }
.section-head p { margin-top: var(--sp-3); font-size: var(--step-1); color: var(--muted); }

.feat-grid {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
}

/* Двойной кант: внешняя оболочка + ядро, концентрические радиусы */
.card {
  grid-column: span 2;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: 8px;
  box-shadow: var(--shadow-1);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card__core {
  height: 100%;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.card__icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--blue-10); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
}
.card__icon svg { width: 22px; height: 22px; }
.card__index {
  font-family: "Unbounded", sans-serif; font-size: var(--step--1);
  color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto;
}
.card__top { display: flex; align-items: center; gap: var(--sp-2); }
.card h3 { font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.15; }
.card p { color: var(--muted); font-size: 0.955rem; line-height: 1.55; }

/* Крупная карточка-герой раздела */
.card--wide { grid-column: span 4; }
.card--wide .card__core { background: var(--blue-ink); }
.card--wide h3, .card--wide .card__index { color: #fff; }
.card--wide p { color: var(--muted-dark); font-size: var(--step-0); max-width: 46ch; }
.card--wide .card__icon { background: rgba(255,255,255,0.10); color: var(--green); }
.card--wide .card__status {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--step--1); font-weight: 600; color: var(--green);
}
.card--wide .card__status .swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--green); }

/* Карточка со статусной меткой (одна розовая — точечно) */
.card__flag {
  margin-left: auto; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #C8324B; background: rgba(255,113,136,0.14);
  padding: 4px 8px; border-radius: var(--r-pill);
}

/* ---------- Футер ---------- */
.site-footer { background: var(--blue-ink); color: var(--muted-dark); padding-block: var(--sp-6) var(--sp-4); margin-top: var(--sp-7); }
.site-footer a { color: #EEF1FB; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-4); }
.footer__brand .brand { color: #fff; }
.footer__brand p { margin-top: var(--sp-2); font-size: var(--step--1); max-width: 36ch; }
.footer__col h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-dark); margin: 0 0 var(--sp-2); font-family: "Inter", sans-serif; font-weight: 600; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 0.95rem; }
.footer__legal { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,0.10); font-size: var(--step--1); line-height: 1.6; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); justify-content: space-between; }

/* ---------- Reveal-анимация ----------
   Базовое состояние — ВИДИМО (no-JS, поисковики, headless показывают контент).
   JS добавляет класс .js на <html>: только тогда элементы прячутся и проявляются
   по IntersectionObserver. Один оркестрованный момент — вход секции. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .btn__icon, .card, .nav__links a::after { transition: none !important; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .board { order: -1; }
  .card--wide { grid-column: span 6; }
  .card { grid-column: span 3; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* Навигация сворачивается в бургер раньше — иначе остров-навигация переполняет планшет */
@media (max-width: 900px) {
  .nav { position: relative; }
  .nav__links { display: none; }
  .nav__links--open {
    position: absolute; left: var(--sp-3); right: var(--sp-3); top: calc(100% + 8px);
    flex-direction: column; gap: var(--sp-1); margin-left: 0;
    background: var(--surface); border: 1px solid var(--divider);
    border-radius: var(--r-md); padding: var(--sp-2); box-shadow: var(--shadow-2);
  }
  .nav__links--open a { padding: 12px; min-height: 44px; display: flex; align-items: center; }
  .nav__links--open .nav__links-cta { display: block; }
  .nav__links--open .nav__links-cta:first-of-type { border-top: 1px solid var(--divider); margin-top: 4px; padding-top: 4px; }
  .nav__links--open .nav__links-cta a { color: var(--blue); font-weight: 600; }
  .nav__login { display: none; }
  .nav__cta { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-pill);
    background: var(--blue-10); border: none; cursor: pointer; color: var(--blue);
  }
  .nav-toggle svg { width: 22px; height: 22px; }
}
@media (max-width: 720px) {
  .hero { padding-top: var(--sp-5); }
  .features { padding-block: var(--sp-6); }
  .feat-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .card, .card--wide { grid-column: span 1; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .board { grid-template-columns: 1fr; }
  .board__col { flex-direction: row; flex-wrap: wrap; }
  .board__col .board__label { width: 100%; }
  .ticket { flex: 1 1 45%; }
}
@media (max-width: 400px) {
  .board__col { flex-direction: column; }
  .ticket { flex: 1 1 auto; }
}