/* ============================================================
   Octomatica design language v2: tokens + base reset.
   Source of truth: the live octomatica.ru (concept.css). Values are
   lifted from it; the dark remap is derived from its dark components.

   Load order: tokens.css -> components.css -> (print.css for offers).
   Copy the fonts/ folder next to this file (Manrope, self-hosted, RU-safe).

   The file has two layers:
     1. BRAND   : the only block you swap to use this language for a client
                  (accent ramp, brand mark). Everything else stays.
     2. LANGUAGE: surfaces, ink, type scale, radii, motion, fields.
   ============================================================ */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── 1. BRAND (swap for a client; keep the names) ── */
  --accent: #0e9f6e;          /* Octomatica emerald: links, focus, small signals */
  --accent-bright: #14b981;   /* primary button fill (dark ink text on it) */
  --accent-deep: #0a7351;     /* accent text on light: eyebrows, active nav */
  --accent-soft: #def3e8;     /* corner washes, receipt glow */
  --accent-faint: #edf8f1;    /* highlighted column, tinted band glow */
  --accent-ink: #0f1613;      /* text on --accent-bright */
  --accent-on-dark: #3fe0a6;  /* accent on the ink field */
  --brand-mark: url("assets/octo-core.svg");            /* mark on light */
  --brand-mark-on-dark: url("assets/octo-core-on-dark.svg"); /* mark on ink / dark */

  /* ── 2. LANGUAGE ── */
  /* surfaces */
  --bg: #fafbfa;              /* page canvas */
  --surface: #fdfefd;         /* raised panel (board, receipt left half) */
  --surface-2: #f1f4f2;       /* tinted band, footer, receipt */
  --ink-field: #17191b;       /* the dark field (ink band, image overlays) */
  --on-ink: #f1f3ee;          /* text on the ink field */
  --on-ink-muted: #cbd0cd;

  /* ink */
  --ink: #0f1613;
  --muted-strong: #424d47;
  --muted: #5e6a63;

  /* hairlines (rules, not boxes) */
  --line: #e7ece9;
  --line-strong: #d6dbd8;

  /* colour fields: the site's colour-blocked panels. Text on them is always --on-field. */
  --field-sand: #f2edcf;  --field-sand-spot: #f4d80e;
  --field-rose: #f3ded9;  --field-rose-spot: #ed8d72;
  --field-sky:  #dce6f4;  --field-sky-spot:  #6284ca;
  --field-mint: #e3f2ea;  --field-mint-spot: #14b981;
  --on-field: #17191b;

  /* data hues (charts only, fixed order) */
  --c-1: #0e9f6e; --c-2: #6284ca; --c-3: #ed8d72; --c-4: #e2b93b; --c-5: #9b7bf0;

  /* type */
  --font: "Manrope", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(52px, 7.4vw, 104px);   /* hero h1 */
  --fs-h2: clamp(42px, 5.4vw, 74px);         /* section heading */
  --fs-h3: clamp(23px, 2.5vw, 32px);         /* item title */
  --fs-num: clamp(56px, 6.4vw, 96px);        /* price / big numeral */
  --fs-lead: clamp(17px, 1.55vw, 21px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;                          /* eyebrow, column labels */
  --tr-display: -0.075em;
  --tr-h2: -0.065em;
  --tr-h3: -0.035em;
  --tr-eyebrow: 0.12em;

  /* shape + depth */
  --radius: 16px;             /* every panel, image, board */
  --radius-sm: 12px;          /* chips, symbol tiles */
  --radius-lg: 22px;          /* brand stamp */
  --shadow: 0 28px 80px rgba(15, 22, 19, 0.09);
  --shadow-soft: 0 12px 38px rgba(15, 22, 19, 0.055);

  /* layout */
  --shell: min(1320px, calc(100vw - 56px));
  --header-height: 72px;
  --section-pad: clamp(64px, 7vw, 104px);

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: light dark;
}

/* ── Dark: one remap. Follows the OS unless the page pins data-theme. ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111416; --surface: #17191b; --surface-2: #1d2123;
    --ink: #f1f3ee; --muted-strong: #cbd0cd; --muted: #a3aba6;
    --line: rgba(241, 243, 238, 0.1); --line-strong: rgba(241, 243, 238, 0.18);
    --accent-deep: #3fe0a6; --accent-soft: rgba(20, 185, 129, 0.2); --accent-faint: rgba(20, 185, 129, 0.09);
    --ink-field: #0b0d0e;
    --field-sand: #aeab95; --field-rose: #afa09c; --field-sky: #9ea6b0; --field-mint: #9fb3a8;
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.4); --shadow-soft: 0 12px 38px rgba(0, 0, 0, 0.3);
    --brand-mark: var(--brand-mark-on-dark);
  }
}
:root[data-theme="dark"] {
  --bg: #111416; --surface: #17191b; --surface-2: #1d2123;
  --ink: #f1f3ee; --muted-strong: #cbd0cd; --muted: #a3aba6;
  --line: rgba(241, 243, 238, 0.1); --line-strong: rgba(241, 243, 238, 0.18);
  --accent-deep: #3fe0a6; --accent-soft: rgba(20, 185, 129, 0.2); --accent-faint: rgba(20, 185, 129, 0.09);
  --ink-field: #0b0d0e;
  --field-sand: #aeab95; --field-rose: #afa09c; --field-sky: #9ea6b0; --field-mint: #9fb3a8;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.4); --shadow-soft: 0 12px 38px rgba(0, 0, 0, 0.3);
  --brand-mark: var(--brand-mark-on-dark);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (max-width: 1100px) { :root { --shell: min(100% - 40px, 980px); } }
@media (max-width: 760px) { :root { --shell: calc(100% - 32px); --header-height: 64px; } }

/* ── Base reset. Without the margin reset the browser's 8px body margin
      draws a white frame around the header and the hero. ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent-soft); color: var(--ink); }
main [id] { scroll-margin-top: calc(var(--header-height) + 24px); }