/* base.css — как у nolejje: фон с красными радиальными подпалинами,
   JBM повсюду, Unbounded заголовки. */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-behavior: smooth; }
  img, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  dialog { border: none; padding: 0; color: inherit; }
}

@layer base {
  html { color-scheme: dark; }

  body {
    margin: 0;
    background:
      radial-gradient(circle at top right, rgba(255, 51, 85, 0.12), transparent 24%),
      radial-gradient(circle at left bottom, rgba(255, 51, 85, 0.08), transparent 22%),
      var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
  }

  ::selection { background: var(--accent); color: #fff; }
  h1, h2 { text-wrap: balance; letter-spacing: -.02em; overflow-wrap: anywhere; }
  p { text-wrap: pretty; max-width: 62ch; }
  a { color: inherit; text-decoration: none; }
  a:hover, a:focus, a:active { text-decoration: none; }

  .container { width: min(1320px, calc(100% - 4vw)); margin-inline: auto; }
  .section { padding-block: clamp(48px, 8vw, 160px) 0; position: relative; }

  /* заголовки секций — ровно в манере nolejje (.intro-*) */
  .intro-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); color: var(--accent);
    letter-spacing: 2px; font-size: 13px;
  }
  .intro-title { margin-top: 24px; font-family: var(--font-display); font-size: var(--h-big); font-weight: 700; line-height: 1.1; color: #fff; max-width: 900px; }
  .intro-text { margin-top: 28px; max-width: 700px; font-size: var(--t-body); line-height: 1.9; color: var(--muted); }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  .skip-link {
    position: fixed; top: -52px; left: 12px; z-index: 100;
    background: var(--accent); color: #fff; padding: 12px 20px;
    border-radius: var(--r-chip); text-decoration: none;
    font-family: var(--font-body); transition: top var(--dur-m) var(--ease-decel);
  }
  .skip-link:focus { top: 12px; }

  .mono-caps { font-family: var(--font-body); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
  .num { font-variant-numeric: tabular-nums; }

  /* скролл-фрейм */
  .scroll-space { display: none; }
  body.js-smooth .scroll-space { display: block; }
  .scroll-content { position: relative; }
  body.js-smooth .scroll-content { position: fixed; inset: 0 auto auto 0; width: 100%; will-change: transform; }
}