/* ==========================================================================
   Orbicon — design tokens
   ========================================================================== */
/* IBM Plex Sans (SIL OFL 1.1, assets/fonts/OFL.txt), self-hosted and subset to Latin + Latin-1 + Azerbaijani letters
   (Ğğ İı Şş Əə) + punctuation, ~14 KB per weight. Preloaded in each page's <head> so the files arrive together
   with this stylesheet. "IBM Plex Sans Fallback" is Arial with Plex's width and vertical metrics, so if the web
   font is ever late, text keeps the same size, line breaks and position when it swaps. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+015E-015F, U+018F, U+0259, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+015E-015F, U+018F, U+0259, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+015E-015F, U+018F, U+0259, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193; }
/* Cyrillic for the Russian pages: the same IBM Plex Sans family (Fontsource subset, OFL 1.1), downloaded only when
   Cyrillic text is on the page. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic-600.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans Fallback"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 100.76%; ascent-override: 101.73%; descent-override: 27.29%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; font-style: normal; font-weight: 500; src: local("Arial"), local("ArialMT"); size-adjust: 103.25%; ascent-override: 99.27%; descent-override: 26.63%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; font-style: normal; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 98.4%; ascent-override: 104.17%; descent-override: 27.95%; line-gap-override: 0%; }

:root {
  --navy: #031a3d;
  --ink: #0b1b33;
  --blue: #0055f8;
  --blue-700: #0044c7;
  --blue-50: #edf3ff;
  --blue-on-dark: #86adff;
  --paper: #ffffff;
  --mist: #f3f5f8;
  --line: #dfe4ec;
  --line-strong: #c5cdda;
  --line-dark: rgba(255, 255, 255, 0.14);
  --muted: #53607a;
  --muted-on-dark: #a9b6cc;

  --font: "IBM Plex Sans", "IBM Plex Sans Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --container: 1400px;        /* home sections and the full footer */
  --container-narrow: 1240px; /* article-like pages: privacy, project page, 404 */
  --gutter: clamp(20px, 4vw, 48px);
  --header-gutter: clamp(20px, 2.5vw, 48px); /* 48 px wide, 24–32 px on narrow desktops, 20 px on phones */
  --section: clamp(72px, 8vw, 120px);
  --header-h: 76px;
  --header-dark: #0a1426;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.45s;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Native scrollbar, in the site's colours: dark track, softly contrasting but clearly visible thumb,
     roughly 11 px wide where the browser supports it. No custom scrollbar, no scroll hijacking. */
  scrollbar-width: thin;
  scrollbar-color: #6f7c93 #101b2e;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  overflow-wrap: break-word; /* a word wider than its line (long Russian words, enlarged text) breaks instead of overflowing */
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.section--navy :focus-visible,
.section--blue :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: 12px; z-index: 100; max-width: calc(100% - 32px);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 4px; text-decoration: none;
  /* Moved up by its own full height plus the 12 px offset, so it stays out of view at any text size;
     still focusable (no display/visibility change). */
  transform: translateY(calc(-100% - 24px));
}
.skip-link:focus { transform: none; }

/* Article-like pages keep the earlier, narrower measure; the footer stays on the wide one everywhere. */
.page-article, .page-case, .not-found-page { --container: var(--container-narrow); }
.site-footer .container { max-width: calc(1400px + 2 * var(--gutter)); }
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Typography
   ========================================================================== */
/* Quiet section label: body typeface, sentence case, no ornament. */
.eyebrow {
  display: inline-block;
  font-family: var(--font); font-size: 0.9375rem; font-weight: 500; line-height: 1.4;
  letter-spacing: normal; text-transform: none; color: var(--muted);
}
.section--navy .eyebrow { color: var(--muted-on-dark); }
.section--blue .eyebrow { color: rgba(255, 255, 255, 0.82); }

.h1 {
  font-size: clamp(2rem, 1.1rem + 4.2vw, 4.25rem);
  line-height: 1.05; letter-spacing: -0.028em; font-weight: 600;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.125rem);
  line-height: 1.1; letter-spacing: -0.022em; font-weight: 600;
  text-wrap: balance;
}
/* Long words (e.g. Russian «конфиденциальности» at 320 px) never run past the heading: Russian headings may hyphenate,
   and any text (see body) breaks a word only when it cannot fit on a line at all. */
:lang(ru) .h1, :lang(ru) .h2 { hyphens: auto; }
.h3 { font-size: 1.3125rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }

.lead {
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.6; color: var(--muted); max-width: 36em;
}
.section--navy .lead { color: var(--muted-on-dark); }

/* ==========================================================================
   Buttons & links
   ========================================================================== */
/* One rule for every primary button: flat, 52–56 px tall, 16 px/500 text, arrow set apart on the right.
   No gradient, glow, large shadow or scaling — only a slight background change and a 3 px arrow nudge. */
/* One rule for every primary button: flat, 52–56 px tall, 16 px/500 text, 2 px radius.
   Split buttons put the label on the left and the arrow in its own 48 px field on the right, divided by a hairline.
   Hover changes only that field's background and nudges the arrow — no gradient, glow, shadow or scaling. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  min-height: 52px; padding: 0 24px; border-radius: 2px; border: 1px solid transparent;
  font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.btn--split { justify-content: space-between; gap: 0; padding-right: 0; overflow: hidden; }
.btn__go {
  display: grid; place-items: center; align-self: stretch; flex: none;
  width: 48px; margin-left: 20px; border-left: 1px solid currentColor;
  transition: background-color 180ms var(--ease);
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary .btn__go { border-color: rgba(255, 255, 255, 0.28); }
.btn--primary:hover .btn__go { background: rgba(255, 255, 255, 0.14); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost .btn__go { border-color: var(--line-strong); }
.btn--ghost:hover .btn__go { background: rgba(11, 27, 51, 0.06); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light .btn__go { border-color: rgba(11, 27, 51, 0.16); }
.btn--light:hover .btn__go { background: rgba(11, 27, 51, 0.07); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.btn[disabled] { opacity: 0.7; cursor: progress; }

.arrow { flex: none; transition: transform 180ms var(--ease); }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--blue); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid currentColor;
}
.section--navy .link-arrow { color: #fff; }

/* ==========================================================================
   Header & navigation
   ========================================================================== */
/* One bar on every page: fixed, always --header-h tall (it never compacts, so nothing below it moves)
   and solid dark from the first paint. Only the home page changes its ground: transparent over the film
   until the page is scrolled (see "Film hero"). */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background-color: var(--header-dark); color: #fff;
  transition: background-color var(--dur) var(--ease);
}
/* Inner pages: content starts below the bar. On the home page the film starts under it. */
.site-header ~ main { padding-top: var(--header-h); }

/* The bar and its content both use the full screen width: logo on the left, the menu after a fixed gap, the language
   switch on the right edge. Side padding: 48 px wide, 24–32 px on narrow desktops, 20 px on phones. */
.header__inner {
  display: flex; align-items: center; gap: 0;
  width: 100%; height: var(--header-h); padding-inline: var(--header-gutter);
}
/* The logo keeps its 32 px height; only if the row can't hold it next to an enlarged "Menyu" button does it shrink
   proportionally instead of pushing the button off the screen. */
.brand { display: block; flex: 0 1 auto; min-width: 0; }
.site-header .brand { padding-block: 6px; } /* 32 px logo → 44 px touch target; the bar height does not change */
.brand img { display: block; width: auto; height: auto; max-height: 32px; max-width: 100%; }
.site-header :focus-visible { outline-color: #fff; }

.nav { display: flex; align-items: center; }
/* Desktop links from 64em (1024 px at the default text size; the English and Russian links with the language switch need that width). The breakpoint is in em, so a larger default font or
   browser zoom switches to the menu button before the links could run into the logo. */
@media (min-width: 64em) {
  /* The nav fills the rest of the row: links right after the logo gap, language switch pushed to the right edge. */
  .nav { flex: 1 1 auto; margin-left: clamp(64px, 5vw, 80px); gap: 0; }
  .nav__list { display: flex; align-items: center; gap: clamp(26px, 2vw, 34px); margin-right: auto; }
  .lang-switch { margin-left: 32px; }
}
.nav__link {
  position: relative; display: block; padding: 8px 0;
  font-size: 0.9375rem; font-weight: 500; color: rgba(255, 255, 255, 0.84); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: #fff; }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* Language switch: AZ / EN / RU as plain links, after the menu links on wide screens and on its own row inside the
   open mobile menu. The current language is white, semibold and underlined (not colour alone) and has aria-current. */
.lang-switch { display: flex; align-items: center; flex: none; }
.lang-switch__link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 44px; padding: 0 4px;
  font-size: 0.875rem; font-weight: 500; line-height: 1; color: rgba(255, 255, 255, 0.8); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.lang-switch__link::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 9px; height: 2px;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.lang-switch__link:hover { color: #fff; }
.lang-switch__link:hover::after { transform: scaleX(1); }
.lang-switch__link[aria-current="true"] { color: #fff; font-weight: 600; }
.lang-switch__link[aria-current="true"]::after { transform: scaleX(1); }
.lang-switch__sep { padding: 0 2px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); }

.menu-toggle {
  display: none; flex: none; align-items: center; justify-content: center; gap: 10px;
  min-width: 44px; min-height: 44px; padding: 0 4px; margin-right: -4px; background: none; border: 0; cursor: pointer;
  font-weight: 500; font-size: 0.9375rem; color: #fff; white-space: nowrap;
}
.menu-toggle__icon { position: relative; width: 20px; height: 12px; }
.menu-toggle__icon span {
  position: absolute; left: 0; right: 0; height: 2px; background: #fff;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.menu-toggle__icon span:first-child { top: 0; }
.menu-toggle__icon span:last-child { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { top: 5px; transform: rotate(-45deg); }

/* Open mobile menu: page scroll is locked (main.js adds .nav-open) and the panel is a solid dark sheet
   directly under the bar; the bar itself is solid too, also over the home film. */
html.nav-open, body.nav-open { overflow: hidden; }
@media (max-width: 63.99em) {
  .header__inner { gap: 16px; }
  .menu-toggle { display: inline-flex; margin-left: auto; } /* the button stays on the right edge of the bar */
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    display: none; flex-direction: column; align-items: stretch;
    padding: 8px var(--gutter) 40px; background: var(--header-dark);
    border-top: 1px solid var(--line-dark); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.is-open { display: flex; animation: fade-in 0.3s var(--ease); }
  .nav__list { display: flex; flex-direction: column; }
  .nav__link { font-size: 1.5rem; color: #fff; padding: 18px 0; border-bottom: 1px solid var(--line-dark); }
  .nav__link::after { display: none; }
  .lang-switch { margin-top: 24px; margin-left: -12px; } /* the first code lines up with the menu links; its 44 px target stays */
  .lang-switch__link, .lang-switch__sep { font-size: 1.125rem; }
  .lang-switch__link { min-width: 44px; }
  .lang-switch__link::after { bottom: 8px; }
}
/* Without JavaScript the menu button cannot open anything: on narrow screens the bar becomes part of the page flow
   and shows the links and the language switch as plain rows. */
@media (max-width: 63.99em) {
  html:not(.js) .site-header { position: relative; }
  html:not(.js) .site-header ~ main { padding-top: 0; }
  html:not(.js) .site-header ~ main.not-found { padding-top: clamp(40px, 8vh, 120px); }
  html:not(.js) .header__inner { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-block: 16px 8px; row-gap: 4px; }
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .nav {
    position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 32px;
    width: 100%; height: auto; padding: 0; background: none; border-top: 0; overflow: visible;
  }
  html:not(.js) .nav__list { flex-direction: row; flex-wrap: wrap; column-gap: 20px; }
  html:not(.js) .nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: 0.9375rem; border-bottom: 0; }
  html:not(.js) .lang-switch { margin: 0 0 0 -12px; }
  html:not(.js) .lang-switch__link, html:not(.js) .lang-switch__sep { font-size: 0.9375rem; }
  html:not(.js) .film__content { padding-top: clamp(24px, 5svh, 64px); }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: #fff; }
.section--blue { background: var(--blue); color: #fff; }

.section-head {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 24px clamp(32px, 6vw, 96px); align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head .eyebrow { margin-bottom: 20px; }

@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 6vw, 88px); border-bottom: 1px solid var(--line); }

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 5vw, 88px); align-items: center;
}
.hero__text .eyebrow { margin-bottom: 28px; }
.hero__text .h1 { margin-bottom: 28px; }
.hero__text .lead { margin-bottom: 40px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }

.hero__text > * { animation: rise 0.9s var(--ease) both; }
.hero__text > :nth-child(2) { animation-delay: 0.06s; }
.hero__text > :nth-child(3) { animation-delay: 0.12s; }
.hero__text > :nth-child(4) { animation-delay: 0.18s; }
.hero__visual { animation: fade-in 1.1s var(--ease) 0.2s both; }

.scope {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0;
  margin-top: clamp(48px, 6vw, 88px); padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 0.9375rem; color: var(--muted);
}
.scope__label { font-family: var(--font); font-size: 0.8125rem; color: var(--ink); margin-right: 28px; }
.scope li { display: flex; align-items: center; }
.scope li + li::before { content: ""; width: 4px; height: 4px; background: var(--line-strong); margin-inline: 16px; }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 640px; }
}
@media (max-width: 640px) {
  .scope { flex-direction: column; align-items: flex-start; gap: 8px; }
  .scope__label { margin: 0 0 4px; }
  .scope li + li::before { display: none; }
  .scope li::before { content: ""; width: 4px; height: 4px; background: var(--blue); margin-right: 12px; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Illustrative system composition (hero)
   ========================================================================== */
.system { position: relative; container-type: inline-size; }
.system__stage { position: relative; aspect-ratio: 600 / 520; font-size: 2.1667cqw; }
.system__stage::before {
  content: ""; position: absolute; inset: -4% -4% -2% 10%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 3.2em 3.2em;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
}

.system__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.system__links .base { fill: none; stroke: #aeb9cc; stroke-width: 1.25; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.system__links .pulse {
  fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 10 200; stroke-dashoffset: 10; vector-effect: non-scaling-stroke;
  animation: pulse 4.8s var(--ease) infinite;
}
.system__links .pulse:nth-of-type(2) { animation-delay: 1.6s; }
.system__links .pulse:nth-of-type(3) { animation-delay: 3.2s; }

.node {
  position: absolute; z-index: 2; width: 10.5em;
  display: flex; align-items: center; gap: 0.6em; padding: 0.75em 0.9em;
  background: #fff; border: 1px solid var(--line); border-radius: 0.5em;
  box-shadow: 0 1px 2px rgba(11, 27, 51, 0.05), 0 10px 24px -14px rgba(11, 27, 51, 0.25);
  font-size: 1em; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.node svg { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.node--web { left: 1.67%; top: 1.9%; }
.node--api { left: 1.67%; top: 86.9%; }
.node--app { left: 73.3%; top: 88.8%; }

.board {
  position: absolute; z-index: 2; left: 20%; top: 11.54%; width: 76.67%; height: 71.15%;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 0.8em;
  box-shadow: 0 2px 4px rgba(11, 27, 51, 0.04), 0 32px 64px -32px rgba(11, 27, 51, 0.32);
  font-size: 1em; line-height: 1.3;
}
.board__bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.8em 1.1em; border-bottom: 1px solid var(--line); }
.board__title { display: flex; align-items: center; gap: 0.6em; font-weight: 600; font-size: 0.95em; }
.board__title::before { content: ""; width: 0.6em; height: 0.6em; background: var(--blue); }
.board__tag { font-family: var(--font); font-size: 0.75em; color: var(--muted); border: 1px solid var(--line); border-radius: 99em; padding: 0.15em 0.7em; }
.board__body { display: grid; grid-template-columns: 9em minmax(0, 1fr); flex: 1; min-height: 0; }
.board__nav { display: flex; flex-direction: column; gap: 0.15em; padding: 0.8em 0.55em; background: var(--mist); border-right: 1px solid var(--line); }
.board__nav li { font-size: 0.88em; padding: 0.45em 0.7em; border-radius: 0.3em; color: var(--muted); white-space: nowrap; }
.board__nav li.is-active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--blue); }
.board__main { display: flex; flex-direction: column; gap: 0.9em; padding: 1em 1.2em; min-width: 0; }
.board__head { display: flex; align-items: center; justify-content: space-between; }
.board__head strong { font-size: 1.1em; font-weight: 600; }
.chip { font-size: 0.78em; padding: 0.2em 0.75em; border-radius: 99em; background: var(--blue-50); color: var(--blue); white-space: nowrap; }
.chips { display: flex; gap: 0.4em; }
.chip--muted { background: var(--mist); color: var(--muted); }

.board__chart { display: flex; align-items: flex-end; gap: 0.5em; flex: 1; min-height: 6.6em; padding-bottom: 0.35em; border-bottom: 1px solid var(--line); }
.frame .board__chart { flex: none; height: 6.6em; }
.board__chart span { flex: 1; height: var(--h); background: #d3e0fb; border-radius: 0.2em 0.2em 0 0; }
.board__chart span.is-key { background: var(--blue); }

.board__rows li {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 0.55em minmax(0, 1fr) 3.5em auto; align-items: center; gap: 0.8em;
  padding: 0.55em 0.5em; border-bottom: 1px solid var(--line); font-size: 0.85em;
}
.board__rows li:last-child { border-bottom: 0; }
.board__rows li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0.3em;
  background: var(--blue-50); opacity: 0;
  animation: row-focus 8s var(--ease) infinite;
}
.board__rows li:nth-child(2)::before { animation-delay: 2s; }
.board__rows li:nth-child(3)::before { animation-delay: 4s; }
.board__rows li:nth-child(4)::before { animation-delay: 6s; }

.dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: #c3ccdb; }
.sk { display: block; height: 0.5em; border-radius: 99em; background: #e3e8f0; }
.sk--60 { width: 70%; } .sk--45 { width: 55%; } .sk--80 { width: 85%; } .sk--full { width: 100%; }
.status { font-size: 0.88em; padding: 0.12em 0.65em; border-radius: 99em; white-space: nowrap; justify-self: end; }
.status--done { background: #e6f5ec; color: #146c3f; }
.status--move { background: var(--blue-50); color: var(--blue-700); }
.status--wait { background: #fff3de; color: #7a4a00; }

.system__caption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin-top: 20px; font-size: 0.8125rem; color: var(--muted);
}

.motion-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 99px; cursor: pointer;
  font-size: 0.8125rem; font-weight: 500; color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}
.motion-toggle:hover { border-color: var(--ink); }
.motion-toggle[hidden] { display: none; }
.motion-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.motion-toggle .icon-play { display: none; }
.motion-paused .motion-toggle .icon-play { display: block; }
.motion-paused .motion-toggle .icon-pause { display: none; }

.motion-paused .system *, .motion-paused .system *::before,
.system.is-offscreen *, .system.is-offscreen *::before { animation-play-state: paused !important; }

@media (max-width: 520px) {
  .system__stage { aspect-ratio: 460 / 370; font-size: 2.83cqw; }
  .system__stage::before, .system__links, .node { display: none; }
  .board { left: 0; top: 0; width: 100%; height: 100%; }
}

/* ==========================================================================
   Benefit comparison
   ========================================================================== */
.compare__legend, .compare__row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
}
.compare__legend {
  padding-bottom: 16px; border-bottom: 1px solid var(--ink);
  font-family: var(--font); font-size: 0.8125rem; color: var(--muted);
}
.compare__legend span:last-child { color: var(--blue); }
.compare__row { padding-block: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line); align-items: start; }
.compare__num { font-family: var(--font); font-size: 0.875rem; color: var(--muted); padding-top: 4px; }
.compare__before { font-size: 1.125rem; color: var(--muted); }
.compare__after { display: flex; gap: 14px; font-size: 1.125rem; font-weight: 500; color: var(--ink); }
.compare__after svg { flex: none; width: 20px; height: 20px; margin-top: 4px; stroke: var(--blue); fill: none; stroke-width: 1.8; }
.compare__tag { display: none; }

@media (max-width: 760px) {
  .compare__legend { display: none; }
  .compare__row { grid-template-columns: 1fr; gap: 14px; }
  .compare__row:first-of-type { border-top: 1px solid var(--ink); }
  .compare__tag {
    display: block; margin-bottom: 4px;
    font-family: var(--font); font-size: 0.75rem; color: var(--muted);
  }
  .compare__after .compare__tag { color: var(--blue); }
  .compare__after svg { display: none; }
}

/* ==========================================================================
   Services (navy)
   ========================================================================== */
.services {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark);
}
.service {
  display: flex; flex-direction: column;
  min-height: 300px; padding: clamp(28px, 3vw, 44px);
  border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  transition: background-color var(--dur) var(--ease);
}
.service:hover { background: rgba(255, 255, 255, 0.035); }
.service__top { display: flex; align-items: center; justify-content: space-between; }
.service__top svg { width: 28px; height: 28px; fill: none; stroke: var(--blue-on-dark); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service__num { font-family: var(--font); font-size: 0.8125rem; color: var(--muted-on-dark); }
.service .h3 { margin: 56px 0 12px; }
.service p { color: var(--muted-on-dark); font-size: 1rem; }

.services-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  margin-top: clamp(40px, 5vw, 64px);
}
.services-note p { font-size: 1.125rem; max-width: 40em; }

@media (max-width: 960px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .services { grid-template-columns: 1fr; }
  .service { min-height: 0; }
  .service .h3 { margin-top: 32px; }
}

/* ==========================================================================
   Business systems — intro, then six directions: tabs + one presentation (wide screens), accordion (phones)
   ========================================================================== */
/* The dark ground marks a clear border with the light "Xidmətlər" section above; no waves, cuts or transitions.
   The next section ("Hazırladığımız həllər", #0a1426) is almost the same dark, so a hairline marks where this one ends. */
.systems { background: var(--navy); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
/* A single word wider than its whole line (enlarged text on a small phone) may break instead of widening the page. */
.systems { overflow-wrap: anywhere; }
/* Menu link lands exactly under the fixed bar: the section's own top padding keeps the heading clear,
   and no strip of the previous section (or its contact link) stays visible above it. */
#mehsullar { scroll-margin-top: -16px; }

.systems__intro { max-width: 46rem; }
.systems__intro .h2 { max-width: 22em; }
.systems__lead { margin-top: 20px; max-width: 37em; font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.6; color: var(--muted-on-dark); text-wrap: pretty; }
.systems__body { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- Direction content (shared by both layouts) ---------- */
.area__title { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: #fff; }
.area__summary { margin-top: 12px; max-width: 36em; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.55; color: var(--muted-on-dark); text-wrap: pretty; }
.area__content { container-type: inline-size; }
.area__examples { display: grid; gap: 10px 32px; margin-top: 28px; }
@container (min-width: 36rem) { .area__examples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area__examples li { position: relative; padding-left: 20px; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.area__examples li::before { content: ""; position: absolute; left: 2px; top: 0.75em; width: 7px; height: 1px; background: var(--muted-on-dark); }
.area__code { color: var(--muted-on-dark); white-space: nowrap; } /* "— ERP" never leaves the dash alone at a line end */

/* ---------- Diagrams: sources → one highlighted main block → result ----------
   Pure HTML/CSS (reads the same without JS; the list and its sr-only prefixes carry the meaning, lines and arrows
   are pseudo-elements, so screen readers skip them). Every part is a block with the same frame, padding and radius;
   only the main block has a stronger blue ground. Lines run only in the gaps and end exactly at block edges.
   Wide container: one row, several sources join one collector line that feeds a single arrow into the main block.
   Narrow container: top to bottom, same blocks, the text is never scaled down. */
.workflow {
  --gap: 48px;        /* between the three columns (wide) */
  --tick: 16px;       /* source edge → collector line (wide) */
  --vgap: 28px;       /* between rows (narrow) */
  --rail: 24px;       /* room for the collector line on the left (narrow, several sources) */
  --arrow-x: 20px;    /* where vertical arrows enter a block (narrow) */
  --line: var(--link, rgba(255, 255, 255, 0.5));
  margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.workflow__label { display: block; margin-bottom: 20px; font-size: 0.9375rem; font-weight: 500; color: var(--muted-on-dark); }
.workflow__steps { position: relative; display: grid; justify-items: start; }
.workflow__steps > li { position: relative; max-width: 100%; }
.workflow__sources ul { display: grid; grid-auto-rows: 1fr; gap: 8px; } /* equal size: as wide and tall as the largest */
.workflow__sources li, .workflow__process, .workflow__result {
  position: relative; padding: 11px 16px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 8px;
  background: rgba(255, 255, 255, 0.04); font-size: 1rem; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, 0.92);
  overflow-wrap: break-word; /* long words wrap only when they must; the columns keep their natural width */
}
.workflow__sources li { display: flex; align-items: center; }
.workflow__process { border-color: rgba(134, 173, 255, 0.7); background: rgba(134, 173, 255, 0.2); }
.workflow__name { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: #fff; }
.workflow__detail { display: block; margin-top: 3px; font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.8); }
.workflow__sources li::before, .workflow__sources li::after,
.workflow__process::before, .workflow__process::after, .workflow__result::before, .workflow__result::after { content: none; }

/* Narrow: top to bottom. The arrow enters each block from above; several sources sit a little to the right,
   each tied by a short tick to one line on the left, which turns into the arrow of the main block. */
@container (max-width: 41.99rem) {
  .workflow__steps { row-gap: var(--vgap); }
  .workflow__steps:has(.workflow__sources li + li) > li { margin-left: var(--rail); max-width: calc(100% - var(--rail)); }
  .workflow__process::before, .workflow__result::before {
    content: ""; position: absolute; left: var(--arrow-x); top: calc(-1px - var(--vgap)); width: 1px; height: calc(var(--vgap) - 8px); background: var(--line);
  }
  .workflow__process::after, .workflow__result::after {
    content: ""; position: absolute; left: calc(var(--arrow-x) - 4px); top: -9px; width: 9px; height: 8px;
    background: var(--line); clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  /* Several sources: tick from each block's left edge to the line (8 px from the diagram's left edge) … */
  .workflow__sources li:not(:only-child)::after {
    content: ""; position: absolute; left: calc(7px - var(--rail)); top: 50%; width: calc(var(--rail) - 8px); height: 1px; background: var(--line);
  }
  /* … the line itself, from this block's centre to the next one (equal heights) … */
  .workflow__sources li:not(:only-child)::before {
    content: ""; position: absolute; left: calc(7px - var(--rail)); top: 50%; width: 1px; height: calc(100% + 2px + 8px); background: var(--line);
  }
  /* … and from the last source down to the middle of the gap, where it turns right into the main block's arrow. */
  .workflow__sources li:not(:only-child):last-child::before { height: calc(50% + 2px + var(--vgap) / 2); }
  .workflow__steps:has(.workflow__sources li + li) .workflow__process::before {
    left: calc(7px - var(--rail)); top: calc(-1px - var(--vgap) / 2); width: calc(var(--rail) - 6px + var(--arrow-x)); height: calc(var(--vgap) / 2 - 8px);
    background: none; border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  }
}

/* Wide: one row. Each part only as wide as its text needs (long names wrap), the same gap between all three. */
@container (min-width: 42rem) {
  .workflow__steps { grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: start; align-items: center; column-gap: var(--gap); }
  .workflow__process { max-width: 15em; }
  .workflow__result { max-width: 13em; }
  /* Sources: a tick from each right edge to one collector line; with equal heights its middle is the middle of the
     column, which is where the main block's centre is (rows are centred), so the arrow leaves from there. */
  .workflow__sources li::after {
    content: ""; position: absolute; left: calc(100% + 1px); top: 50%; width: var(--tick); height: 1px; background: var(--line);
  }
  .workflow__sources li:not(:last-child)::before {
    content: ""; position: absolute; left: calc(100% + 1px + var(--tick)); top: 50%; width: 1px; height: calc(100% + 2px + 8px); background: var(--line);
  }
  .workflow__process::before {
    content: ""; position: absolute; left: calc(-1px - var(--gap) + var(--tick)); top: 50%; width: calc(var(--gap) - var(--tick) - 8px); height: 1px; background: var(--line);
  }
  .workflow__result::before {
    content: ""; position: absolute; left: calc(-1px - var(--gap)); top: 50%; width: calc(var(--gap) - 8px); height: 1px; background: var(--line);
  }
  .workflow__process::after, .workflow__result::after {
    content: ""; position: absolute; left: -9px; top: calc(50% - 4px); width: 8px; height: 9px;
    background: var(--line); clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
}

/* One quiet accent on the links when a direction is shown: light blue fading to the neutral line colour. Text is
   readable from the first frame. No loops. */
@keyframes workflow-link { from { --link: var(--blue-on-dark); } to { --link: rgba(255, 255, 255, 0.5); } }
@property --link { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.5); }
.area.is-current .workflow, .area.is-open .workflow { animation: workflow-link 900ms var(--ease) 150ms both; }

/* ---------- Phones, narrow screens and no JS: accordion ---------- */
.area { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.areas { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.area__heading { margin: 0; font: inherit; }
.area__toggle {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 20px; align-items: center;
  width: 100%; padding: 22px 0; background: none; border: 0; color: #fff; text-align: left; cursor: pointer;
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem); font-weight: 600; line-height: 1.3;
}
.area__toggle:focus-visible, .areas__tab:focus-visible, .area__panel:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.area__icon { position: relative; width: 24px; height: 24px; color: #fff; }
.area__icon::before, .area__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; }
.area__icon::after { transform: rotate(90deg); transition: transform 240ms var(--ease); }
.area__toggle:hover, .area__toggle:hover .area__icon { color: var(--blue-on-dark); }
.area.is-open .area__toggle, .area.is-open .area__icon { color: var(--blue-on-dark); }
.area.is-open .area__icon::after { transform: rotate(90deg) scaleX(0); }
html:not(.js) .area__icon { display: none; }
/* In the accordion the direction's name is the button; the panel title is only for the wide presentation. */
.area__title { display: none; }
.area__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 280ms var(--ease); }
.area__content { min-height: 0; overflow: hidden; padding-bottom: 28px; }
.area__content > .area__summary { margin-top: 0; }
.js .areas:not(.is-tabs) .area:not(.is-open) .area__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 280ms var(--ease), visibility 0s linear 280ms; }
.areas__tabs { display: none; }

/* ---------- Wide screens with JS: tabs on the left (≈30 %), the chosen direction's presentation on the right ---------- */
.systems__body.is-tabs { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(32px, 3.5vw, 56px); align-items: start; }
.is-tabs .areas__tabs { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.areas__tab {
  position: relative; width: 100%; padding: 18px 16px 18px 20px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.82); text-align: left; cursor: pointer;
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); font-weight: 500; line-height: 1.35;
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}
.areas__tab::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--blue-on-dark); transform: scaleY(0); transition: transform 200ms var(--ease); }
.areas__tab:hover { color: #fff; background: rgba(255, 255, 255, 0.03); }
/* Selected: light blue, heavier weight and a thin left line — not colour alone. */
.areas__tab[aria-selected="true"] { color: var(--blue-on-dark); font-weight: 600; background: rgba(255, 255, 255, 0.04); }
.areas__tab[aria-selected="true"]::before { transform: scaleY(1); }

/* All presentations share one grid cell: the area is as tall as the longest direction, so nothing below moves when
   the choice changes, and it still grows with enlarged text. Old content fades out before the new fades in. */
.is-tabs .areas { display: grid; border: 0; }
.is-tabs .area {
  grid-area: 1 / 1; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.035);
  padding: clamp(28px, 3vw, 48px);
  opacity: 0; visibility: hidden; transition: opacity 120ms var(--ease), visibility 0s linear 120ms;
}
.is-tabs .area.is-current { opacity: 1; visibility: visible; transition: opacity 160ms var(--ease) 120ms, visibility 0s linear 120ms; }
.is-tabs .area__heading { display: none; }
.is-tabs .area__title { display: block; }
.is-tabs .area__panel { display: block; }
.is-tabs .area__content { overflow: visible; padding-bottom: 0; }
.is-tabs .area__content > .area__summary { margin-top: 12px; }

/* ==========================================================================
   Case study teaser
   ========================================================================== */
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
.case__text .eyebrow { margin-bottom: 20px; }
.case__text .h2 { margin-bottom: 24px; }
.case__text > p { color: var(--muted); font-size: 1.125rem; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; margin-block: 36px; padding-block: 24px; border-block: 1px solid var(--line); }
.facts dt { font-family: var(--font); font-size: 0.875rem; color: var(--muted); padding-top: 3px; }
.facts dd { font-weight: 500; }

.modules__title { display: block; margin-bottom: 16px; font-family: var(--font); font-size: 0.875rem; color: var(--muted); }
.modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: 40px; }
.modules li { display: flex; align-items: center; gap: 12px; }
.modules li::before { content: ""; width: 6px; height: 6px; background: var(--blue); flex: none; }

.case__visual { position: sticky; top: calc(var(--header-h) + 32px); }
.frame { container-type: inline-size; padding: clamp(16px, 4cqw, 44px); background: var(--mist); border-radius: 8px; }
.frame .board { position: relative; left: auto; top: auto; width: 100%; height: auto; font-size: clamp(8px, 2.05cqw, 14px); }
.frame .board__body { grid-template-columns: 10.5em minmax(0, 1fr); }
.frame .board__nav { padding-block: 0.9em; }
.frame__caption { margin-top: 16px; font-size: 0.8125rem; color: var(--muted); }

.table { width: 100%; border-collapse: collapse; font-size: 0.86em; }
.table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 0.9em; padding: 0.5em 0.6em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 0.72em 0.6em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td:last-child, .table th:last-child { text-align: right; }
.route { display: inline-flex; align-items: center; gap: 0.45em; }
.route svg { width: 0.9em; height: 0.9em; stroke: var(--muted); fill: none; stroke-width: 2; }

@media (max-width: 960px) {
  .case { grid-template-columns: 1fr; }
  .case__visual { position: static; }
}
@media (max-width: 520px) {
  .modules { grid-template-columns: 1fr; }
  .frame .board__nav { display: none; }
  .frame .board__body { grid-template-columns: 1fr; }
  .frame .board { font-size: 3.4cqw; }
  .table .col-optional { display: none; }
}

/* ==========================================================================
   About (blue): how Orbicon works, then the name's meaning as a quiet detail
   ========================================================================== */
/* Menu link ("Şirkət") lands exactly under the fixed bar; the section's own padding keeps the label clear. */
#sirket { scroll-margin-top: -16px; }
/* Own, calmer and deeper blue for this section only; the brand blue (--blue: logo, buttons, links) is unchanged.
   White on it 8.0:1; secondary text is a solid light tint (6.9:1), not white at reduced opacity. */
.about { --about-bg: #0643c6; --about-soft: #e6eeff; overflow-wrap: anywhere; }
.section--blue.about { background: var(--about-bg); }
/* Label and headline on the left, explanation on the right; both columns start on the same top line. */
.about__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 96px); align-items: start; }
.about__label { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--about-soft); }
.about__title { margin-top: 16px; max-width: 16em; }
/* No automatic hyphenation here (RU would split “обеспече-ние” at 1024 px); the longest word fits even at 320 px,
   and .about's overflow-wrap still breaks a word that cannot fit (e.g. at 200 % text size). */
:lang(ru) .about__title { hyphens: manual; }
.about__text { max-width: 34em; font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.6; color: #fff; text-wrap: pretty; }

/* The three parts of the name, below a hairline, in three equal columns: English term at a mid size,
   its Azerbaijani meaning clearly smaller. No oversized letters, cards or icons. */
.idea {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(32px, 5vw, 72px);
  margin-top: clamp(48px, 5vw, 72px); padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.idea__code { font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; color: #fff; }
.idea__term { font-weight: 400; }
.idea__term::before { content: "— "; }
.idea__title { margin-top: 6px; font-size: 0.875rem; line-height: 1.5; color: var(--about-soft); }

@media (max-width: 860px) {
  /* Label → headline → explanation → the name's meaning, one under another. */
  .about__head { grid-template-columns: minmax(0, 1fr); }
  .idea { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ==========================================================================
   Process — intro block (heading above intro), then five full-width open rows (title | explanation)
   ========================================================================== */
#proses { scroll-margin-top: -16px; }
/* The section is the size container for the stage rows.
   rem-based threshold: enlarged text falls back to the stacked layout. */
.process { overflow-wrap: anywhere; container-type: inline-size; }

/* Intro block, stacked and outside the row grid: 32–36 px heading on phones, 48–52 px on desktop,
   one line whenever it fits (no forced break). */
.process__heading { font-size: clamp(2rem, 1.6rem + 1.6vw, 3.25rem); font-weight: 600; }
.process__intro {
  margin-top: 18px; max-width: 720px;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem); line-height: 1.6; color: var(--muted); text-wrap: pretty;
}
.process__body { margin-top: 36px; }

/* Rows: hairline between stages across the full width; title above the explanation by default. */
.process__step { padding-block: 26px; border-top: 1px solid var(--line); }
.process__step:first-child { padding-top: 0; border-top: 0; }
.process__step:last-child { padding-bottom: 0; }
.process__title {
  font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.4375rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--navy); text-wrap: balance;
}
.process__text {
  margin-top: 8px; max-width: 36em; /* keeps the explanation near 70 characters per line on wide screens */
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); line-height: 1.65; color: var(--muted); text-wrap: pretty;
}

/* Wide: every stage uses the same 35 / 65 grid, so the titles share one vertical line and the explanations another. */
@container (min-width: 60rem) {
  .process__body { margin-top: 52px; }
  .process__step { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); column-gap: clamp(32px, 4vw, 64px); }
  .process__step { align-items: baseline; }
  .process__text { margin-top: 0; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; overflow-wrap: anywhere; }
.contact__text .eyebrow { margin-bottom: 20px; }
.contact__text .h2 { margin-bottom: 20px; }
.contact__lead { max-width: 30em; color: var(--muted); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }

.hints { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.hints__title { display: block; margin-bottom: 14px; font-weight: 600; }
.hints li { position: relative; padding-left: 22px; color: var(--muted); }
.hints li + li { margin-top: 8px; }
.hints li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--blue); }

/* Icons. Functional icons (.icon: envelope, phone, message) are one outline family on a 24 px grid with round caps;
   the stroke stays 1.5 px at every size. Platform marks (.logo) keep their official filled shapes. Both use the text
   colour, are decorative (aria-hidden) and never replace the text label. */
.icon, .logo { flex: none; display: block; width: 18px; height: 18px; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.icon * { vector-effect: non-scaling-stroke; }

/* E-mail as a clear alternative, not a headline: body-size text with a thin underline.
   E-mail and call back share one pattern: plain label, then icon + link text on the same start line. */
.direct { margin-top: 36px; }
.direct__label { display: block; margin-bottom: 6px; font-family: var(--font); font-size: 0.9375rem; color: var(--muted); }
.direct__link {
  display: inline-flex; align-items: flex-start; gap: 12px; padding-block: 6px; margin-block: -6px; /* 32 px line + 12 = 44 px touch target without moving the text */
  font-size: 1.25rem; line-height: 1.6; font-weight: 500; color: var(--navy);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(0, 85, 248, 0.6);
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease);
}
.direct__link:hover { color: var(--blue); text-decoration-color: currentColor; }
.direct__link .icon, .direct__link .logo { width: 20px; height: 20px; margin-top: 6px; } /* centred on the (first) 32 px line */
/* Phone: the official business number (tel:) and, right under it, the WhatsApp Business link — one group under one
   label, each link on its own row with touching 44 px targets. The number never breaks inside. */
.direct--phone { margin-top: 28px; }
.direct--phone .direct__link { display: flex; width: fit-content; max-width: 100%; }
.direct--phone .direct__link + .direct__link { margin-top: 6px; }
.tel { white-space: nowrap; }
/* Call-back link in the same label + link pattern; it opens the call-back form (Orbicon calls the visitor). */
.direct--callback { margin-top: 28px; }
/* Official LinkedIn, Instagram and Facebook pages: one quiet row of platform names, set apart from the contact ways by a
   hairline (no label). Each link is a 44 px target; on narrow columns the row wraps onto the next line instead of squeezing. */
.direct__socials { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 30px; padding: 10px 0 0; border-top: 1px solid var(--line-strong); list-style: none; }
.direct__social {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--navy);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(0, 85, 248, 0.6);
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease);
}
.direct__social:hover { color: var(--blue); text-decoration-color: currentColor; }

/* White form surface: hairline border, 8 px corners, no shadow. The form is its own size container,
   so name and e-mail sit side by side only while both fields have room (rem-based: enlarged text stacks them). */
.form {
  position: relative; container-type: inline-size;
  padding: clamp(20px, 3.4vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.form__note { margin-bottom: 24px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 20px; }
@container (min-width: 34rem) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.field--full { grid-column: 1 / -1; }
.field label, .field__label { display: block; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
/* E-mail and phone labels carry a small icon inline (the label text still wraps normally after it). */
.field label > .icon { display: inline-block; width: 16px; height: 16px; margin-inline-end: 8px; vertical-align: -3px; color: var(--muted); }
.req { color: var(--blue); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  display: block; width: 100%; min-height: 54px; padding: 14px 16px;
  font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: 6px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { height: 160px; min-height: 160px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230b1b33' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #9aa6b8; }
/* Focus: blue border + soft ring drawn with box-shadow, so nothing moves. */
.field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 85, 248, 0.18);
}
.field.has-error input:not([type="checkbox"]), .field.has-error textarea { border-color: #b42318; }
.field__optional { font-weight: 400; color: var(--muted); }
.field__hint { display: block; margin: -2px 0 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
/* Error text under the field (not colour alone); 6.6:1 on white. */
.field__error { display: block; margin-top: 8px; font-size: 0.9375rem; line-height: 1.45; color: #b42318; }
/* Job title: with JavaScript it is hidden until a company name is typed (then shown and required); the "js" class is
   set in <head>, so the field never flashes in first. Without JavaScript it stays visible with its note and no asterisk
   (it is required only together with a company name — contact.php applies that rule). */
.js .field--job:not(.is-shown) { display: none; }
.js .field__hint--nojs { display: none; }
html:not(.js) [data-job-required] { display: none; }
.field__error:empty { display: none; }

/* E-mail and phone form one group ("at least one of them"); its shared error sits under the group's sentence. */
.contact-fields__intro { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.contact-fields__error { margin-top: 6px; }
.contact-fields__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 20px; margin-top: 14px; }
@container (min-width: 34rem) {
  .contact-fields__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact-fields.has-error .field > input:not([type="checkbox"]),
.contact-fields.has-error .phone { border-color: #b42318; }

/* Phone: country code and number read as one field — same height, border, radius and focus ring as the other inputs.
   Without JavaScript the native <select> sits in the country part; with JavaScript a button opens the country picker. */
.field--phone { container-type: inline-size; }
.phone {
  position: relative; display: flex; align-items: stretch; min-height: 54px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 6px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.phone:hover { border-color: #9aa6b8; }
.phone:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 85, 248, 0.18); }
.field.has-error .phone { border-color: #b42318; }
.phone__country { flex: none; display: flex; border-right: 1px solid var(--line); border-radius: 5px 0 0 5px; }
.phone__country:focus-within { background: var(--mist); }
.field .phone select {
  min-height: 52px; max-width: 12rem; padding: 0 8px 0 12px; border: 0; border-radius: 5px 0 0 5px; box-shadow: none;
  font: inherit; font-size: 1rem; color: var(--ink); background: transparent none; appearance: auto; -webkit-appearance: menulist;
}
.field .phone select:focus { border: 0; box-shadow: none; outline: none; }
.phone__trigger {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 12px 0 16px;
  font: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: transparent; border: 0; border-radius: 5px 0 0 5px; cursor: pointer;
}
.phone__trigger:focus-visible { outline: none; } /* the whole field shows the focus ring, the country part a tint */
.phone__value { white-space: nowrap; }
.phone__iso { color: var(--muted); }
.phone__chevron { flex: none; color: var(--muted); }
.field .phone > input:not([type="checkbox"]) {
  flex: 1 1 auto; min-width: 0; min-height: 52px; border: 0; border-radius: 0 5px 5px 0; box-shadow: none; background: transparent;
}
.field .phone > input:not([type="checkbox"]):focus { border: 0; box-shadow: none; outline: none; }
/* Narrow field: only "+994" beside the number; very narrow (or enlarged text): code above the number. */
@container (max-width: 16rem) {
  .phone__iso { display: none; }
}
@container (max-width: 12rem) {
  .phone { flex-direction: column; }
  .phone__country { border-right: 0; border-bottom: 1px solid var(--line); border-radius: 5px 5px 0 0; }
  .phone__trigger { flex: 1 1 auto; }
  .field .phone > input:not([type="checkbox"]) { border-radius: 0 0 5px 5px; }
}

/* Country picker popup: next to the phone field, above the fields below it (nothing moves), inside the screen. */
.country-picker {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; flex-direction: column; width: min(340px, calc(100vw - 32px)); max-height: 320px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(3, 26, 61, 0.12);
  overflow: hidden;
}
.country-picker[hidden] { display: none; }
.country-picker.is-up { top: auto; bottom: calc(100% + 6px); }
.country-picker__search { flex: none; padding: 10px; border-bottom: 1px solid var(--line); }
.field .country-picker input.country-picker__input {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px;
  font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: none;
}
.field .country-picker input.country-picker__input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 85, 248, 0.18); outline: none; }
.country-picker__list {
  flex: 1 1 auto; min-height: 0; margin: 0; padding: 6px; list-style: none;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.country-picker__list[hidden] { display: none; }
/* List scrollbar: native scrolling, only its look — thin, transparent track, soft grey rounded thumb, no arrow buttons,
   kept clear of the panel's rounded corners and the rows. The page's own (dark) scrollbar is not affected.
   High-contrast / forced-colours modes keep the system scrollbar. */
@media not (forced-colors: active) {
  /* Chrome, Edge, Safari: pseudo-elements. The page's inherited scrollbar-color/-width would override them, so reset. */
  @supports selector(::-webkit-scrollbar) {
    .country-picker__list { scrollbar-width: auto; scrollbar-color: auto; }
    .country-picker__list::-webkit-scrollbar { width: 10px; }
    .country-picker__list::-webkit-scrollbar-track { background: transparent; margin-block: 8px; }
    .country-picker__list::-webkit-scrollbar-thumb {
      background-color: #c5ccd6; background-clip: padding-box;
      border: 2px solid transparent; border-radius: 999px; /* 6 px visible thumb */
    }
    .country-picker__list::-webkit-scrollbar-thumb:hover { background-color: #9ba5b3; }
    .country-picker__list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    .country-picker__list::-webkit-scrollbar-corner { background: transparent; }
  }
  /* Firefox: standard properties (no arrows in its thin scrollbar). */
  @supports not selector(::-webkit-scrollbar) {
    .country-picker__list { scrollbar-width: thin; scrollbar-color: #c5ccd6 transparent; }
    .country-picker__list:hover { scrollbar-color: #9ba5b3 transparent; }
  }
}
.country-picker__option {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px 8px 12px;
  font-size: 0.9375rem; line-height: 1.35; color: var(--ink); border-radius: 6px; cursor: pointer;
}
.country-picker__option:hover { background: #f3f5f8; }
.country-picker__option.is-active { background: #eaf0fd; box-shadow: inset 0 0 0 1px rgba(0, 85, 248, 0.45); }
.country-picker__option[aria-selected="true"] { font-weight: 500; }
.country-picker__option[aria-selected="true"]:not(.is-active) { background: var(--mist); }
.country-picker__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.country-picker__code { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.country-picker__check { flex: none; color: var(--blue); visibility: hidden; }
.country-picker__option[aria-selected="true"] .country-picker__check { visibility: visible; }
.country-picker__empty { padding: 14px 16px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.country-picker__empty[hidden] { display: none; }

/* Native checkbox, label beside it (the whole text is clickable), the privacy link as its own link below. */
.consent { display: flex; align-items: flex-start; gap: 12px; }
.consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
.consent input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.field .consent__label { margin: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: var(--muted); cursor: pointer; }
.consent__policy { display: inline-block; padding: 6px 0 16px; margin-bottom: -16px; font-size: 0.9375rem; line-height: 1.5; color: var(--navy); text-underline-offset: 3px; transition: color 180ms var(--ease); }
.consent__policy:hover { color: var(--blue); } /* same 180 ms colour change as the other text links */
.field.has-error .consent input { outline: 2px solid #b42318; outline-offset: 2px; }

/* Submit: one solid button (no divider or separate arrow field), right-aligned; full width on narrow forms. */
.form__footer { display: flex; justify-content: flex-end; margin-top: 32px; }
.form__submit {
  gap: 14px; min-height: 56px; padding: 0 26px; border-radius: 6px;
  font-size: 1rem; font-weight: 500;
}
.form__submit:hover { background: #0046cc; }
.form__submit:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.form__submit[disabled] { opacity: 1; background: #0046cc; cursor: progress; }
.form__submit[disabled] .arrow { transform: none; }
@container (max-width: 33.99rem) {
  .form__submit { width: 100%; }
}

.form-status { margin-top: 20px; padding: 14px 16px; border-radius: 6px; border: 1px solid; font-size: 0.9375rem; line-height: 1.5; }
.form-status[data-state="success"] { background: #e9f7ef; border-color: #b9e2c9; color: #0f5132; }
.form-status[data-state="error"] { background: #fdeeee; border-color: #f2c4c4; color: #8a1c1c; }
/* Not a new send: the visitor's earlier requests were received. Calm, informative, never the success colour. */
.form-status[data-state="notice"] { background: #eef3fb; border-color: #c9d8ef; color: #1c3f73; }
.form-status a { color: inherit; }
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Call-back request dialog ----------
   White panel, hairline border, soft shadow; the page behind is quietly dimmed. Opens and closes with a 180 ms fade
   and a 8 px rise (no bounce); reduced motion: no transition. Fields reuse the contact form's styles. The panel never
   gets taller than the visible screen (main.js sets --cb-vh from the visual viewport when a keyboard is open) and
   scrolls inside itself. */
.callback {
  width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(var(--cb-vh, 100dvh) - 32px);
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(3, 26, 61, 0.16), 0 2px 6px rgba(3, 26, 61, 0.06);
  opacity: 0; transform: translateY(8px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), overlay 180ms allow-discrete, display 180ms allow-discrete;
}
.callback[open] { opacity: 1; transform: none; }
@starting-style { .callback[open] { opacity: 0; transform: translateY(8px); } }
.callback::backdrop {
  background: rgba(3, 12, 28, 0);
  transition: background-color 180ms var(--ease), overlay 180ms allow-discrete, display 180ms allow-discrete;
}
.callback[open]::backdrop { background: rgba(3, 12, 28, 0.55); }
@starting-style { .callback[open]::backdrop { background: rgba(3, 12, 28, 0); } }
.callback__inner { padding: 28px; }
.callback__head { display: flex; align-items: flex-start; gap: 16px; }
.callback__title { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding-top: 4px; font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.callback__title .icon { width: 22px; height: 22px; margin-top: 4px; color: var(--blue); } /* centred on the first 30 px line */
.callback__title:focus { outline: none; }
.callback__close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px 0 0;
  color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}
.callback__close:hover { color: var(--ink); background: var(--mist); }
.callback__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.callback__intro { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.callback__form { margin-top: 24px; container-type: inline-size; }
.callback__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 16px; }
@container (min-width: 21rem) {
  .callback__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.callback .field input:not([type="checkbox"]) { min-height: 50px; padding-block: 12px; }
.callback .phone { min-height: 50px; }
.callback .phone__trigger, .callback .field .phone > input:not([type="checkbox"]), .callback .field .phone select { min-height: 48px; }
.callback__submit { display: flex; justify-content: center; width: 100%; margin-top: 24px; }
.callback__form .form-status { margin-top: 16px; }
.callback__done { margin-top: 24px; }
.callback__done .form-status { margin-top: 0; }
.callback__ok { width: 100%; margin-top: 16px; }
/* The country list is placed against the screen inside the dialog (main.js), above the dialog's scrolling area. */
.country-picker.is-fixed { position: fixed; z-index: 10; }
@media (max-width: 30em) {
  .callback { width: calc(100vw - 16px); max-height: calc(var(--cb-vh, 100dvh) - 16px); }
  .callback__inner { padding: 22px 20px 20px; }
  .callback__title { font-size: 1.375rem; }
  .callback__title .icon { margin-top: 3px; } /* 27.5 px line */
}

@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .form__grid { grid-template-columns: 1fr; }
  .form__footer .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Dark as the navigation bar on every page; the section above always differs, so the start is clear. */
.site-footer { background: var(--header-dark); color: #fff; padding-block: clamp(56px, 5.5vw, 72px) 28px; overflow-wrap: break-word; }
.footer__top {
  display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr));
  gap: 40px clamp(32px, 4vw, 56px); align-items: start; padding-bottom: 44px;
}
.footer__brand img { display: block; width: 155px; height: auto; }
.footer__brand .brand { display: inline-block; padding-block: 6px; margin-block: -6px; } /* 44 px target, same position */
/* Secondary text on #0a1426: #a9b6cc = 8.9:1. */
.footer__brand p { margin-top: 18px; max-width: 22em; font-size: 0.9375rem; line-height: 1.6; color: var(--muted-on-dark); text-wrap: balance; }
.footer__title { margin-bottom: 10px; font-family: var(--font); font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--muted-on-dark); }
.footer__col a, .footer__bottom a {
  display: inline-flex; align-items: center; max-width: 100%; min-height: 36px; padding-block: 4px;
  font-size: 1rem; line-height: 1.4; color: #fff;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color 160ms var(--ease);
}
.footer__col a:hover, .footer__bottom a:hover { text-decoration-color: currentColor; }
.footer__col a, .footer__bottom a { overflow-wrap: anywhere; } /* inline-flex links: a word wider than the column may break instead of overflowing */
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.9375rem; color: var(--muted-on-dark);
}
.footer__bottom a { font-size: 0.9375rem; }
/* Right side of the bottom row: LinkedIn, Instagram, Facebook (one-colour mark + name), then the privacy link — same size and underline. */
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.footer__social .logo, .not-found-footer__social .logo { margin-inline-end: 9px; }
/* "Contact" column: phone, WhatsApp, message and call-back icons in front of the links, the text keeps its own line start. */
.footer__col a .icon, .footer__col a .logo { margin-inline-end: 10px; }

/* Tablet: logo and text on top, link groups below — as many columns as fit without squeezing the names. */
@media (max-width: 64em) {
  /* min(): a column is never wider than the footer itself, so enlarged text drops to one column instead of overflowing. */
  .footer__top { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 30px 32px; }
  .footer__brand { grid-column: 1 / -1; }
}
/* Touch screens (phones and tablets): comfortable 44 px targets. */
@media (pointer: coarse) {
  .footer__col a, .footer__bottom a { min-height: 44px; }
}
@media (max-width: 40em) {
  .footer__col a, .footer__bottom a { min-height: 44px; } /* also without touch (narrow window, enlarged text) */
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0; }
  .footer__links { column-gap: 20px; } /* the three platforms stay on one row at 360 px; the privacy link goes to its own row */
}

/* ==========================================================================
   Inner pages
   ========================================================================== */
/* Used only by the privacy page: the heading block leads straight into the text (the .policy section adds the gap). */
.page-hero { padding-block: clamp(40px, 6vw, 88px) 0; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 4vw, 56px); font-size: 0.875rem; color: var(--muted); }
.breadcrumb a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--ink); } /* 44 px touch target, layout unchanged */
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.page-hero .eyebrow { margin-bottom: 24px; }
.page-hero .h1 { max-width: 16em; margin-bottom: 28px; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.page-hero .facts { margin: 0; }

.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(32px, 6vw, 96px); }
.split .eyebrow { margin-bottom: 16px; }
.split__body > p { font-size: 1.1875rem; line-height: 1.65; }
.split__body > p + p { margin-top: 20px; }

.flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.flow__step { display: flex; padding-right: 20px; }
.flow__box {
  position: relative; flex: 1; display: flex; flex-direction: column;
  padding: 18px 16px; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-weight: 600;
}
.flow__step:not(:last-child) .flow__box::after {
  content: ""; position: absolute; top: 50%; right: -21px; width: 20px; height: 1px; background: var(--blue);
}
.flow__box small { display: block; margin: 4px 0 14px; font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.flow__rel { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-weight: 400; font-size: 0.8125rem; color: var(--muted); }

.module-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.module-group { padding-block: 28px; border-top: 1px solid var(--line-strong); }
.module-group h3 { font-family: var(--font); font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.module-group dl { display: grid; gap: 14px; }
.module-group dt { font-weight: 600; }
.module-group dd { color: var(--muted); font-size: 0.9688rem; }

.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.cta-band .h2 { max-width: 16em; }
.cta-band p { margin-top: 16px; color: var(--muted-on-dark); max-width: 36em; }

/* Legal text: one readable column (≈760 px), 18 px text, clear section headings. */
.page-hero__updated { margin-top: -12px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.policy { padding-top: clamp(40px, 4vw, 56px); }
.prose { max-width: 760px; overflow-wrap: break-word; }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.prose h2 { margin: 48px 0 14px; font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.prose p + p, .prose ul + p { margin-top: 14px; }
.prose p + ul { margin-top: 12px; }
.prose ul { list-style: disc; padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--line-strong); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9em; color: var(--ink); overflow-wrap: anywhere; }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose a:hover { color: var(--blue); }

/* 404: one calm text group on the container's left line. The headline and the solid "back home" button carry the page;
   "404" is only a small label. min-height (never a fixed height) centres the group on tall screens and lets it grow
   on short screens or with enlarged text. No illustration, card, animation or redirect. */
/* The 404 page is a flex column at least one screen tall: main takes the spare height and centres its group, the short
   footer follows it in normal flow. Nothing is fixed or absolute, so on short screens or with enlarged text the page
   simply grows and the footer comes after the content. Paddings shrink with the screen height so a 320×568 phone
   needs no scrolling. */
.not-found-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.not-found {
  flex: 1 0 auto; display: flex; align-items: center;
  padding-bottom: clamp(32px, 6vh, 96px);
}
.site-header ~ main.not-found { padding-top: calc(var(--header-h) + clamp(40px, 8vh, 120px)); }
.not-found__code { margin-bottom: 20px; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--blue); }
.not-found .h1 { max-width: 14em; font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); color: var(--ink); }
.not-found__text { max-width: 34em; margin-top: 24px; text-wrap: pretty; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.6; color: var(--muted); }
.not-found__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: clamp(32px, 3.5vw, 44px); }
.not-found__home { gap: 14px; min-height: 56px; padding: 0 26px; border-radius: 6px; }
.not-found__home:hover { background: #0046cc; }
.not-found__home:focus-visible, .not-found__contact:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.not-found__contact {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; color: var(--navy); text-decoration: underline 1px; text-underline-offset: 5px;
  text-decoration-color: var(--line-strong); transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease);
}
.not-found__contact:hover { color: var(--blue); text-decoration-color: currentColor; }
@media (max-width: 520px) {
  .not-found__home { width: 100%; }
}
/* Short 404 footer: white ground, a light hairline on the content width, 14 px text. The 44 px row height doubles as
   the touch target and leaves ~22 px between the line and the text. If the two items don't fit, they stack. */
.not-found-footer { flex: none; }
.not-found-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px;
  padding-block: 10px 12px; border-top: 1px solid var(--line);
  font-size: 0.875rem; line-height: 20px; color: var(--muted);
}
.not-found-footer__inner > * { display: inline-block; padding-block: 12px; } /* 20 px line + 24 px = 44 px; inline-block keeps the spaces in "© 2026 Orbicon" */
.not-found-footer a {
  color: var(--ink); text-decoration: underline 1px; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease);
}
.not-found-footer a:hover { color: var(--blue); text-decoration-color: currentColor; }
.not-found-footer a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; text-decoration-color: currentColor; }
/* LinkedIn + privacy on the right; each link keeps the 44 px row, the group wraps under the year if it doesn't fit. */
.not-found-footer__inner > .not-found-footer__links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; padding-block: 0; }
.not-found-footer__links > a { display: inline-block; padding-block: 12px; }
.not-found-footer__links > .not-found-footer__social { display: inline-flex; align-items: center; }

@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 0; }
  .flow__step:nth-child(3n) .flow__box::after { display: none; }
}
@media (max-width: 860px) {
  .page-hero__grid, .split, .module-groups { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .flow { grid-template-columns: 1fr; gap: 20px; }
  .flow__step { padding-right: 0; }
  .flow__step:not(:last-child) .flow__box::after,
  .flow__step:nth-child(3n):not(:last-child) .flow__box::after { display: block; top: 100%; right: auto; left: 28px; width: 1px; height: 21px; }
}

/* ==========================================================================
   Film hero — full-bleed montage, text over footage
   ========================================================================== */
/* Home: the bar lies over the film. At the top of the page it is transparent (the scrim's top band keeps the logo
   and links readable); once the page is scrolled main.js adds .is-scrolled and the ground fades to solid dark.
   The height never changes, so nothing moves. Without JS the bar simply stays solid. */
.js .site-header--overlay:not(.is-scrolled) { background-color: transparent; }
html.js.nav-open .site-header--overlay { background-color: var(--header-dark); }
.site-header--overlay ~ main { padding-top: 0; }

.film {
  --film-bg: #0a1426;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  /* The film starts at the very top, under the transparent bar, and fills the visible viewport once — the bar's
     height is not added again. svh = the viewport with mobile browser bars shown. A minimum, not a fixed height:
     with short screens or enlarged text the block grows instead of cutting text. Pure CSS, so the first frame
     already has the final size. */
  min-height: 100vh;
  min-height: 100svh;
  color: #fff; background: var(--film-bg);
}

.film__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Each shot shows its still (same framing as the clip) until the video has a frame, so a slow clip never leaves
   an empty or differently sized area. The first still comes from CSS below, the others are set by main.js. */
.shot {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease);
  background-color: var(--film-bg); background-repeat: no-repeat; background-size: cover; background-position: var(--pos, 50% 50%);
}
.shot.is-active { opacity: 1; z-index: 1; }
/* Cross-fade without a dip: the outgoing shot stays fully visible underneath while the new one fades in on top
   (main.js removes is-previous once the fade is over), so the dark film ground never shows through. */
.shot.is-previous { opacity: 1; transition: none; }
/* --zoom / --origin: optional per-shot framing for wide screens, where a 16:9 clip already fits the frame and
   object-position alone cannot move a face out from under the headline. The clip itself is unchanged. */
.shot video {
  --z: var(--zoom, 1);
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  transform: scale(calc(var(--z) * 1.06)); transform-origin: var(--origin, 50% 50%); transition: transform 8s linear;
}
.shot.is-active video { transform: scale(var(--z)); }

/* Darkening only where it is needed: a light band at the top for the bar, a left-to-right fade behind the text,
   a soft floor for the scroll cue and pause control. The right side of the footage keeps its own light.
   Stops measured against the real frames (2026-09-18): in the brightest 5 % of pixels behind them the sub-text and the
   menu stay ≥ 4.5:1 in every scene (before: 3.4:1 and 3.1:1 in scene 3); nothing changes from 70 % to the right. */
.film__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 13, 28, 0.68) 0, rgba(6, 13, 28, 0.5) var(--header-h), rgba(6, 13, 28, 0.2) calc(var(--header-h) + 40px), rgba(6, 13, 28, 0) calc(var(--header-h) * 2 + 40px)),
    linear-gradient(90deg, rgba(6, 13, 28, 0.76) 0, rgba(6, 13, 28, 0.66) 30%, rgba(6, 13, 28, 0.36) 50%, rgba(6, 13, 28, 0) 70%),
    linear-gradient(0deg, rgba(6, 13, 28, 0.42) 0, rgba(6, 13, 28, 0) 24%);
}
/* Tablets: the sub-text spans more of the width, so the side fade reaches further (sub-text ≥ 5.5:1, menu ≥ 4.9:1 in
   the measured frames at 768 and 1024 px; before 3.3:1 and 4.4:1). */
@media (min-width: 641px) and (max-width: 1100px) {
  .film__scrim {
    background:
      linear-gradient(180deg, rgba(6, 13, 28, 0.72) 0, rgba(6, 13, 28, 0.54) var(--header-h), rgba(6, 13, 28, 0.2) calc(var(--header-h) + 40px), rgba(6, 13, 28, 0) calc(var(--header-h) * 2 + 40px)),
      linear-gradient(90deg, rgba(6, 13, 28, 0.78) 0, rgba(6, 13, 28, 0.7) 40%, rgba(6, 13, 28, 0.44) 66%, rgba(6, 13, 28, 0) 88%),
      linear-gradient(0deg, rgba(6, 13, 28, 0.42) 0, rgba(6, 13, 28, 0) 24%);
  }
}

/* Headline block sits in the optical middle of the visible frame below the bar. */
.film__content { padding-block: calc(var(--header-h) + clamp(24px, 5svh, 64px)) clamp(72px, 11svh, 120px); }
/* One size rule for all three headlines — no scene is shrunk on its own. About 84 px on wide desktops. */
.film__title {
  font-size: clamp(2.5rem, min(5.4vw, 10svh), 5.25rem);
  line-height: 1; letter-spacing: -0.032em; font-weight: 600;
  text-shadow: 0 1px 24px rgba(6, 13, 28, 0.25);
}
.film__leads { display: grid; margin: clamp(18px, 2.6svh, 28px) 0 clamp(30px, 4.8svh, 44px); max-width: 32em; }
.film__lead {
  font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.3125rem); line-height: 1.5; color: rgba(255, 255, 255, 0.9);
}
.film .btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Hero button: one flat white surface — label and a small arrow, no divider and no separate arrow field.
   Hover: a barely darker ground and the arrow moves 3 px right (shared .btn rule); no glow, shadow or scaling. */
.btn--hero {
  min-height: 54px; padding: 0 22px 0 26px; gap: 14px; border-radius: 6px;
  background: #fff; color: var(--navy); font-size: 1rem;
}
.btn--hero:hover { background: #edf1f7; }

/* Scene text: each headline and each sub-text share one grid cell with their siblings, so both blocks keep
   the size of their longest text and the button below never moves. Headlines sit on the bottom of their cell
   (next to the sub-text), sub-texts on the top (next to the headline); a shorter text leaves its spare room
   above the button. The old text is fully gone (0.5 s) before the new one starts, so two texts are never
   readable at once. */
.film__captions { display: grid; max-width: 9.8em; }
.film__caption { grid-area: 1 / 1; align-self: end; text-wrap: balance; opacity: 0; visibility: hidden; }
.film__lead.film__caption { align-self: start; text-wrap: pretty; }
.film__caption.is-active { opacity: 1; visibility: visible; }
/* The first scene is readable from the first paint; the entrance runs only when a scene actually changes. */
/* Longhands on purpose: the "animation" shorthand would reset animation-play-state and override the pause rule. */
/* Old text leaves in 0.35 s; the new headline starts only then (0.35 s delay, 0.5 s), the sub-text 0.05 s later, so the
   two never overlap and the new text is fully readable 0.85–0.9 s after the shot changes. */
.film.has-changed .film__caption.is-active { animation-name: caption-in; animation-duration: 0.5s; animation-timing-function: var(--ease); animation-delay: 0.35s; animation-fill-mode: both; }
.film.has-changed .film__lead.film__caption.is-active { animation-delay: 0.4s; }
.film__caption.is-leaving { visibility: visible; animation: caption-out 0.35s var(--ease) both; }
@keyframes caption-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes caption-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
/* Pausing holds the headline mid-change too — but only once the film has really started,
   so a blocked autoplay still reveals the first headline. */
html[data-video-started="1"].motion-paused .film__caption { animation-play-state: paused; }
/* Pause / play control: a quiet icon bottom-right with a 44×44 hit area; the state is spelled out on hover and focus. */
.film__controls {
  position: absolute; left: 0; right: 0; bottom: calc(clamp(14px, 2.6svh, 28px) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none;
}
.film__controls .motion-toggle { pointer-events: auto; margin-left: auto; }

/* Scroll cue, bottom centre: a thin mouse outline whose wheel line drifts slowly down. Phones: a plain arrow. */
.film__scroll {
  position: absolute; left: 50%; bottom: calc(clamp(14px, 2.6svh, 28px) + env(safe-area-inset-bottom, 0px)); z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px; border-radius: 22px;
  color: rgba(255, 255, 255, 0.85); transition: color var(--dur) var(--ease);
}
.film__scroll:hover { color: #fff; }
.film__scroll:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.film__mouse { position: relative; width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 11px; }
.film__wheel {
  position: absolute; left: 50%; top: 7px; width: 2px; height: 7px; margin-left: -1px; border-radius: 1px; background: currentColor;
  animation: scroll-wheel 2.4s var(--ease) infinite;
}
@keyframes scroll-wheel {
  0% { opacity: 0; transform: translateY(-2px); }
  25% { opacity: 1; }
  70%, 100% { opacity: 0; transform: translateY(9px); }
}
.film__arrow { display: none; }
@media (prefers-reduced-motion: reduce) {
  .film__wheel { animation: none; opacity: 1; transform: none; }
}
/* High-contrast / forced-colours modes keep the system scrollbar. */
@media (forced-colors: active) {
  html { scrollbar-color: auto; scrollbar-width: auto; }
}
/* Land exactly under the bar, so no strip of the film stays visible behind it.
   The section's own top padding keeps its text clear. */
#veziyyet { scroll-margin-top: -16px; }

/* First shot: its still is the film background, requested early by the preload in <head> (same URLs). */
.shot:first-child { background-image: url("/assets/img/film/hero-01-understand-1920.webp"); }
@media (max-width: 900px) {
  .shot:first-child { background-image: url("/assets/img/film/hero-01-understand-1280.webp"); }
}
.motion-toggle--dark {
  position: relative; justify-content: center; gap: 0;
  width: 44px; height: 44px; min-height: 44px; padding: 0; margin-right: -7px;
  background: transparent; border: 0; border-radius: 50%; color: #fff;
}
.motion-toggle--dark::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: rgba(6, 13, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.motion-toggle--dark svg { position: relative; width: 10px; height: 10px; }
.motion-toggle--dark:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.motion-toggle--dark:focus-visible::before { border-color: rgba(255, 255, 255, 0.85); background: rgba(6, 13, 28, 0.78); }
.motion-toggle__tip {
  position: absolute; right: calc(100% + 2px); top: 50%; transform: translate(4px, -50%);
  padding: 6px 10px; border-radius: 4px; background: rgba(6, 13, 28, 0.9);
  font-size: 0.8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.motion-toggle--dark:focus-visible .motion-toggle__tip { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) {
  .motion-toggle--dark:hover::before { border-color: rgba(255, 255, 255, 0.85); background: rgba(6, 13, 28, 0.78); }
  .motion-toggle--dark:hover .motion-toggle__tip { opacity: 1; transform: translate(0, -50%); }
}
.motion-paused .film .shot video { transition: none; }

/* Phones: footage takes the upper part, text sits on the fade below it */
@media (max-width: 640px) {
  .film { align-items: end; }
  .film__media { bottom: auto; height: 66svh; }
  /* z-index: above the active shot (z-index 1) — without it the fade was hidden under the footage and the headline sat on
     a hard, sometimes bright edge (measured 2.3:1 in scene 2). */
  .film__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: 48%; background: linear-gradient(0deg, var(--film-bg), rgba(10, 20, 38, 0)); }
  .shot video { --z: 1; object-position: var(--pos-m, var(--pos, 50% 50%)); transform-origin: 50% 50%; }
  .shot { background-position: var(--pos-m, var(--pos, 50% 50%)); }
  .film__scrim { background: linear-gradient(180deg, rgba(6, 13, 28, 0.72) 0, rgba(6, 13, 28, 0.54) var(--header-h), rgba(6, 13, 28, 0.2) calc(var(--header-h) + 24px), rgba(6, 13, 28, 0) calc(var(--header-h) * 2 + 24px)); }
  /* Bottom padding keeps a clear gap between the button and the scroll cue row. */
  .film__content { padding-block: calc(var(--header-h) + 24px) 84px; }
  /* Sized so the longest headline ("Sizə uyğun sistemlər qururuq.") stays within two lines. */
  .film__title { font-size: clamp(2.125rem, 9.4vw, 3rem); line-height: 1.02; }
  .film__captions { max-width: none; }
  .film__leads { margin: 14px 0 28px; }
  .film__lead { font-size: 1.0625rem; }
  .film__content .btn { width: 100%; justify-content: center; }
  .film__controls { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .film__scroll { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .film__mouse { display: none; }
  .film__arrow { display: block; }
}

/* Very short screens (or enlarged text on them): tighten the vertical rhythm so the text still fits
   and the scroll cue and pause control stay inside the viewport. */
@media (max-height: 620px) {
  .film__content { padding-block: calc(var(--header-h) + 20px) 64px; }
  .film__leads { margin: 12px 0 20px; }
}

/* ==========================================================================
   Statement — one calm text group on white, on the content container's left line
   ========================================================================== */
/* No forced height: the section is as tall as its text plus the padding. */
.statement { padding-block: clamp(56px, 4vw + 40px, 104px); background: var(--paper); }
/* Label, headline and explanation appear together, once, as a single group (a short 14 px rise in 0.45 s). */
.statement__body { --reveal-y: 14px; --reveal-dur: 0.45s; }
.statement__label { display: block; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--muted); }
.statement__text {
  margin-top: 20px; max-width: 900px;
  font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem);
  line-height: 1.14; letter-spacing: -0.022em; font-weight: 500; color: var(--ink); text-wrap: balance;
  overflow-wrap: break-word; /* only a single word wider than the whole line (enlarged text on a small phone) is split */
}
/* The highlighted phrase moves to the next line as a whole when that is enough; when even a full line is too
   narrow (small screens, enlarged text) it wraps inside itself like normal text, so it never overflows. */
.statement__text em { display: inline-block; max-width: 100%; font-style: normal; color: var(--blue); }
/* Phones: the phrase wraps inside itself there anyway; as inline text the closing full stop (EN/RU) stays on the last
   word instead of dropping to a line of its own (measured at 390/320 px). */
@media (max-width: 30em) { .statement__text em { display: inline; } } /* max-width: a longer phrase (Russian, enlarged text) wraps inside the line */
.statement__sub {
  margin-top: 30px; max-width: 700px;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.6; color: var(--muted); text-wrap: pretty;
}

/* ==========================================================================
   Feature — Services: intro + video on top, six service categories below, all inside the content container
   ========================================================================== */
.feature { padding-block: var(--section); background: var(--mist); }
/* Menu links land with the section exactly under the fixed bar (no strip of the previous section), like the other sections. */
#heller, #elaqe { scroll-margin-top: -16px; }
/* Source order is the phone order (intro → services → contact → video); wide screens place the video beside the intro. */
.feature__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "intro media" "services services";
  column-gap: clamp(48px, 4.5vw, 64px); row-gap: clamp(56px, 6vw, 88px); align-items: center;
}
.feature__intro { grid-area: intro; --reveal-y: 12px; --reveal-dur: 0.4s; }
.feature__intro .eyebrow { display: block; margin-bottom: 20px; }
.feature__lead { margin-top: 24px; max-width: 34em; font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* The clip is shown whole in its own 16:9 frame: no stretching, cropping, zoom, sticky or scroll-driven movement. */
.feature__media { grid-area: media; position: relative; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: var(--film-bg, #0a1426); }
.feature__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Without JavaScript the clips get no source: hide the empty players (Chrome would show its own controls on them)
   and the pause buttons; the first film still and the services still stay as backgrounds. */
html:not(.js) .film video, html:not(.js) .feature__media video, html:not(.js) .motion-toggle { display: none; }
html:not(.js) .feature__media { background: var(--film-bg, #0a1426) url("/assets/img/film/feature-work-1280.webp") center / cover no-repeat; }
.feature__toggle { position: absolute; right: 12px; bottom: 12px; margin: 0; }

/* Six categories read left to right, then the next row. Information, not links: no cards, icons or numbers. */
.feature__services { grid-area: services; align-self: start; --reveal-y: 12px; --reveal-dur: 0.4s; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 3.5vw, 48px) clamp(32px, 3.5vw, 48px); }
.service-grid li { padding-top: 22px; border-top: 1px solid var(--line-strong); }
.service-grid__name { font-size: clamp(1.3125rem, 1.25rem + 0.1vw, 1.375rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: break-word; } /* a word wider than the column (e.g. with enlarged text) breaks only then */
.service-grid__desc { margin-top: 10px; font-size: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem); line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* Quiet contact link: no permanent underline; a thin one under the text on hover. 44 px tall touch target. */
.feature__contact {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: clamp(32px, 3.5vw, 44px);
  font-weight: 600; color: var(--blue); text-decoration: none;
}
.feature__contact span {
  text-decoration: underline 1px; text-decoration-color: transparent; text-underline-offset: 5px;
  transition: text-decoration-color 180ms var(--ease);
}
.feature__contact:hover span { text-decoration-color: currentColor; }
.feature__contact:hover .arrow { transform: translateX(3px); }

/* Medium screens: services in two columns. */
@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Narrow tablets and phones: one column in source order — intro, services, contact link, then the 16:9 video. */
@media (max-width: 860px) {
  .feature__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "services" "media"; row-gap: 48px; }
}
@media (max-width: 640px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 520px) {
  .pillars li { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .pillars__code { font-size: 1.25rem; }
}

/* Home page projects: compact text (≈35 %) beside real product screenshots (≈65 %), hairlines between projects */
.projects { padding-block: clamp(64px, 6vw, 96px); background: #0a1426; color: #fff; overflow-wrap: anywhere; }
.projects :focus-visible { outline-color: #fff; }
/* Menu link lands exactly under the fixed bar, so no strip of the previous (dark blue) section shows above it. */
#layihe { scroll-margin-top: -16px; }
.projects__heading {
  font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.125rem); line-height: 1.1; letter-spacing: -0.022em; font-weight: 600; text-wrap: balance;
}
/* One short line under the heading; solid muted tone (#a9b6cc on #0a1426), not white at reduced opacity. */
.projects__intro { margin-top: 16px; max-width: 36em; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.6; color: var(--muted-on-dark); text-wrap: balance; }

/* Text and links on the left, picture on the right; on phones: text → picture → links. */
.project {
  --reveal-y: 14px; --reveal-dur: 0.4s;
  display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  grid-template-areas: ". media" "text media" "links media" ". media";
  grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(40px, 5vw, 80px);
  margin-top: clamp(40px, 5vw, 64px);
}
.project + .project { margin-top: clamp(56px, 6vw, 88px); padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--line-dark); }
.project__text { grid-area: text; }
.project__media { grid-area: media; margin: 0; }
.project__links { grid-area: links; display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 24px; }

/* Distinct levels: kind of work (small, light blue) → name → subtitle → description. */
.project__kind { font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: var(--blue-on-dark); }
.project__title { margin-top: 10px; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.375rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.project__subtitle { margin-top: 8px; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, 0.9); }
.project__desc { margin-top: 16px; max-width: 30em; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); line-height: 1.6; color: var(--muted-on-dark); text-wrap: pretty; }

/* One text link per destination: no permanent underline, a thin one on hover, arrow moves ≤ 3 px, 44 px target. */
.project__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 1.0625rem; font-weight: 600; color: #fff; text-decoration: none;
}
.project__link span:not(.sr-only) { text-decoration: underline 1px; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 180ms var(--ease); }
.project__link:hover span:not(.sr-only) { text-decoration-color: currentColor; }
.project__link .arrow { transition: transform 180ms var(--ease); }
.project__link:hover .arrow { transform: translateX(3px); }
.project__link:hover .arrow--out { transform: translate(2px, -2px); }

/* Real screenshots at their own proportions; width/height attributes reserve the space before they load.
   A hairline edge instead of frames, glow or big shadows. */
.project__shot, .project__phone { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.project__shot { border-radius: 8px; }
.project__phone { border-radius: 14px; }
.project__caption { margin-top: 12px; font-size: 0.875rem; line-height: 1.5; color: var(--muted-on-dark); }
/* Walvero: website and app side by side — the phone never covers the page. */
.project__duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.3fr); gap: clamp(16px, 2vw, 28px); align-items: end; }
/* 7 Gül: three app screens, the main visual. */
.project__phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); max-width: 640px; }

@media (max-width: 960px) {
  .project { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "media" "links"; grid-template-rows: auto; }
  .project__media { margin-top: 28px; }
  .project__links { margin-top: 16px; }
}
@media (max-width: 640px) {
  /* Phones: pictures follow each other with one steady gap; app screens are centred and never shrunk to thumbnails. */
  /* Walvero: the web page at full content width, the app screen centred below it. */
  .project__duo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .project__duo .project__phone { justify-self: center; width: clamp(210px, 60vw, 240px); max-width: 100%; }
  /* 7 Gül: the home screen on top and centred, the other two side by side below it. */
  .project__phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; max-width: 360px; margin-inline: auto; }
  .project__phones .project__phone:first-child { grid-column: 1 / -1; justify-self: center; width: clamp(210px, 64vw, 240px); max-width: 100%; }
  .project__phone { border-radius: 12px; }
  .project__caption { margin-top: 16px; }
}

/* Connection notice (main.js): small, dark blue, thin border, under the header on the right; never takes space or
   blocks a click; 180 ms opacity (reduced motion: instant, via the global rule). The inline variant sits in the
   call-back dialog above its button. */
.net-status {
  position: fixed; z-index: 40;
  top: calc(var(--header-h) + 12px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 8px 14px;
  font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: #fff;
  background: var(--navy); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(3, 12, 28, 0.18); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 180ms var(--ease), visibility 0s linear 180ms;
}
.net-status.is-shown { opacity: 1; visibility: visible; transition: opacity 180ms var(--ease); }
.net-status svg { flex: none; color: var(--blue-on-dark); }
.net-status--inline { position: static; margin-top: 20px; max-width: none; box-shadow: none; opacity: 1; visibility: visible; }
.net-status--inline[hidden] { display: none; }

/* ==========================================================================
   Intro (home page, first view of a tab session — the <head> script sets html.has-intro;
   the root class must not be "intro": ".intro" would then match <html> itself and hide the page)
   All three layers share one canvas: the whole logo, 960 × 212, from the original PNG. Box fractions (from the source):
   mark 0.005–0.240 (centre 0.122), wordmark from 0.279.
     0–1000 ms     the two parts come in from below / above along the mark's 45° arms and join, the mark centred;
                   one symmetric ease-in-out over the whole second (soft start, soft landing — not most of the way first)
     1000–1150 ms  pause
     1150–1700 ms  mark and wordmark slide left together to the centred logo; the wordmark, hidden at first, is uncovered
                   left to right by a clip starting at its own left edge — letters appear from the mark's right side
     1700–1850 ms  the complete logo, centred, stays
     1850–2100 ms  the layer fades
   Distances are fractions of the logo box, so they shrink with it on phones. Opacity / transform / clip only; no
   rotation, glow or loader. The layer images are CSS backgrounds (downloaded only when the intro plays). If JavaScript
   never removes the class, the fade's end state (hidden, no pointer events) keeps the page usable. Any key, pointer or
   wheel: quick exit.
   ========================================================================== */
.intro { display: none; }
html.has-intro .intro[hidden] { display: grid !important; } /* beats the site-wide [hidden] rule only while the intro plays */
.intro {
  position: fixed; inset: 0; z-index: 2000; place-items: center;
  /* The site's dark blue with a very faint, wide light in the middle (slightly lighter navy); several soft stops, so no
     ring, band or spot shows. */
  background-color: var(--navy);
  background-image: radial-gradient(ellipse 85% 75% at 50% 50%, #0a2b5c 0%, #08264f 30%, #061f46 55%, #041c41 75%, var(--navy) 100%);
  animation: intro-out 250ms var(--ease) 1850ms forwards;
}
html.intro-skipping .intro { animation: intro-out 160ms var(--ease) forwards; }
.intro__logo { position: relative; width: min(300px, 64vw); aspect-ratio: 960 / 212; }
.intro__slide, .intro__layer { position: absolute; inset: 0; }
.intro__layer { background: center / 100% 100% no-repeat; }
html.has-intro .intro__slide { animation: intro-slide 550ms cubic-bezier(0.65, 0, 0.35, 1) 1150ms both; }
html.has-intro .intro__layer--a { background-image: url("/assets/img/brand/intro-mark-a.webp"); animation: intro-from-below 1000ms cubic-bezier(0.45, 0, 0.55, 1) both; }
html.has-intro .intro__layer--b { background-image: url("/assets/img/brand/intro-mark-b.webp"); animation: intro-from-above 1000ms cubic-bezier(0.45, 0, 0.55, 1) both; }
html.has-intro .intro__layer--word { background-image: url("/assets/img/brand/intro-word.webp"); animation: intro-reveal 550ms cubic-bezier(0.65, 0, 0.35, 1) 1150ms both; }
/* Mark centred on the screen: 0.5 − 0.122 = 37.8 % of the box to the right of its place in the logo (the hidden wordmark
   moves with it; its visible part never reaches past the box's right edge, so nothing is cut on a phone). */
@keyframes intro-slide { from { transform: translateX(37.8%); } to { transform: none; } }
/* The left part comes from below, the right part from above, along the mark's 45° arms (a purely vertical path would
   pass one arm through the other), about a fifth of the mark's height: x 3.1 % of the box width = y 14.1 % of its
   height (≈ 9–10 px on a wide screen, less on a phone). Transform runs 0 → 100 % as one segment, so the ease-in-out spans
   the whole second; no overshoot. */
@keyframes intro-from-below { 0% { opacity: 0; transform: translate(-3.1%, 14.1%); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes intro-from-above { 0% { opacity: 0; transform: translate(3.1%, -14.1%); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* The wordmark starts at 0.279 of the box: hidden (right inset 72.1 %) → fully shown, same easing as the slide. */
@keyframes intro-reveal { from { clip-path: inset(0 72.1% 0 0); } to { clip-path: inset(0); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* ==========================================================================
   Motion
   ========================================================================== */
.js [data-reveal] {
  opacity: 0; transform: translateY(var(--reveal-y, 18px));
  transition: opacity var(--reveal-dur, 0.8s) var(--ease), transform var(--reveal-dur, 0.8s) var(--ease);
  transition-delay: var(--delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pulse {
  0% { stroke-dashoffset: 10; opacity: 0; }
  8% { opacity: 1; }
  45% { stroke-dashoffset: -100; opacity: 1; }
  50%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes row-focus {
  0%, 100% { opacity: 0; }
  4%, 21% { opacity: 1; }
  26% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .motion-toggle { display: none; }
  .btn:hover .arrow, .link-arrow:hover .arrow, .feature__contact:hover .arrow, .form__submit:hover .arrow { transform: none; }
}