/* ============================================
   clck — base: reset, типографика, утилиты
   ============================================ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  color: var(--color-ink);
  line-height: 1.08;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-4xl); letter-spacing: -.02em; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-md); letter-spacing: .02em; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--color-primary); color: var(--color-on-primary); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

[id] { scroll-margin-top: calc(var(--header-height) + 16px); }

/* Утилиты */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--font-mono); }
.text-muted { color: var(--color-text-muted); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border: 2px solid currentColor;
  flex: none;
}

.section { padding: 112px 0; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-title { margin-bottom: 14px; }
.section-sub { font-size: var(--fs-lg); }

/* Инвертированные секции */
.section--ink { background: var(--color-ink); color: var(--color-text-invert); }
.section--ink h2, .section--ink h3 { color: var(--color-paper); }
.section--ink .eyebrow { color: var(--color-paper); }
.section--ink .section-sub { color: var(--color-text-invert-muted); }
.section--ink .card h3 { color: var(--color-ink); }

.section--brand {
  background: var(--color-primary);
  color: var(--color-text-invert);
  border-top: var(--border-w-thick) solid var(--color-ink);
  border-bottom: var(--border-w-thick) solid var(--color-ink);
}
.section--brand h2 { color: var(--color-paper); }
.section--brand .eyebrow { color: var(--color-paper); }
.section--brand .section-sub { color: var(--color-text-invert-muted); }

/* Reveal: скрытие включается только при html.js — без JS контент виден */
html.js [data-reveal] { opacity: 0; }
html.js [data-reveal].is-visible { opacity: 1; animation: reveal-rise .5s ease; }
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

body.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; animation: none; }
  .marquee__track { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 40px; }
  h1 { font-size: clamp(32px, 9vw, var(--fs-4xl)); }
  h2 { font-size: clamp(26px, 5.4vw, var(--fs-3xl)); }
  .container { padding: 0 18px; }
}