/* Сайт ai-toolbox.ru, стиль «Чертёж» (вариант A, утверждён Александром 04.11.2026).
   Цвета - только токены AI Toolbox, кегли 12-40 + 56/72 для первого экрана и чисел-итогов (rules/design/brand.md). */
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/fonts/Unbounded.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --bg: #f8fafc; --bg2: #f0f4f8; --white: #ffffff; --text: #1e293b; --muted: #64748b; --border: #e2e8f0;
  --navy: #1e3a5f; --navy-dark: #152d4a; --orange: #f97316; --orange-light: #fb923c;
  --line: rgba(255, 255, 255, 0.07); --line2: rgba(255, 255, 255, 0.14);
  --ink: rgba(30, 58, 95, 0.07);
  --r-card: 16px; --r-btn: 12px; --r-sm: 8px;
  --shadow: 0 8px 24px rgba(21, 45, 74, 0.10);
  --wide: 1120px; --col: 720px; --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 "Montserrat", sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
h1, h2, h3 { font-family: "Unbounded", sans-serif; color: var(--navy); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 16px; text-wrap: balance; }
h2 { font-size: 40px; } h3 { font-size: 20px; }
p { margin: 0 0 16px; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--orange); }

/* ---------- калька: сетка на тёмно-синем и на светлом ---------- */
.dark { background-color: var(--navy); color: var(--white);
  background-image: linear-gradient(var(--line2) 1px, transparent 1px), linear-gradient(90deg, var(--line2) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; background-position: -1px -1px; }
.dark h1, .dark h2, .dark h3 { color: var(--white); }
.paper { background-color: var(--bg);
  background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 24px 24px; }

/* метка раздела: «лист 01» как в штампе чертежа */
.sheet-no { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.sheet-no::before { content: ""; width: 24px; height: 2px; background: var(--orange); }
.dark .sheet-no { color: rgba(255, 255, 255, 0.8); }

/* ---------- кнопки ---------- */
.btn { display: inline-block; font: 800 16px/1.2 "Montserrat", sans-serif; text-decoration: none; text-align: center; border-radius: var(--r-btn); padding: 16px 28px; border: 0; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange); color: var(--navy-dark); }
.btn-primary:hover { background: var(--orange-light); }
.btn-outline { box-shadow: inset 0 0 0 2px var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.dark .btn-outline { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); color: var(--white); }
.dark .btn-outline:hover { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 2px var(--white); }
.btn-sm { font-size: 14px; padding: 12px 20px; }

/* ---------- шапка ---------- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.logo { font: 700 14px "Unbounded", sans-serif; letter-spacing: 0.08em; color: var(--white); text-decoration: none; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a:not(.btn) { color: rgba(255, 255, 255, 0.82); font-size: 14px; font-weight: 600; text-decoration: none; }
.nav a:not(.btn):hover, .nav a[aria-current] { color: var(--white); text-decoration: underline; text-underline-offset: 6px; }

/* ---------- размерная линия: засечки по краям и подпись по центру ---------- */
.dim { position: relative; height: 24px; color: var(--orange-light); font-size: 12px; font-weight: 700; }
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: currentColor; }
.dim i { position: absolute; top: 4px; width: 1px; height: 16px; background: currentColor; }
.dim i:first-child { left: 0; } .dim i:last-child { right: 0; }
.dim span { position: relative; display: table; margin: 0 auto; padding: 0 8px; background: var(--navy); line-height: 24px; }

/* выноска: тонкая линия к числу и подпись */
.callout { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.callout::before { content: ""; width: 32px; height: 1px; background: var(--orange); }
.dark .callout { color: rgba(255, 255, 255, 0.8); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

footer { padding: 40px 0; font-size: 14px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--navy); }

@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  h2 { font-size: 28px; }
  .btn { width: 100%; }
  .nav { gap: 16px; }
  .nav .hide-m { display: none; }
}
/* ---------- движение при прокрутке (motion.js; без JS и при reduced-motion не включается) ---------- */
.mo .mw { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.12em 0 0.1em; margin: -0.12em 0 -0.1em; }
.mo .mwi { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); will-change: transform; }
.mo .m-words.in .mwi { transform: none; }
.mo .m-up { opacity: 0; transform: translateY(24px); filter: blur(4px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.mo .m-up.in { opacity: 1; transform: none; filter: none; }
.mo .m-li { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.mo .m-up.in .m-li, .mo .in > .m-li { opacity: 1; transform: none; }
.mo .reveal { opacity: 1; transform: none; }
.mo .dim::before { transform: scaleX(0); transition: transform 1.4s var(--ease) .3s; }
.mo .in .dim::before { transform: scaleX(1); }
.mo .m-scrub .ms { opacity: 0.2; transition: opacity .4s var(--ease); }
.mo .m-scrub .ms.on { opacity: 1; }
.mo .m-scrub { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: -0.015em; color: var(--navy); max-width: 720px; margin-top: 8px; }
.mo .dark .m-scrub { color: var(--white); }
@media (max-width: 600px) { .mo .m-scrub { font-size: 16px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0s !important; }
}