/* Landing v2: base styles. Kalka look of the film: paper, graphite, architect blue, red only for checks and errors.
   No gradients, glows or rounded corners on drawings; depth is paper on paper. Scene files add their own CSS. */
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-style: normal; font-display: swap; src: url(../vendor/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-style: normal; font-display: swap; src: url(../vendor/fonts/manrope-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url(../vendor/fonts/cormorant-garamond-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url(../vendor/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Latin with diacritics (Slovenian, Montenegrin: č š ž ć đ), Georgian and Thai. Downloaded only when a page uses them. */
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-style: normal; font-display: swap; src: url(../vendor/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url(../vendor/fonts/cormorant-garamond-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Sans Georgian'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(../vendor/fonts/noto-sans-georgian-georgian-wght-normal.woff2) format('woff2'); unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; }
@font-face { font-family: 'Noto Serif Georgian'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(../vendor/fonts/noto-serif-georgian-georgian-wght-normal.woff2) format('woff2'); unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; }
@font-face { font-family: 'Noto Sans Thai'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(../vendor/fonts/noto-sans-thai-thai-wght-normal.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Serif Thai'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(../vendor/fonts/noto-serif-thai-thai-wght-normal.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Arabic'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(../vendor/fonts/noto-sans-arabic-arabic-wght-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Naskh Arabic'; font-weight: 400 700; font-style: normal; font-display: swap; src: url(../vendor/fonts/noto-naskh-arabic-arabic-wght-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* Arial tuned to Manrope's widths (measured on the RU copy: 500 vs Arial 1.036, 600-800 vs Arial Bold 0.98-1.01) and
   vertical metrics (ascent 2132, descent 600 of 2000), so the text keeps its line breaks when Manrope swaps in. */
@font-face { font-family: 'Manrope Fallback'; font-weight: 100 549; src: local('Arial'), local('ArialMT'), local('Roboto'); size-adjust: 103.6%; ascent-override: 102.9%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; font-weight: 550 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 100.5%; ascent-override: 106.1%; descent-override: 29.9%; line-gap-override: 0%; }

:root {
  --paper: #F1EDE3; --paper2: #E7E1D3; --paper3: #D9D2C2; --sheet: #FBF9F4; --plate: #FFFEFB;
  --ink: #26292F; --ink-2: #41454D; --soft: #5B5F68; --blue: #1E4FD8; --blue-deep: #1A45C0; --red: #E5484D; --red-ink: #B8292F;
  --line: rgba(38, 41, 47, .2); --line-soft: rgba(38, 41, 47, .1);
  --mono: 'IBM Plex Mono', 'Noto Sans Georgian', 'Noto Sans Thai', 'Noto Sans Arabic', ui-monospace, monospace; --sans: 'Manrope', 'Noto Sans Georgian', 'Noto Sans Thai', 'Noto Sans Arabic', 'Manrope Fallback', system-ui, sans-serif; --serif: 'Cormorant Garamond', 'Noto Serif Georgian', 'Noto Serif Thai', 'Noto Naskh Arabic', Georgia, serif;
  --gutter: 16px; --header: 60px; --wrap: 1240px;
  /* the one left edge of all text on wide screens: where the 1240 column of .wrap starts */
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2));

  /* elevation (design review 20.10.2026, impeccable): paper on paper, light from straight above. Each shadow is an umbra
     (1-2 px), a penumbra (negative spread) and an ambient layer. L0 ground = paper + grid, no edge, no shadow;
     L1 sheet = --sheet, 1 px --edge-1, --hi + --sh-1; L2 plate = --plate or media, 1 px --edge-2, --hi + --sh-2;
     L3 float = --sheet, --sh-3. Primary buttons --sh-btn. No zero-blur offset shadows anywhere. */
  --edge-1: rgba(38, 41, 47, .12); --edge-2: rgba(38, 41, 47, .20);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .75);
  --sh-1: 0 1px 1px rgba(60, 50, 30, .07), 0 2px 6px -2px rgba(60, 50, 30, .10), 0 10px 22px -14px rgba(60, 50, 30, .18);
  --sh-2: 0 1px 2px rgba(38, 41, 47, .10), 0 6px 14px -6px rgba(60, 50, 30, .18), 0 24px 44px -20px rgba(60, 50, 30, .30);
  --sh-3: 0 2px 4px rgba(20, 22, 26, .14), 0 12px 24px -8px rgba(20, 22, 26, .22), 0 32px 64px -24px rgba(20, 22, 26, .34);
  --sh-btn: 0 1px 1px rgba(14, 36, 110, .30), 0 4px 10px -2px rgba(30, 79, 216, .35), 0 14px 26px -12px rgba(30, 79, 216, .45);
  --sh-btn-press: 0 1px 2px rgba(14, 36, 110, .35);
  --sh-press: 0 1px 1px rgba(38, 41, 47, .14), 0 2px 4px -2px rgba(58, 46, 26, .22);
  /* retired: the old flat offset shadow; kept as a name so any rule still using it gets the plate shadow */
  --shadow: var(--sh-2);
  /* fibre grain of a sheet (inline SVG noise, very faint) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .13 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* type scale (impeccable): one size per role. Phone / desktop: h1 32/60, h2 25/44 (every section heading, scene
     headings too), h3 19/24, display serif 28/44, lead 17/19, body 16/17, small 14, labels 12 (floor) */
  --fs-h1: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  --fs-h2: clamp(1.5rem, 1.05rem + 2.1vw, 2.75rem);
  --fs-h3: clamp(1.1875rem, 1rem + .7vw, 1.5rem);
  --fs-display: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-body: 1rem; --fs-sm: .875rem; --fs-label: .75rem;

  /* spacing rhythm, 4 px base (impeccable): space above a heading is at least 3x the space below it */
  --sp-sec: 48px; --sp-after-scene: 32px; --sp-sub: 48px; --sp-head: 12px; --sp-lead: 24px; --gap-card: 16px; --pad-sheet: 20px;

  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M60 0H0V60' fill='none' stroke='%2326292F' stroke-opacity='.075'/%3E%3Cpath d='M12 0V60M24 0V60M36 0V60M48 0V60M0 12H60M0 24H60M0 36H60M0 48H60' fill='none' stroke='%2326292F' stroke-opacity='.035'/%3E%3C/svg%3E");
  --ease: cubic-bezier(.22, .8, .2, 1);
  /* interaction timing (emil): presses fast, releases a little slower, UI changes 220 ms */
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --t-press: 70ms; --t-release: 160ms; --t-ui: 220ms;
}
@media (min-width: 761px) { :root { --gutter: 40px; --header: 68px; --fs-body: 1.0625rem; --sp-sec: 72px; --sp-after-scene: 40px; --sp-sub: 56px; --sp-head: 14px; --sp-lead: 32px; --gap-card: 24px; --pad-sheet: 28px; } }
@media (min-width: 1024px) { :root { --sp-sec: 88px; --sp-after-scene: 48px; --sp-sub: 64px; --sp-head: 16px; --sp-lead: 40px; --pad-sheet: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-x: clip; scroll-padding-top: calc(var(--header) + 12px); }
body { margin: 0; background: var(--paper) var(--grid); color: var(--ink); font: 500 var(--fs-body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
button { font: inherit; color: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* drawn scenes: the engine pins the section and feeds progress to the scene */
.scene { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.scene-stage { position: absolute; inset: 0; }
.scene-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* mono only for numerals, codes and short labels (never sentences), 12 px floor */
.mono { font: 600 var(--fs-label)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
/* text versions of the scenes (page.mjs): hidden while the drawing runs; the model steps stay for screen readers and
   show on screen when the scenes are drawn once (no GSAP or «reduce motion») */
.scene-text { display: none; }
.model-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v2-still .model-steps { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
/* without JavaScript nothing is pinned or drawn: the sections take their text height, the first screen stays plain */
@media (scripting: none) {
  .scene { height: auto; overflow: visible; }
  .scene-stage { display: none; }
  .scene .scene-text { display: block; padding: clamp(56px, 8vw, 112px) 0; }
  .model-steps { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .scene .hx-pre { position: relative; inset: auto; min-height: 100svh; }
  .hdr { background: var(--paper); border-bottom-color: var(--line); }
}

/* browser surfaces in the palette */
::selection { background: rgba(30, 79, 216, .2); color: var(--ink); }
html { accent-color: var(--blue); caret-color: var(--blue); }

/* Georgian and Thai have no capitals, and letter spacing pulls Thai vowel and tone marks apart: labels stay in normal
   case without spacing (also the letter-spacing the scenes set on SVG text). Thai needs a taller line. */
:lang(ka) .mono, :lang(th) .mono, :lang(ar) .mono, :lang(ka) [class*="mono"], :lang(th) [class*="mono"], :lang(ar) [class*="mono"] { text-transform: none; letter-spacing: 0; }
:lang(ka) svg text, :lang(th) svg text, :lang(ar) svg text { letter-spacing: 0 !important; text-transform: none; }
:lang(th) body, :lang(th) .lead { line-height: 1.7; }
:lang(ka) h1, :lang(ka) h2, :lang(ka) h3, :lang(th) h1, :lang(th) h2, :lang(th) h3 { letter-spacing: 0; }