/* The public site's visual language, applied to the portal surface.
   ==========================================================================

   The owner obtained the marketing site built by an outside developer
   (AlexGudman/-zixan.uz: five static HTML pages, one stylesheet, hard-coded
   vacancies, a form posting to a third-party n8n webhook) and decided the
   ERP keeps every behaviour while wearing that site's appearance. This sheet
   is that decision, and nothing else: no view, no query and no rule changes
   because of it.

   WHY A SEPARATE SHEET RATHER THAN NEW VALUES IN tokens.css.
   tokens.css is the language of FOUR surfaces — console, employer cabinet,
   workforce catalogue and this portal. Repainting it navy-and-amber would
   restyle the staff console by accident, which is the one thing the owner
   asked to leave alone. So the site's palette is declared here, scoped to
   `[data-surface="site"]`, which only portal/base.html sets. The token NAMES
   are untouched, so all 46 portal templates and 1,046 lines of portal.css
   keep working while reading different values.

   SPECIFICITY, deliberately. tokens.css declares light on `:root` (0,1,0) and
   dark on `:root:not([data-theme="light"])` / `:root[data-theme="dark"]`
   (0,2,0). This sheet loads after it, so its light block must NOT be able to
   win against tokens' dark block — hence light here is (0,2,0) and the two
   dark blocks below are (0,3,0). A reader in dark mode therefore still gets
   dark, with the site's night palette rather than the console's.

   THREE DOCUMENTED DEVIATIONS from the source site, each one a contrast
   failure that would have shipped into a product whose design system states
   its ratios:

     1. The primary button. The source paints white on the amber gradient:
        #ffffff on #F59E0B is 2.15:1, against the 4.5:1 this product holds
        itself to and the 3:1 WCAG 1.4.11 asks of a control. The amber is
        kept exactly — it is the most recognisable thing on the page — and
        the ink becomes the brand navy: #0F2440 on #F59E0B is 8.9:1. The
        source site already writes dark ink on amber in its own category
        badges, so this is its own idiom, not an imported one.

     2. The money figure. The source green #10B981 is 2.48:1 on white and
        fails even the 3:1 that large bold text is allowed. `--money` below
        is #059669 — 3.94:1, the closest green to the original that a 20px
        800-weight figure may legally be. Ordinary `--success` keeps the
        product's accessible value, because it also paints 13px chips.

     3. Muted text. The source's #94A3B8 is 2.4:1. It stays as a decorative
        ink (`--n-400`, icons and rules) and text that must be read uses
        #475569 (7.1:1), which is the source's own secondary colour.

   THE WEBFONT, and the reasoning it overturns. tokens.css argues, correctly
   for a working screen, that a webfont buys brand identity and nothing else.
   A public marketing site is the one surface where brand identity IS the
   deliverable, and the owner asked for this site's appearance specifically.
   Inter and Nunito are therefore self-hosted (CSP has no font origin and
   gains none: `font-src 'self'` already covers these). The cost is held to
   123 KB total by shipping the variable faces, Latin and Cyrillic only —
   Google's `latin` subset already carries U+02BB–02BC, so Uzbek needs no
   latin-ext, which alone saved 85 KB. `font-display: swap` means the text is
   readable before a byte of it arrives. */

/* --- the two faces --------------------------------------------------------
   One file per family per script, variable across the whole weight range the
   design uses, so Nunito 900 costs no download that Nunito 700 did not. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../zixan/fonts/inter-cyrillic.de93fdc85e3d.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../zixan/fonts/inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("../zixan/fonts/nunito-cyrillic.fd4986b86093.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("../zixan/fonts/nunito-latin.166202cc391c.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- the palette, light --------------------------------------------------- */
:root[data-surface="site"] {
  /* The source site's own hexadecimals, mapped onto the ramp the portal
     already reads. Ratios are against --n-0 (#ffffff). */
  --n-0: #ffffff;
  --n-25: #f8fafc; /* the source's --bg */
  --n-50: #f1f5f9;
  --n-100: #e9eef5;
  --n-200: #e2e8f0; /* the source's --border */
  --n-400: #94a3b8; /* DECORATION ONLY — 2.40:1, the source's --text-muted */
  --n-600: #475569; /* muted text  7.10:1  — the source's --text-secondary */
  --n-900: #0f172a; /* body text  17.85:1  — the source's --text-primary */
  --frame: #ffffff;

  /* Navy carries every interactive thing that is not the one amber CTA. */
  --brand: #1e3a5f; /* 11.03:1 */
  --brand-hover: #2c5282;
  --brand-ink: #1e3a5f;
  --brand-soft: #eef2f8;
  --brand-soft-2: #d6e0ee;
  --brand-contrast: #ffffff;

  /* Amber is the accent, and on this surface it is a SURFACE colour, never
     an ink: every use below pairs it with --accent-ink. */
  --accent-amber: #f59e0b;
  --accent-amber-dark: #d97706;
  --accent-amber-light: #fcd34d;
  --accent-ink: #0f2440; /* 8.90:1 on --accent-amber */

  /* Deviation 2. Only the salary figure uses it, only at 20px/800 and up. */
  --money: #059669; /* 3.94:1 — large bold text only */

  --danger: #b3261e;
  --warn: #9a5b00;
  --warn-soft: #fff7e8;
  --warn-line: #e8c98a;
  --success: #0b7a54; /* unchanged: it still paints 13px chips */
  --success-soft: #eafaf3;

  --focus: #1e3a5f;

  /* The dark stage the hero, the page header and the footer are drawn on. */
  --stage: #0a1628;
  --stage-2: #1e3a5f;
  --stage-3: #0d3459;
  --stage-ink: #ffffff;
  --stage-ink-soft: rgba(255, 255, 255, 0.72); /*  9.0:1 on --stage */
  --stage-ink-faint: rgba(255, 255, 255, 0.5);
  --stage-line: rgba(255, 255, 255, 0.1);

  /* Type. Nunito sets every heading, Inter everything else — the source's
     exact pairing. */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Nunito", "Inter", system-ui, -apple-system, sans-serif;

  /* Shape. The source is markedly rounder than the console: a card at 28px
     is most of what makes it read as a consumer site rather than a tool. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Elevation. The console's law — borders carry structure, shadow carries
     transience — is a working-screen law. A marketing card that lifts on
     hover is the transience here, so --elev-1 comes back on this surface
     only, at the source's own values. */
  --elev-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --elev-card: 0 4px 16px rgba(30, 58, 95, 0.1), 0 2px 8px rgba(30, 58, 95, 0.06);
  --elev-lift: 0 10px 40px rgba(30, 58, 95, 0.15), 0 4px 16px rgba(30, 58, 95, 0.08);
  --elev-sticky: 0 1px 0 var(--n-200), 0 1px 3px rgba(15, 36, 64, 0.08);
  --elev-2: 0 10px 40px rgba(30, 58, 95, 0.15);
  --elev-3: 0 20px 60px rgba(30, 58, 95, 0.2);
  --elev-amber: 0 8px 32px rgba(245, 158, 11, 0.3);

  --header-h: 72px;
}

/* --- the palette, dark ----------------------------------------------------
   The source site ships no dark theme; it ships the three variables it would
   have been built from (--dark-bg, --dark-card, --dark-border). Those are the
   surfaces below, and the amber and green are opened out until they clear the
   same ratios against them that their light counterparts clear on white.

   The portal's theme toggle is an existing, working feature. Losing it to a
   restyle would be exactly the "существующие функции" the owner asked to
   keep, so the night palette is part of the port, not an afterthought. */
@media (prefers-color-scheme: dark) {
  :root[data-surface="site"]:not([data-theme="light"]) {
    --n-0: #112240; /* the source's --dark-card */
    --n-25: #0a1628; /* the source's --dark-bg */
    --n-50: #16294a;
    --n-100: #1c3355;
    --n-200: #1e3a5f; /* the source's --dark-border */
    --n-400: #7d8ea8; /*  4.30:1 — decoration */
    --n-600: #aebdd4; /*  8.15:1 — muted text */
    --n-900: #eef3fb; /* 15.60:1 — body text */
    --frame: #0d1e39;

    --brand: #7aa5ff; /*  7.10:1 */
    --brand-hover: #9bbcff;
    --brand-ink: #a8c4ff; /*  9.10:1 */
    --brand-soft: #16294a;
    --brand-soft-2: #24406b;
    --brand-contrast: #0a1628;

    --accent-amber: #fbbf24;
    --accent-amber-dark: #f59e0b;
    --accent-amber-light: #fde68a;
    --accent-ink: #0a1628; /* 11.4:1 on --accent-amber */

    --money: #34d399; /* 9.60:1 on --n-0 */

    --danger: #ff8a80;
    --warn: #ffc46b;
    --warn-soft: #2a2113;
    --warn-line: #55411f;
    --success: #4fd1b0;
    --success-soft: #102d28;

    --focus: #7aa5ff;

    --stage: #060f1d;
    --stage-2: #112240;
    --stage-3: #0a2743;
    --stage-line: rgba(255, 255, 255, 0.08);

    --elev-1: 0 1px 3px rgba(0, 0, 0, 0.5);
    --elev-card: 0 4px 16px rgba(0, 0, 0, 0.45);
    --elev-lift: 0 12px 40px rgba(0, 0, 0, 0.6);
    --elev-sticky: 0 1px 0 var(--n-200), 0 1px 3px rgba(0, 0, 0, 0.5);
    --elev-2: 0 10px 40px rgba(0, 0, 0, 0.6);
    --elev-3: 0 20px 60px rgba(0, 0, 0, 0.7);
    --elev-amber: 0 8px 32px rgba(245, 158, 11, 0.25);
  }
}
:root[data-surface="site"][data-theme="dark"] {
  --n-0: #112240;
  --n-25: #0a1628;
  --n-50: #16294a;
  --n-100: #1c3355;
  --n-200: #1e3a5f;
  --n-400: #7d8ea8;
  --n-600: #aebdd4;
  --n-900: #eef3fb;
  --frame: #0d1e39;

  --brand: #7aa5ff;
  --brand-hover: #9bbcff;
  --brand-ink: #a8c4ff;
  --brand-soft: #16294a;
  --brand-soft-2: #24406b;
  --brand-contrast: #0a1628;

  --accent-amber: #fbbf24;
  --accent-amber-dark: #f59e0b;
  --accent-amber-light: #fde68a;
  --accent-ink: #0a1628;

  --money: #34d399;

  --danger: #ff8a80;
  --warn: #ffc46b;
  --warn-soft: #2a2113;
  --warn-line: #55411f;
  --success: #4fd1b0;
  --success-soft: #102d28;

  --focus: #7aa5ff;

  --stage: #060f1d;
  --stage-2: #112240;
  --stage-3: #0a2743;
  --stage-line: rgba(255, 255, 255, 0.08);

  --elev-1: 0 1px 3px rgba(0, 0, 0, 0.5);
  --elev-card: 0 4px 16px rgba(0, 0, 0, 0.45);
  --elev-lift: 0 12px 40px rgba(0, 0, 0, 0.6);
  --elev-sticky: 0 1px 0 var(--n-200), 0 1px 3px rgba(0, 0, 0, 0.5);
  --elev-2: 0 10px 40px rgba(0, 0, 0, 0.6);
  --elev-3: 0 20px 60px rgba(0, 0, 0, 0.7);
  --elev-amber: 0 8px 32px rgba(245, 158, 11, 0.25);
}

/* The aliases portal.css consumes are re-pointed with the ramp, because
   tokens.css computed them from the OLD values at its own cascade position. */
:root[data-surface="site"] {
  --bg: var(--n-25);
  --surface: var(--n-0);
  --surface-2: var(--n-50);
  --text: var(--n-900);
  --muted: var(--n-600);
  --border: var(--n-200);
  --border-strong: #b9c6da;
  --brand-strong: var(--brand-ink);
  --accent: var(--money);
  --good: var(--success);
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --shadow: var(--elev-1);
}
:root[data-surface="site"][data-theme="dark"] { --border-strong: #35507a; }
@media (prefers-color-scheme: dark) {
  :root[data-surface="site"]:not([data-theme="light"]) { --border-strong: #35507a; }
}

/* ==========================================================================
   From here down: appearance only, every rule scoped to the site surface so
   no other surface can be reached by accident.
   ========================================================================== */

[data-surface="site"] body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[data-surface="site"] :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}

[data-surface="site"] ::selection {
  background: rgba(245, 158, 11, 0.25);
  color: var(--n-900);
}

/* --- the header ----------------------------------------------------------
   Fixed and translucent, the source's signature. Two states:

     resting    solid, blurred — what every inner page shows, and what a
                reader with JavaScript off ALWAYS sees, so the nav is never
                white-on-white.
     over-hero  transparent, white ink — added by portal.js only on a page
                that declares a dark stage behind it, and removed the moment
                the page scrolls past it.

   The direction matters: the safe state is the default, the decorative one
   is the enhancement. */
[data-surface="site"] .site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  /* The opaque value first: an older WebView that cannot parse color-mix
     keeps a readable header rather than a transparent one over the page. */
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0;
  box-shadow: var(--elev-sticky);
  transition: background var(--dur-2, 250ms) var(--ease-out, ease),
    box-shadow var(--dur-2, 250ms) var(--ease-out, ease);
}
[data-surface="site"] .site-header .header-inner {
  min-height: var(--header-h);
  gap: var(--s-4, 1rem);
}
/* Room for the fixed header, reserved by MAIN and not by <body>.
   Reserving it on <body> was the first attempt and it broke the whole effect:
   the page then began with 72px of page background, the dark stage started
   under it, and the "transparent over the hero" header floated over white —
   white nav links on a white strip. So the padding lives on main, and a page
   that opens on a stage hands it to the stage instead, which is the element
   that has to reach the top of the screen.

   `:has()` is the switch. Where it is missing the rule simply does not apply,
   main keeps its padding and the stage keeps its own: a gap, never an
   overlap. Failing towards a readable page is the whole point. */
[data-surface="site"] main { padding-top: calc(var(--header-h) + 1.5rem); }
[data-surface="site"] main:has(> .stage:first-child) { padding-top: 0; }
[data-surface="site"] main > .stage:first-child { padding-top: calc(var(--header-h) + 2.5rem); }
[data-surface="site"] main > .stage--hero:first-child { padding-top: calc(var(--header-h) + 4rem); }

[data-surface="site"] .site-header.is-over-hero {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-surface="site"] .is-over-hero :is(.zx-brand, .zx-brand-name) { color: #fff; }
[data-surface="site"] .is-over-hero .primary-nav a { color: rgba(255, 255, 255, 0.85); }
[data-surface="site"] .is-over-hero .primary-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
[data-surface="site"] .is-over-hero :is(.langquick, .surfaceswitch-toggle, .theme-toggle, .langsel-toggle) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
[data-surface="site"] .is-over-hero :is(.langquick-btn, .surfaceswitch-word, .surfaceswitch-toggle svg) {
  color: rgba(255, 255, 255, 0.8);
}
[data-surface="site"] .is-over-hero .langquick-btn[aria-pressed="true"] {
  background: var(--accent-amber);
  color: var(--accent-ink);
}

[data-surface="site"] .primary-nav a {
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: color var(--dur-1, 140ms), background var(--dur-1, 140ms);
}
[data-surface="site"] .primary-nav a[aria-current="page"] {
  color: var(--accent-amber-dark);
  background: rgba(245, 158, 11, 0.12);
}

/* The header's sign-in door takes the amber, because on this design it is
   the one place a guest is meant to look after the vacancies. */
[data-surface="site"] .header-login {
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-amber-dark));
  border-color: transparent;
  color: var(--accent-ink);
  border-radius: var(--r-md);
}
[data-surface="site"] .header-login:hover {
  background: linear-gradient(135deg, var(--accent-amber-light), var(--accent-amber));
  border-color: transparent;
}

/* --- buttons -------------------------------------------------------------
   The source's shape: pill-adjacent radius, 700 weight, a lift on hover. */
[data-surface="site"] .btn {
  border-radius: var(--r-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform var(--dur-1, 140ms) var(--ease-out, ease),
    box-shadow var(--dur-1, 140ms) var(--ease-out, ease),
    background var(--dur-1, 140ms), color var(--dur-1, 140ms);
}
[data-surface="site"] .btn-primary {
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-amber-dark));
  border-color: transparent;
  color: var(--accent-ink); /* deviation 1 — see the header of this file */
  box-shadow: var(--elev-amber);
}
[data-surface="site"] .btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-amber-light), var(--accent-amber));
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 12px 40px rgba(245, 158, 11, 0.4);
}
[data-surface="site"] .btn-secondary {
  background: transparent;
  border: 2px solid var(--brand);
  color: var(--brand-ink);
}
[data-surface="site"] .btn-secondary:hover {
  background: var(--brand);
  color: var(--brand-contrast);
}
[data-surface="site"] .btn-lg {
  padding: 1rem 2rem;
  border-radius: var(--r-lg);
}
@media (prefers-reduced-motion: no-preference) {
  [data-surface="site"] .btn:hover { transform: translateY(-2px); }
}

/* On the dark stage the quiet button is an outline in white, not a grey
   block that disappears into the gradient. */
[data-surface="site"] .stage .btn-quiet,
[data-surface="site"] .stage .btn-ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
[data-surface="site"] .stage :is(.btn-quiet, .btn-ghost):hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}

/* --- the dark stage: hero and page header --------------------------------
   One element does both jobs. The landing gives it `.stage--hero` (full
   height, two columns, the drifting orbs); every inner page gets the short
   version with the source's 60px grid wash. */
[data-surface="site"] .stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  background: linear-gradient(135deg, var(--stage) 0%, var(--stage-2) 50%, var(--stage-3) 100%);
  color: var(--stage-ink);
  padding-block: 3.5rem 3rem;
}
[data-surface="site"] .stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
[data-surface="site"] .stage :is(h1, h2, h3, p, li, dt, dd) { color: var(--stage-ink); }
[data-surface="site"] .stage :is(.lead, .muted, .note) { color: var(--stage-ink-soft); }

/* The landing's full hero. `min-height` uses svh where it exists so a phone's
   collapsing address bar does not crop the first screen. */
[data-surface="site"] .stage--hero {
  padding-block: 4.5rem 3.5rem;
  display: grid;
  gap: var(--s-6, 2rem);
  align-content: center;
}
@media (min-width: 900px) {
  [data-surface="site"] .stage--hero {
    min-height: 88vh;
    min-height: 88svh;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    column-gap: var(--s-7, 3rem);
    padding-block: 6rem 4.5rem;
  }
  [data-surface="site"] .stage--hero .hero-trust { grid-column: 1 / -1; }
}

/* The three drifting orbs. Decorative, aria-hidden in the markup, and the
   animation is dropped entirely for a reader who asked for less motion. */
[data-surface="site"] .stage-orbs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
[data-surface="site"] .stage-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
[data-surface="site"] .stage-orb:nth-child(1) {
  width: 600px;
  height: 600px;
  background: rgba(245, 158, 11, 0.12);
  top: -200px;
  inset-inline-end: -100px;
}
[data-surface="site"] .stage-orb:nth-child(2) {
  width: 400px;
  height: 400px;
  background: rgba(30, 58, 95, 0.4);
  bottom: -100px;
  inset-inline-start: -50px;
}
[data-surface="site"] .stage-orb:nth-child(3) {
  width: 300px;
  height: 300px;
  background: rgba(16, 185, 129, 0.1);
  top: 40%;
  inset-inline-start: 40%;
}
@media (prefers-reduced-motion: no-preference) {
  [data-surface="site"] .stage-orb { animation: zxFloatOrb 8s ease-in-out infinite; }
  [data-surface="site"] .stage-orb:nth-child(2) { animation-delay: 3s; }
  [data-surface="site"] .stage-orb:nth-child(3) { animation-delay: 6s; }
  @keyframes zxFloatOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
  }
}

/* The badge over the hero title. */
[data-surface="site"] .stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  margin-bottom: var(--s-4, 1rem);
  border-radius: var(--r-pill);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--accent-amber-light);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-surface="site"] .stage-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-amber);
}
@media (prefers-reduced-motion: no-preference) {
  [data-surface="site"] .stage-badge::before { animation: zxPulse 2s ease-in-out infinite; }
  @keyframes zxPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
    50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
  }
}

[data-surface="site"] .stage h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: var(--track-display, -0.03em);
  margin: 0 0 var(--s-4, 1rem);
}
/* The source's second hero line: its own block, lighter and smaller, under
   the statement rather than running on from it. Inside the <h1> on purpose —
   it is the same sentence, and a screen reader should read it as one. */
[data-surface="site"] .stage h1 .accent {
  display: block;
  margin-top: 0.35em;
  color: var(--accent-amber);
  font-size: clamp(1rem, 2.2vw, 1.375rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
[data-surface="site"] .stage .lead {
  font-size: var(--fs-h3);
  max-width: 44ch;
  margin: 0;
}
[data-surface="site"] .stage .cta-row { margin-top: var(--s-5, 1.5rem); }

/* The breadcrumb an inner page's stage carries. */
[data-surface="site"] .stage-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--s-3, 0.75rem);
  padding: 0;
  list-style: none;
  font-size: var(--fs-caption);
  color: var(--stage-ink-faint);
}
[data-surface="site"] .stage-crumbs a { color: var(--stage-ink-soft); }
[data-surface="site"] .stage-crumbs a:hover { color: var(--accent-amber); }
[data-surface="site"] .stage-crumbs li + li::before { content: "/"; margin-inline-end: 8px; opacity: 0.6; }

/* The four hero facts, as the source's stat cards. Each one is a fact the
   product can be held to, not a number: the source's "500+ трудоустроено"
   is exactly the kind of claim this product does not make. */
[data-surface="site"] .hero-facts {
  display: grid;
  gap: var(--s-3, 0.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  [data-surface="site"] .hero-facts { grid-template-columns: 1fr 1fr; }
}
[data-surface="site"] .hero-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 600;
}
[data-surface="site"] .hero-facts svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--accent-amber);
}

/* The tick list under the hero. */
[data-surface="site"] .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3, 0.75rem) var(--s-5, 1.5rem);
  margin: var(--s-5, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}
[data-surface="site"] .hero-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--stage-ink-soft);
  font-size: var(--fs-body);
}
[data-surface="site"] .hero-trust li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* --- sections ------------------------------------------------------------- */
[data-surface="site"] .section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-3, 0.75rem);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--accent-amber-dark);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-surface="site"] .section-band { padding-block: var(--s-7, 3rem); }
[data-surface="site"] .section-head h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 900;
}
[data-surface="site"] .section-head .accent { color: var(--accent-amber-dark); }

/* The panel loses the console's flatness here: on a marketing page a section
   is a raised card, which is what the source draws. */
[data-surface="site"] .panel {
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--elev-1);
  padding: var(--s-5, 1.5rem);
}
@media (min-width: 720px) {
  [data-surface="site"] .panel { padding: var(--s-6, 2rem); }
}

/* --- the benefits grid ---------------------------------------------------- */
[data-surface="site"] .benefit-grid {
  display: grid;
  gap: var(--s-4, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 620px) {
  [data-surface="site"] .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  [data-surface="site"] .benefit-grid { grid-template-columns: repeat(3, 1fr); }
}
[data-surface="site"] .benefit-card {
  padding: var(--s-5, 1.5rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2, 250ms) var(--ease-out, ease),
    box-shadow var(--dur-2, 250ms) var(--ease-out, ease);
}
@media (prefers-reduced-motion: no-preference) {
  [data-surface="site"] .benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--elev-lift);
  }
}
[data-surface="site"] .benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-3, 0.75rem);
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand-ink);
}
[data-surface="site"] .benefit-icon svg { width: 28px; height: 28px; }
[data-surface="site"] .benefit-card h3 {
  font-size: var(--fs-h3);
  margin: 0 0 var(--s-2, 0.5rem);
}
[data-surface="site"] .benefit-card p { margin: 0; color: var(--muted); }

/* --- the vacancy card ----------------------------------------------------
   The source's tile: a 16:9 photograph, the category and the country over it,
   the money as the typographic event, the tags, and the two actions. Every
   value on it still comes from the ERP's own presenter — the card is a
   drawing of a Vacancy row, not a copy of one. */
[data-surface="site"] .vacancy-grid { gap: var(--s-4, 1rem); }
@media (min-width: 980px) {
  [data-surface="site"] .vacancy-grid { grid-template-columns: repeat(3, 1fr); }
}
[data-surface="site"] .vacancy-card {
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2, 250ms) var(--ease-out, ease),
    box-shadow var(--dur-2, 250ms) var(--ease-out, ease),
    border-color var(--dur-1, 140ms);
}
@media (prefers-reduced-motion: no-preference) {
  [data-surface="site"] .vacancy-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--elev-lift);
    border-color: transparent;
  }
}
[data-surface="site"] .vacancy-card:focus-within {
  border-color: var(--focus);
  box-shadow: var(--elev-lift);
}

[data-surface="site"] .vacancy-figure {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--stage), var(--stage-2));
}
[data-surface="site"] .vacancy-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out, ease);
}
@media (prefers-reduced-motion: no-preference) {
  [data-surface="site"] .vacancy-card:hover .vacancy-figure img { transform: scale(1.06); }
}
[data-surface="site"] .vacancy-figure .chip {
  position: absolute;
  top: 12px;
  border: 0;
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.03em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* The source tints the badge by profession family. Same idea, ERP's own
   seven categories, and every pairing is dark ink on a light wash or white
   on a dark one — never the 2:1 white-on-amber the source shipped. */
[data-surface="site"] .vacancy-cat {
  inset-inline-start: 12px;
  background: rgba(30, 58, 95, 0.88);
  color: #fff;
}
[data-surface="site"] .vacancy-cat[data-cat="medical"] { background: rgba(190, 24, 40, 0.88); }
[data-surface="site"] .vacancy-cat[data-cat="construction"] { background: rgba(245, 158, 11, 0.94); color: var(--accent-ink); }
[data-surface="site"] .vacancy-cat[data-cat="agriculture"] { background: rgba(6, 118, 71, 0.9); color: #fff; }
[data-surface="site"] .vacancy-cat[data-cat="hospitality"] { background: rgba(109, 77, 230, 0.88); color: #fff; }
[data-surface="site"] .vacancy-cat[data-cat="driving"] { background: rgba(12, 74, 110, 0.9); color: #fff; }
[data-surface="site"] .vacancy-cat[data-cat="warehouse"] { background: rgba(71, 85, 105, 0.9); color: #fff; }
[data-surface="site"] .vacancy-place-badge {
  inset-inline-end: 12px;
  background: rgba(10, 22, 40, 0.62);
  color: #fff;
  font-weight: 600;
}

[data-surface="site"] .vacancy-card-link {
  display: block;
  padding: var(--s-5, 1.5rem);
  text-decoration: none;
}
[data-surface="site"] .vacancy-role {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
}
[data-surface="site"] .vacancy-card .salary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-2, 0.5rem);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900;
  color: var(--money);
}
[data-surface="site"] .vacancy-card .salary::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--money);
}
[data-surface="site"] .vacancy-tags { margin-top: var(--s-3, 0.75rem); }
[data-surface="site"] .vacancy-tags .chip {
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
}
[data-surface="site"] .vacancy-actions {
  display: flex;
  gap: 10px;
  padding: 0 var(--s-5, 1.5rem) var(--s-5, 1.5rem);
}
[data-surface="site"] .vacancy-actions .btn {
  flex: 1;
  justify-content: center;
  font-size: var(--fs-sm);
}

/* --- filters as pills ----------------------------------------------------- */
[data-surface="site"] .filter-sheet > summary,
[data-surface="site"] .search-row input[type="search"],
[data-surface="site"] .filter-field select {
  border-radius: var(--r-pill);
  border-width: 2px;
}
[data-surface="site"] .filter-sheet > summary { font-weight: 600; }
[data-surface="site"] .filter-sheet[open] > summary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}
[data-surface="site"] .applied-filters .chip-remove,
[data-surface="site"] .chip {
  border-radius: var(--r-pill);
}

/* --- forms ---------------------------------------------------------------- */
[data-surface="site"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  border-radius: var(--r-md);
  border: 2px solid var(--border);
  background: var(--surface-2);
  transition: border-color var(--dur-1, 140ms), background var(--dur-1, 140ms),
    box-shadow var(--dur-1, 140ms);
}
[data-surface="site"] :is(input, select, textarea):focus {
  border-color: var(--brand-hover);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.1);
  outline: none;
}

/* --- the footer ----------------------------------------------------------
   The source's dark four-column footer. The columns are built from links
   that already exist on this surface; nothing here invents a destination. */
[data-surface="site"] .site-footer {
  margin-top: var(--s-7, 3rem);
  padding-block: var(--s-7, 3rem) var(--s-5, 1.5rem);
  background: linear-gradient(160deg, var(--stage-2) 0%, var(--stage) 70%);
  border-top: 1px solid var(--stage-line);
  color: var(--stage-ink-soft);
}
[data-surface="site"] .footer-grid {
  display: grid;
  gap: var(--s-6, 2rem);
  margin-bottom: var(--s-6, 2rem);
}
@media (min-width: 720px) {
  [data-surface="site"] .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}
[data-surface="site"] .site-footer :is(.zx-brand, .zx-brand-name) { color: #fff; }
[data-surface="site"] .footer-about { margin: var(--s-3, 0.75rem) 0 0; max-width: 42ch; }
[data-surface="site"] .footer-heading {
  margin: 0 0 var(--s-3, 0.75rem);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stage-ink-faint);
}
[data-surface="site"] .footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-surface="site"] .footer-links a {
  color: var(--stage-ink-soft);
  text-decoration: none;
  transition: color var(--dur-1, 140ms);
}
[data-surface="site"] .footer-links a:hover { color: var(--accent-amber); }
[data-surface="site"] .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3, 0.75rem);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-4, 1rem);
  border-top: 1px solid var(--stage-line);
  color: var(--stage-ink-faint);
  font-size: var(--fs-sm);
}
/* portal.css paints every footer paragraph with --muted, which is a dark
   slate: correct on the old white footer, unreadable on this navy one. The
   override is by the same weight plus the surface attribute, so it wins
   without !important. Caught in the first full-page render. */
[data-surface="site"] .site-footer p { margin: 0; color: var(--stage-ink-soft); }
[data-surface="site"] .site-footer .footer-bottom p { color: var(--stage-ink-faint); }

/* --- the pieces the portal already owns, re-tuned -------------------------- */
[data-surface="site"] .bottom-nav {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[data-surface="site"] .bottom-nav a[aria-current="page"] { color: var(--accent-amber-dark); }
[data-surface="site"] .assistant-fab { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 720px) {
  [data-surface="site"] .assistant-fab { bottom: 1.5rem; }
}

/* The focus ring, stated once for the surface: the source site declares none
   at all, and a keyboard reader on a fixed-header page needs it most. */
[data-surface="site"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
[data-surface="site"] .stage :is(a, button, summary):focus-visible { outline-color: var(--accent-amber); }

/* --- phone ---------------------------------------------------------------- */
@media (max-width: 719px) {
  /* Measured, not guessed. Below 560px the header's control cluster — the
     language group, the surface switch, the theme toggle and the sign-in
     door — genuinely does not fit on one line and wraps to a second row,
     which is the portal's own long-standing layout. That was harmless while
     the header was static; making it fixed turned it into content sliding
     underneath, which is what the 320px pass found. portal.js narrows this
     to the exact height it measures, so these two values only have to be
     large enough, never right. */
  :root[data-surface="site"] { --header-h: 72px; }
  [data-surface="site"] .stage { padding-block: 2.5rem 2rem; }
  [data-surface="site"] .stage--hero { padding-block: 3rem 2.5rem; }
  [data-surface="site"] .stage h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  [data-surface="site"] .vacancy-actions { flex-direction: column; }
  [data-surface="site"] .panel { border-radius: var(--r-lg); }
}

@media (max-width: 559px) {
  /* The two-row header. See the note above: generous on purpose, because a
     reader with JavaScript off must get whitespace, never a hidden heading. */
  :root[data-surface="site"] { --header-h: 124px; }
}

/* --- the pieces the new markup needs ------------------------------------- */

/* The full-bleed stage is drawn with the classic negative-margin trick, which
   measures against the viewport INCLUDING the scrollbar. Without this the
   desktop gains a few pixels of horizontal scroll on every page that has a
   stage — the source site clears it the same way, on <body>. */
[data-surface="site"] body { overflow-x: hidden; }

/* The closing band: the same dark stage, centred, and short. */
[data-surface="site"] .stage--band { text-align: center; }
[data-surface="site"] .stage--band h2 {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 900;
  margin: 0 0 var(--s-3, 0.75rem);
}
[data-surface="site"] .stage--band .lead { margin-inline: auto; }
[data-surface="site"] .stage--band .cta-row { justify-content: center; }

/* The benefits section heads a band rather than a panel, so its head stacks
   instead of splitting a title from a "see all" link. */
[data-surface="site"] .section-band .section-head { display: block; }
[data-surface="site"] .section-band .section-head .lead { max-width: 56ch; margin-block: var(--s-2, .5rem) var(--s-5, 1.5rem); }

/* The country moved onto the tile's photograph, so the separator the place
   line used to need in front of the city no longer has anything to separate. */
[data-surface="site"] .vacancy-place { margin-top: var(--s-2, 0.5rem); }
[data-surface="site"] .place-city::before { content: none; }
[data-surface="site"] .place-city { color: var(--muted); font-weight: 500; }

/* An empty tag row must not leave a gap under a card whose vacancy records no
   eligibility — most of them, since the field is blank until a human sets it. */
[data-surface="site"] .vacancy-tags:empty,
[data-surface="site"] .vacancy-place:empty { display: none; }

/* The fixed header's own consequence. Every in-page anchor on this surface —
   the card's "#apply", the detail page's own jump — would otherwise land its
   target underneath the bar, and the reader would see the section ABOVE the
   one they asked for. Caught on the vacancy card's apply link. */
[data-surface="site"] :target { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* The mark and its question, kept from the portal's own hero. It reads as one
   line on the dark stage rather than the centred column portal.css draws,
   because here it follows a full hero instead of being one of its halves. */
[data-surface="site"] .hero-ask-row {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-4, 1rem);
  margin-top: var(--s-5, 1.5rem);
  --mark-size: 3.25rem;
}
[data-surface="site"] .hero-ask-row .hero-ask { margin-top: 0; }
/* The mark stops being a centred column of its own and becomes the first
   item in the line: mark, then the question, then the way to ask it. */
[data-surface="site"] .hero-ask-row .mark {
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--s-3, 0.75rem);
}
/* portal.css centres this caption and paints it with --muted, which on the
   navy stage is dark-on-dark. Both are corrected here, not there: the same
   caption is still centred and muted on every white page that uses it. */
[data-surface="site"] .stage .mark-caption {
  color: var(--stage-ink-soft);
  text-align: start;
  max-width: 34ch;
}