/* Base styles and the shared components: container, chips, buttons, the
   Kriptaz bar, the sticky header and the dark band under it (pixel mosaic),
   the mobile menu, section labels, the footer and the cookie notice. Pages
   only add their own section styles on top. The reference language: square
   corners, 1px lines, no shadows or gradients, Geist with Geist Mono labels. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
/* Room at the end of the page for the cookie notice while it shows */
body { padding-bottom: var(--consent-height, 0px); }
html {
  background: var(--color-background);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* No double-tap zoom on phones; pinch zoom stays available. */
  touch-action: manipulation;
  /* No scrollbars (owner, 2026-10-15): the page still scrolls by wheel,
     touch and keyboard, the wheel with momentum (smooth-scroll.js). */
  scrollbar-width: none;
  /* Jumps and focus stop below the sticky header strip and above the
     cookie notice (--consent-height, set by components.js while it shows). */
  scroll-padding-top: var(--chip-height);
  scroll-padding-bottom: var(--consent-height, 0px);
}
html::-webkit-scrollbar, .site-menu::-webkit-scrollbar { display: none; }
/* English visitors: hidden until i18n.js has put the English text in. */
.i18n-wait body { visibility: hidden; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--color-text-primary);
  background: var(--color-background);
  font: var(--type-body-01);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
main { flex: 1; display: block; }
img { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; touch-action: manipulation; }
::selection { background: var(--color-accent); color: var(--color-text-on-color); }
/* Focus: a 2px accent outline just inside the edge (white on the dark band). */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* The site's own links not linked yet (API, Launch app, the home page's
   buttons) are visible but lead nowhere; they still show the pointer, as
   every link and button does. Links to other sites end with a small ↗. */
:where(a[aria-disabled="true"], a[target="_blank"]) { color: inherit; text-decoration: none; }
.icon-external { width: 10px; height: 10px; margin-left: 4px; vertical-align: -0.05em; }
a, button, [role="button"] { cursor: pointer; }
button:disabled { cursor: default; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mono caption (footer-style meta line) */
.mono-caption { font: var(--type-mono-caption); letter-spacing: var(--tracking-mono); text-transform: uppercase; }

/* === Chip: the reference's top navigation. A white box with a 1px line and a
   mono uppercase label, one cell tall (so every chip in the header strip,
   Launch app included, has the same height). Neighbours in a .chip-row share
   one line. */
.chip {
  --color-focus: var(--color-accent);
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--chip-height);
  padding: 0 10px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-background);
  color: var(--color-text-primary);
  font: var(--type-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast-01) var(--ease-standard);
}
.chip:hover { background: var(--color-layer-hover); }
.chip:focus-visible { z-index: 2; box-shadow: inset 0 0 0 3px var(--color-focus-inset); }
/* Pressed (the language in use) or the page you are on (Blog, Community):
   the accent, as every selected state */
.chip:is([aria-pressed="true"], [aria-current="page"]) {
  z-index: 1;
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-color);
}
.chip:is([aria-pressed="true"], [aria-current="page"]):hover { background: var(--color-accent-hover); }
/* The logo: the white full logo (mark and "pay") on the dark strip, linked
   to the home page. A chip as tall as the others, with no white fill: the
   strip's own color, its grid hidden behind it, the strip's focus ring. The
   logo is 20px tall, 24px from 1024px. */
.chip-logo {
  --color-focus: var(--color-shell-focus);
  --color-focus-inset: var(--color-shell);
  --logo-height: 20px;
  padding: 0 14px;
  border-color: var(--color-shell-grid);
  background: var(--color-shell);
  color: var(--color-shell-text);
}
.chip-logo:hover { background: var(--color-shell-grid); }
.chip-logo .logo { width: calc(var(--logo-height) * 3837.21 / 1080.69); height: var(--logo-height); }
.chip-row { display: flex; }
.chip-row > * + * { margin-left: -1px; }

/* === Buttons: 48px, mono uppercase label at the right, a small mark at the
   left. Primary is black with a white square; tertiary is white with only an
   ink bottom line and a play triangle (the reference's GET STARTED and
   WATCH DEMO). */
.btn {
  --color-focus: var(--color-accent);
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-07);
  min-height: 48px;
  min-width: 13.5rem;
  padding: 0 var(--spacing-05);
  border: 0;
  font: var(--type-mono-button);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast-01) var(--ease-standard);
}
.btn::before { content: ""; flex-shrink: 0; }
.btn:focus-visible { box-shadow: inset 0 0 0 3px var(--color-focus-inset); }
.btn-primary { background: var(--color-button-primary); color: var(--color-button-primary-text); }
.btn-primary::before { width: 6px; height: 6px; background: currentColor; }
.btn-primary:hover { background: var(--color-button-primary-hover); }
.btn-primary:active { background: var(--color-button-primary-active); }
.btn-tertiary {
  background: var(--color-background);
  color: var(--color-button-tertiary);
  box-shadow: inset 0 -1px 0 var(--color-button-tertiary);
}
.btn-tertiary::before {
  width: 8px;
  height: 9px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9'%3E%3Cpath d='M.5.87v7.26L7 4.5z' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-tertiary:hover { background: var(--color-button-tertiary-hover); }
.btn-tertiary:active { background: var(--color-button-tertiary-active); }
.btn-tertiary:focus-visible { box-shadow: inset 0 -1px 0 var(--color-button-tertiary); }

/* === The top of every page (components.js): the Kriptaz bar, the header
   strip that sticks to the top of the screen, and the dark band under it.
   Strip and band share one square grid of --band-cell (lines on the last
   pixel of each cell), so the band reads as the strip going on; on it
   assets/js/mosaic.js types AZN, USDT and BUSINESS in blue pixels, one cell
   per pixel. The strip is one chip tall: one cell from 1280px, two of the
   finer 19px grid below that, where the words still fit. === */
site-header {
  --band-cell: var(--cell);
  --rows: 9;
  display: contents;
}

/* The bar above the header (from the operator panel, components.js): mono
   caps on the accent, the link in the middle, × at the right end. A text too
   long for the line ends in "…"; a bar without a link is the same text,
   without the hover. */
.topbar {
  --color-focus: var(--color-text-on-color);
  --color-focus-inset: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-on-color);
}
/* Clear of × on both sides, so the text stays centred */
.topbar-inner { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; padding-inline: calc(var(--gutter) + 24px); }
.topbar-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  padding: 0 var(--spacing-05);
  font: var(--type-mono-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--duration-fast-01) var(--ease-standard);
}
a.topbar-link:hover { background: var(--color-accent-hover); }
.topbar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-link .icon-external { width: 12px; height: 12px; margin-left: 6px; vertical-align: 0; }
.topbar-close {
  position: absolute;
  top: 0;
  right: calc(var(--gutter) - 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  transition: background-color var(--duration-fast-01) var(--ease-standard);
}
.topbar-close:hover { background: var(--color-accent-hover); }

.band-bar, .band {
  background-color: var(--color-shell);
  background-image:
    linear-gradient(to right, var(--color-shell-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-shell-grid) 1px, transparent 1px);
  background-size: var(--band-cell) var(--band-cell);
  background-position: -1px -1px;
  color: var(--color-shell-text);
}
.band-bar {
  --color-focus: var(--color-shell-focus);
  --color-focus-inset: var(--color-shell);
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--chip-height);
}
.band { position: relative; height: calc(var(--band-cell) * var(--rows)); overflow: hidden; }
.mosaic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.band-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-04); height: 100%; }
.band-nav { display: flex; align-items: flex-start; min-width: 0; }
.band-actions { display: flex; flex-shrink: 0; align-items: flex-start; gap: var(--spacing-03); }
.launch { padding: 0 14px; gap: 10px; }
.menu-toggle { display: none; }
.menu-toggle .icon-close, .menu-open .menu-toggle .icon-menu { display: none; }
.menu-open .menu-toggle .icon-close { display: block; }

/* Skip to content: the first Tab stop, shown only while focused, at the top left of the page */
.skip-link {
  --color-focus: var(--color-accent);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--spacing-05);
  background: var(--color-background);
  color: var(--color-text-primary);
  font: var(--type-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.skip-link:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
/* The skip link's target: focused as a whole, so no outline */
main[tabindex="-1"]:focus { outline: none; }

/* === Mobile menu (below 900px): a white panel under the header that slides
   in from the right, with big numbered rows, as in the app, then the
   language and the legal links; each row comes in from above, one after
   another (--i, set by components.js). The rest of the page is inert
   meanwhile. === */
.site-menu {
  scrollbar-width: none;
  position: fixed;
  top: var(--menu-top, var(--chip-height));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: max(var(--spacing-05), env(safe-area-inset-bottom));
  background: var(--color-background);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--duration-slow-01) var(--ease-exit), visibility 0s linear var(--duration-slow-01);
}
.menu-open .site-menu {
  visibility: visible;
  transform: none;
  transition: transform var(--duration-slow-01) var(--ease-entrance), visibility 0s;
}
.site-menu [style*="--i"] {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--duration-fast-02) var(--ease-standard), transform var(--duration-fast-02) var(--ease-standard);
}
.menu-open .site-menu [style*="--i"] {
  opacity: 1;
  transform: none;
  transition-duration: var(--duration-moderate-02);
  transition-delay: calc(120ms + var(--i) * 55ms);
}
body.menu-open { overflow: hidden; }
.site-menu-list { margin-top: var(--spacing-07); border-top: 1px solid var(--color-border-subtle); }
.site-menu-list li { border-bottom: 1px solid var(--color-border-subtle); }
.site-menu-list a {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-07);
  padding: var(--spacing-05) var(--gutter);
  font: 400 22px/28px var(--font-sans);
  letter-spacing: -0.02em;
}
.site-menu-list a::before {
  content: attr(data-n);
  content: attr(data-n) / "";
  min-width: 1.5rem;
  color: var(--color-text-helper);
  font: var(--type-mono-label);
  letter-spacing: var(--tracking-mono);
}
.site-menu-group { margin-top: var(--spacing-08); padding: 0 var(--gutter); }
.menu-lang { margin-top: var(--spacing-05); }
.menu-lang .chip { min-width: 56px; }
.site-menu-legal { display: grid; gap: var(--spacing-05); margin-top: var(--spacing-05); }
.site-menu-legal a { font: var(--type-body-02); color: var(--color-text-secondary); transition: color var(--duration-fast-01) var(--ease-standard); }
.site-menu-legal a:hover { color: var(--color-text-primary); }
.site-menu-copy { margin-top: auto; padding: var(--spacing-08) var(--gutter) 0; color: var(--color-text-helper); }

/* The rows that lead somewhere (Blog, Community), as in the app's menu: a
   light hover; the page you are on in the accent, with a 3px bar at the
   left. */
.site-menu-list a { position: relative; color: inherit; text-decoration: none; transition: background-color var(--duration-fast-01) var(--ease-standard); }
.site-menu-list a[href]:hover { background: var(--color-layer-hover); }
.site-menu-list a[aria-current="page"], .site-menu-list a[aria-current="page"]::before { color: var(--color-accent); }
.site-menu-list a[aria-current="page"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--color-accent); }

/* === Section label "[N.01/03] —— > LABEL ———" and slash heading === */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-04);
  color: var(--color-text-helper);
  font: var(--type-mono-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.section-label::after { content: ""; flex: 1 1 0; min-width: 1rem; height: 1px; background: var(--color-border-subtle); }
.section-label .n { flex-shrink: 0; }
.section-label .n span { color: var(--color-text-placeholder); }
.section-label .rule { flex-shrink: 0; width: 24px; height: 1px; background: var(--color-border-strong); }
.slash-heading {
  font-size: var(--text-section);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
.slash-heading::before { content: "/\00a0"; content: "/\00a0" / ""; color: var(--color-text-decor); font-weight: 300; }
.slash-heading::after { content: "\00a0/"; content: "\00a0/" / ""; color: var(--color-text-decor); font-weight: 300; }
/* Typing (assets/js/typewriter.js): the text still to come is in the page but
   transparent, and a block caret of no width rides on the typed end. The
   caret is an empty inline whose padding is taken back by a negative margin:
   it takes no room and no part in line breaking, so lines never break
   differently while it moves. */
.tw-wait, .tw-wait *, .tw-off { color: transparent !important; }
.tw-caret { margin: 0 calc(-0.6em - 1px) 0 1px; padding-right: 0.6em; background: var(--color-accent); }
/* "// 001" in a card's top-right corner */
.card-index { color: var(--color-text-secondary); font: var(--type-mono-label); letter-spacing: var(--tracking-mono); white-space: nowrap; }
.card-index::before { content: "//\00a0"; content: "//\00a0" / ""; color: var(--color-text-decor); }

/* === Footer: one mono line. The app and the operator panel have none; the
   website keeps it for the legal links and the copyright. === */
site-footer { display: block; }
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-06);
  padding: var(--spacing-06) 0;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-helper);
  font: var(--type-mono-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--spacing-02) var(--spacing-06); }
.site-footer a { color: var(--color-text-secondary); transition: color var(--duration-fast-01) var(--ease-standard); }
.site-footer a:hover { color: var(--color-text-primary); }

/* === Cookie notice (components.js): a white box at the bottom left, boxed
   by the 1px line, with the section label, a short title, the text, the two
   choices and the privacy policy; on phones and short screens a sheet along
   the bottom edge. It fades in once, a moment after the page paints, and
   out when a choice is made. === */
site-consent {
  position: fixed;
  bottom: var(--gutter);
  left: var(--gutter);
  z-index: 15;
  width: min(440px, calc(100% - 2 * var(--gutter)));
  pointer-events: none;
}
.consent {
  display: grid;
  gap: var(--spacing-04);
  padding: var(--spacing-06);
  border: 1px solid var(--color-border-strong);
  background: var(--color-background);
  color: var(--color-text-primary);
  opacity: 0;
  transition: opacity var(--duration-moderate-02) var(--ease-standard);
}
site-consent.is-shown { pointer-events: auto; }
site-consent.is-shown .consent { opacity: 1; }
.consent-title { font: var(--type-heading-03); letter-spacing: -0.02em; }
.consent-text { color: var(--color-text-secondary); font: var(--type-body-01); }
/* Side by side; one under the other when the labels do not fit */
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-03); margin-top: var(--spacing-03); }
.consent-actions .btn { flex: 1 0 auto; min-width: 0; gap: var(--spacing-06); }
.consent-link {
  justify-self: start;
  color: var(--color-text-helper);
  font: var(--type-mono-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  transition: color var(--duration-fast-01) var(--ease-standard);
}
.consent-link:hover { color: var(--color-text-primary); }

/* Small laptops and tablets: half cells, so BUSINESS fits too */
@media (max-width: 1279px) {
  site-header { --band-cell: 19px; --rows: 18; }
}
/* Tablets and phones: the logo at the left; the other links move into the
   menu, whose chip joins Launch app at the right. */
@media (max-width: 899px) {
  .band-nav .nav-extra { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (min-width: 1024px) {
  .chip-logo { --logo-height: 24px; padding: 0 16px; }
}
/* Phones: a lower band, the language moves into the menu, and the cookie
   notice takes the screen's width. */
@media (max-width: 639px) {
  site-header { --rows: 14; }
  .band-lang { display: none; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: var(--spacing-04); }
  .topbar-inner { justify-content: flex-start; padding: 0 40px 0 var(--gutter); }
  /* The text on the gutter, the focus ring in the padding before it */
  .topbar-link { margin-left: -6px; padding-left: 6px; }
}
/* Phones, and landscape phones: the cookie notice as a sheet along the
   bottom, without its label */
@media (max-width: 639px), (max-height: 480px) {
  site-consent { bottom: 0; left: 0; width: 100%; }
  .consent { gap: var(--spacing-03); padding: var(--spacing-05) var(--gutter) max(var(--spacing-05), env(safe-area-inset-bottom)); border-width: 1px 0 0; }
  .consent .section-label { display: none; }
}
/* Small phones: Menu as an icon */
@media (max-width: 439px) {
  .menu-toggle { width: var(--chip-height); padding: 0; }
  .menu-toggle [data-t="menu"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .launch { padding: 0 10px; gap: 8px; }
}
/* Reduced motion and the ticker's pause button: the menu and the notice
   appear at once. */
@media (prefers-reduced-motion: reduce) {
  .site-menu, .menu-open .site-menu, .site-menu [style*="--i"], .menu-open .site-menu [style*="--i"], .consent { transition: none; }
}
/* (motion-paused is on <html>, menu-open on <body>) */
.motion-paused .site-menu, .motion-paused .menu-open .site-menu, .motion-paused .site-menu [style*="--i"], .motion-paused .menu-open .site-menu [style*="--i"], .motion-paused .consent { transition: none; }