@charset "UTF-8";
/* ==========================================================================
   INTER - self-hosted (AUDIT.md 3.4)
   --------------------------------------------------------------------------
   The stack asked for 'Inter' but shipped no font file, so the design most
   visitors saw depended on whether they happened to have Inter installed.
   These are the three subsets this site renders: latin, latin-ext for the
   Serbian/Bosnian diacritics, and cyrillic for Macedonian. One variable file
   per subset covers weights 400-700, which is every weight the CSS uses.
   font-display:swap keeps text visible during load; no external request, so
   the site keeps its zero-third-party position and CSP stays font-src 'self'.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-cyrillic.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('../fonts/inter-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   IntCO₂ — design system
   Single stylesheet, no build step, no dependencies.

   Structure
     01  Tokens
     02  Band theming (dark / light surfaces)
     03  Reset & base
     04  Typography
     05  Layout
     06  Buttons
     07  Header
     08  Footer
     09  Cards & lists
     10  Callouts, result bands, badges
     11  Pipeline (hero animation)
     12  Stepper (interactive walkthrough)
     13  App frame (product mockups)
     14  Tables
     15  Table of contents rail
     16  Forms
     17  Diagrams, roadmap, logo plates
     18  Utilities
     19  Motion & print
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   01  TOKENS
   ========================================================================== */

:root {
  /* --- brand primitives ------------------------------------------------- */
  --ink:        #0A101C;   /* existing brand base */
  --ink-2:      #111A2B;   /* elevated surface on dark */
  --ink-3:      #1B2436;   /* hover / inset on dark */

  --paper:      #FFFFFF;
  --paper-2:    #F6F8FB;
  --paper-3:    #EDF1F7;

  --cyan-050:   #ECFEFF;
  --cyan-300:   #67E8F9;   /* existing accent */
  --cyan-400:   #22D3EE;   /* existing accent */
  --cyan-600:   #0891B2;
  --cyan-700:   #0E7490;   /* accent on light — cyan-400 fails AA on white */

  --risk:       #B45309;   /* consequence / warning — used sparingly */
  --risk-bg:    #FFFBEB;
  --risk-line:  #FCD34D;
  --ok:         #047857;
  --ok-bg:      #ECFDF5;
  --ok-line:    #6EE7B7;

  /* --- semantic tokens (light band is the default) ---------------------- */
  --surface:      var(--paper);
  --surface-2:    var(--paper-2);
  --surface-3:    var(--paper-3);
  --fg:           #0A101C;
  --fg-2:         #46536B;
  --fg-3:         #5C687C;   /* AA on --paper-3, the darkest surface it lands on */
  --border:       #E3E8EF;
  --border-strong:#CFD7E3;   /* decorative outlines only */
  /* Boundary of an interactive control (input, secondary button). WCAG 1.4.11
     needs 3:1 here, which --border-strong does not reach on white. */
  --border-control: #868FA1;
  --accent:       var(--cyan-700);
  --accent-quiet: var(--cyan-050);
  --shadow:       0 1px 2px rgba(10,16,28,.04), 0 8px 24px -12px rgba(10,16,28,.12);
  --shadow-lg:    0 2px 4px rgba(10,16,28,.04), 0 24px 56px -24px rgba(10,16,28,.22);

  /* --- type scale -------------------------------------------------------- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  --t-display: clamp(2.25rem, 4.2vw, 3.5rem);
  --t-h2:      clamp(1.75rem, 2.6vw, 2.5rem);
  --t-h3:      clamp(1.375rem, 1.8vw, 1.5rem);
  --t-title:   1.125rem;
  --t-body:    1.0625rem;   /* 17px — was 14px on the old site */
  --t-meta:    0.875rem;
  --t-micro:   0.75rem;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-body:   1.7;

  /* --- space & shape ----------------------------------------------------- */
  --container: 1200px;
  --gutter:    24px;
  --measure:   68ch;
  --band-y:    clamp(36px, 4.5vw, 64px);

  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: 200ms;
}

/* ==========================================================================
   02  BAND THEMING
   Components read only semantic tokens, so they invert automatically.
   ========================================================================== */

.band--dark {
  --surface:      var(--ink);
  --surface-2:    var(--ink-2);
  --surface-3:    var(--ink-3);
  --fg:           #FFFFFF;
  --fg-2:         rgba(255,255,255,.72);
  --fg-3:         rgba(255,255,255,.55);
  --border:       rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --border-control: rgba(255,255,255,.38);
  --accent:       var(--cyan-300);
  --accent-quiet: rgba(34,211,238,.12);
  --shadow:       0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lg:    0 2px 4px rgba(0,0,0,.3), 0 24px 56px -24px rgba(0,0,0,.6);

  background: var(--surface);
  color: var(--fg);
}

.band--light  { background: var(--paper);   color: var(--fg); }
.band--muted  { background: var(--paper-2); color: var(--fg); }

/* ==========================================================================
   03  RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* clears the sticky header on anchor jumps */
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--cyan-600);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--dark :focus-visible { outline-color: var(--cyan-300); }

::selection { background: var(--cyan-300); color: var(--ink); }

.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  padding: 12px 18px; border-radius: var(--r-md);
  background: var(--cyan-400); color: var(--ink);
  font-weight: 600; text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}

h1 { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2);     line-height: var(--lh-snug); }
h3 { font-size: var(--t-h3);     line-height: var(--lh-snug); }
h4 { font-size: var(--t-title);  line-height: var(--lh-snug); letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; color: var(--fg-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  color: var(--fg-2);
}
.band--dark .lede { color: var(--fg-2); }

.meta  { font-size: var(--t-meta);  color: var(--fg-3); }
.micro { font-size: var(--t-micro); color: var(--fg-3);
         letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

strong, b { font-weight: 600; color: var(--fg); }

/* Prose block — capped measure, used for the long regulatory passages. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose p { font-size: var(--t-body); line-height: var(--lh-body); }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.25em; color: var(--fg-2); }
.prose li + li { margin-top: .5em; }

/* ==========================================================================
   05  LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); position: relative; }
.band--tight { padding-block: clamp(24px, 3vw, 40px); }

/* Section head: heading + optional intro, with room to breathe. */
.section-head { max-width: var(--measure); margin-bottom: clamp(36px, 4vw, 56px); }
.section-head h2 + p,
.section-head h2 + .lede { margin-top: 18px; }

.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* minmax(0,·) rather than a bare fr: an fr track floors at min-content, so a wide
   table inside would push the whole grid past the viewport. */
.grid--hero  { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.grid--split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 64px); }
.grid--rail  { grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.grid--aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 64px); align-items: start; }

@media (max-width: 1024px) {
  .grid--hero, .grid--split, .grid--rail, .grid--aside { grid-template-columns: minmax(0, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ==========================================================================
   06  BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding-inline: 22px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 1rem; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .btn__arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Primary — cyan on ink is the highest-contrast pairing in the brand (10.6:1). */
.btn--primary {
  background: var(--cyan-400); color: var(--ink); border-color: var(--cyan-400);
  box-shadow: 0 1px 2px rgba(10,16,28,.10), 0 10px 24px -12px rgba(34,211,238,.55);
}
.btn--primary:hover { background: var(--cyan-300); border-color: var(--cyan-300); }

/* Secondary — outline. Clearly subordinate to primary. */
.btn--secondary {
  background: transparent; color: var(--fg); border-color: var(--border-control);
}
.btn--secondary:hover { background: var(--surface-2); border-color: var(--fg-3); }

.btn--ghost { background: transparent; color: var(--fg-2); border-color: transparent; padding-inline: 12px; }
.btn--ghost:hover { color: var(--fg); background: var(--surface-2); }

.btn--lg { height: 56px; padding-inline: 30px; font-size: 1.0625rem; }
.btn--sm { height: 38px; padding-inline: 16px; font-size: var(--t-meta); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   07  HEADER
   ========================================================================== */

/* Header and footer paint their own dark surface, so they need the same token
   overrides the dark bands get -- otherwise muted text keeps the light-theme
   grey and fails contrast against the navy. */
.site-header, .site-footer {
  --fg:             #FFFFFF;
  --fg-2:           rgba(255,255,255,.72);
  --fg-3:           rgba(255,255,255,.55);
  --border:         rgba(255,255,255,.10);
  --border-strong:  rgba(255,255,255,.18);
  --border-control: rgba(255,255,255,.38);
  --accent:         var(--cyan-300);
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,16,28,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: #FFFFFF;
}
.site-header a:not(.btn) { color: inherit; }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px;
}

/* --- logo -------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; color: var(--cyan-300);
}
.logo__cloud { display: block; flex: none; width: 36px; height: 22.5px; }
.logo__text { display: block; line-height: 1.2; }
.logo__name { display: block; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; }
.logo__sub  { display: block; font-size: var(--t-micro); color: rgba(255,255,255,.55); white-space: nowrap; }

/* --- primary nav ------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; height: 40px; padding-inline: 10px;
  border-radius: var(--r-sm);
  font-size: .9375rem; font-weight: 500; color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.nav__link:hover { color: #FFF; background: rgba(255,255,255,.06); text-decoration: none; }
.nav__link[aria-current="page"] { color: #FFF; background: rgba(255,255,255,.08); }

.header__actions { display: flex; align-items: center; gap: 12px; }

/* --- locale switcher ---------------------------------------------------- */
.locale {
  display: flex; align-items: center; gap: 1px; padding: 2px;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
}
.locale__item {
  display: inline-flex; align-items: center; height: 28px; padding-inline: 7px;
  border-radius: 7px; font-size: var(--t-micro); font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.6); text-decoration: none;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.locale__item:hover { color: #FFF; background: rgba(255,255,255,.08); text-decoration: none; }
.locale__item[aria-current="true"] {
  color: var(--cyan-300); background: rgba(34,211,238,.14);
  box-shadow: inset 0 0 0 1px rgba(103,232,249,.22);
}

/* --- mobile disclosure -------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md);
  background: rgba(255,255,255,.05); color: #FFF; cursor: pointer;
}
.nav-toggle:hover { background: rgba(255,255,255,.10); }

/* Hidden on desktop, where .nav carries the links. Below the breakpoint the
   default is OPEN, not closed — with JS disabled, .nav is hidden and a panel
   that only opens on click would leave the page with no navigation at all.
   JS sets data-open="false" on load, so the collapsed state is the enhancement. */
.mobile-nav {
  display: none;
  padding-bottom: 20px;
}
.mobile-nav__panel {
  padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-xl);
  background: rgba(255,255,255,.04);
}
.mobile-nav__link {
  display: block; padding: 13px 14px; border-radius: var(--r-md);
  font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.8); text-decoration: none;
}
.mobile-nav__link:hover,
.mobile-nav__link[aria-current="page"] { color: #FFF; background: rgba(255,255,255,.07); text-decoration: none; }
.mobile-nav__foot { margin-top: 10px; padding: 14px; border-top: 1px solid rgba(255,255,255,.10); }

@media (max-width: 1200px) {
  .nav, .header__actions .locale, .header__actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav { display: block; }
  .mobile-nav[data-open="false"] { display: none; }
}

/* ==========================================================================
   08  FOOTER
   ========================================================================== */

.site-footer {
  background: var(--ink); color: #FFF;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-block: clamp(56px, 7vw, 88px) 40px;
}
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #FFF; text-decoration: underline; }

.footer__grid {
  display: grid; gap: 40px var(--gutter);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0,1fr); } }

.footer__title {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 16px;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li + li { margin-top: 11px; }
.footer__list a { font-size: .9375rem; }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: var(--t-meta); color: rgba(255,255,255,.55);
}
.footer__locales { display: flex; flex-wrap: wrap; gap: 8px; }

.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.iso-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-pill);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .03em;
  color: rgba(255,255,255,.72);
}
.iso-badge .icon { color: var(--cyan-300); flex: none; }
.footer__locales a {
  padding: 5px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-pill);
  font-size: var(--t-micro);
}
.footer__locales a:hover { text-decoration: none; background: rgba(255,255,255,.07); }

/* ==========================================================================
   09  CARDS & LISTS
   ========================================================================== */

.card {
  display: flex; flex-direction: column;
  padding: 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.band--muted .card { background: var(--paper); }
.band--dark  .card { background: var(--ink-2); }

.card--hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card__num {
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  color: var(--fg-3); font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 18px;
  border-radius: var(--r-md);
  background: var(--accent-quiet); color: var(--accent);
}
.card__icon svg { width: 20px; height: 20px; }
.card h3, .card h4 { margin-bottom: 10px; }
.card p { font-size: .9375rem; margin-bottom: 0; }

/* Numbered card variant: number sits top-right, quiet. */
.card--numbered { position: relative; }
.card--numbered .card__num {
  position: absolute; top: 22px; right: 26px; margin: 0;
  font-size: 1.5rem; font-weight: 700; color: var(--border-control); letter-spacing: -.02em;
}

/* Feature row — used where cards would be too heavy (differentiators). */
.feature { display: flex; gap: 18px; }
.feature__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--accent-quiet); color: var(--accent);
}
.feature__icon svg { width: 21px; height: 21px; }
.feature__body h4 { margin-bottom: 8px; }
.feature__body p { font-size: .9375rem; margin: 0; }

/* Clean list with accent markers (replaces the old cyan-dot bullet). */
.list-check { list-style: none; margin: 0; padding: 0; }
.list-check li {
  position: relative; padding-left: 30px; color: var(--fg-2);
}
.list-check li + li { margin-top: 12px; }
.list-check li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent); opacity: .85;
}

/* ==========================================================================
   10  CALLOUTS, RESULT BANDS, BADGES
   ========================================================================== */

/* Risk callout — the single warning accent. Max ~3 per page. */
.callout {
  display: flex; gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.callout__icon { flex: 0 0 auto; color: var(--accent); }
.callout__icon svg { width: 22px; height: 22px; }
.callout p { margin: 0; color: var(--fg-2); }
.callout p + p { margin-top: .8em; }

.callout--risk {
  border-color: var(--risk-line); border-left-color: var(--risk);
  background: var(--risk-bg);
}
.callout--risk .callout__icon { color: var(--risk); }
.callout--risk p { color: #78350F; }
.band--dark .callout--risk {
  background: rgba(180,83,9,.14); border-color: rgba(252,211,77,.3); border-left-color: #F59E0B;
}
.band--dark .callout--risk p { color: rgba(255,255,255,.86); }
.band--dark .callout--risk .callout__icon { color: #FBBF24; }

/* Success sibling of --risk, built from the --ok tokens that already exist.
   #064E3B on --ok-bg is 8.9:1; the token pair itself is 5.2:1. */
.callout--ok {
  border-color: var(--ok-line); border-left-color: var(--ok);
  background: var(--ok-bg);
}
.callout--ok .callout__icon { color: var(--ok); }
.callout--ok p { color: #064E3B; }

/* Result band — the "Rezultat" conclusion. Breaks out of the grid. */
.result {
  display: flex; gap: 22px; align-items: flex-start;
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(28px, 3.4vw, 40px);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface-2);
  position: relative; overflow: hidden;
}
.result::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--cyan-400), var(--cyan-700));
}
.result__label {
  flex: 0 0 auto;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); padding-top: .35em;
}
.result p {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6;
  color: var(--fg); margin: 0; max-width: 62ch;
}
@media (max-width: 720px) { .result { flex-direction: column; gap: 12px; } }

/* Badges & certification plates */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding-inline: 12px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em; color: var(--fg-2);
}
.badge svg { width: 14px; height: 14px; color: var(--accent); }
.badge--ok   { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok); }
.badge--risk { background: var(--risk-bg); border-color: var(--risk-line); color: var(--risk); }
.band--dark .badge { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--fg-2); }

/* Certification plate — bordered, deliberately not a bullet. */
.cert-plate {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface-2);
}
.cert-plate__mark {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent);
}
.cert-plate__mark svg { width: 24px; height: 24px; }
.cert-plate__text strong { display: block; font-size: 1rem; }
.cert-plate__text span { font-size: var(--t-meta); color: var(--fg-3); }

/* Date markers — the two regulatory dates lifted out of the prose so they are
   findable. Both the figure and its label are verbatim from the copy. */
.dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.date-item {
  padding: 20px 22px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); background: var(--surface-2);
}
.date-item b {
  display: block; line-height: 1.1;
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.03em;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.date-item span { display: block; margin-top: 8px; font-size: var(--t-meta); color: var(--fg-3); }
@media (max-width: 560px) { .dates { grid-template-columns: minmax(0, 1fr); } }

/* --- cycle: the reporting year as four quarters --------------------------
   Replaces the two date chips on the priprema page. Built in markup rather
   than shipped as an image so it translates into every locale, reflows on a
   phone and stays sharp; the deadline the chips carried is kept at the foot. */
.cycle { margin-top: 32px; }
.cycle__head { margin-bottom: 24px; }
.cycle__title {
  margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--fg);
}
.cycle__sub { margin: 6px 0 0; font-size: var(--t-meta); color: var(--fg-3); }

.cycle__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cycle__phase {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 20px;
  border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: var(--r-md); background: var(--surface);
}
.cycle__q {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 8px;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--accent-quiet); color: var(--accent);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.cycle__phase h4 { margin: 0; font-size: 1.0625rem; line-height: 1.3; color: var(--fg); }
.cycle__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cycle__list li {
  position: relative; padding-left: 16px;
  font-size: var(--t-meta); line-height: 1.5; color: var(--fg-2);
}
.cycle__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

.cycle__deadline {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 18px;
  padding: 16px 18px; border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--r-md);
  background: var(--surface-2);
}
.cycle__deadline .icon { color: var(--accent); flex: none; margin-top: 2px; }
.cycle__deadline b { display: block; color: var(--fg); font-variant-numeric: tabular-nums; }
.cycle__deadline span { display: block; margin-top: 3px; font-size: var(--t-meta); color: var(--fg-3); }

/* Two across, not four: this lives beside a sticky contents rail, so the
   content column is ~845px and four columns would crush the text. */
@media (max-width: 620px) { .cycle__track { grid-template-columns: minmax(0, 1fr); } }

/* --- graphic: a supplied image used in place of a built component -----------
   The Serbian priprema page shows the client's own roadmap artwork here; the
   other locales keep .cycle, which translates. The image is 945px wide, so
   below that it scrolls inside its own box rather than shrinking to
   illegibility — the same rule the site applies to wide tables. */
.graphic { margin: 32px 0 0; }
.graphic__frame {
  overflow-x: auto; background: #FFFFFF;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px;
}
.graphic__frame img { display: block; width: 100%; height: auto; border-radius: 4px; }
.graphic figcaption { margin-top: 10px; font-size: var(--t-meta); color: var(--fg-3); }

@media (max-width: 760px) {
  /* stop shrinking, start panning */
  .graphic__frame img { width: 720px; max-width: none; }
}

/* Typographic year marker — pulled from the copy, not invented. */
.year-marker { position: sticky; top: 120px; }
.year-marker__value {
  font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 700;
  line-height: 1; letter-spacing: -.045em; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.year-marker__rule {
  width: 72px; height: 4px; margin-top: 20px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan-400), var(--cyan-700));
}
.year-marker__note { margin-top: 18px; font-size: var(--t-meta); color: var(--fg-3); max-width: 24ch; }
@media (max-width: 1024px) { .year-marker { position: static; } }

/* ==========================================================================
   11  PIPELINE — hero process animation
   Vertical because 8 stages laid out horizontally force sub-11px labels.
   ========================================================================== */

.pipeline {
  position: relative;
  padding: 26px 26px 26px 24px;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow-lg);
}
.pipeline__spine {
  position: absolute; left: 44px; top: 44px; bottom: 44px; width: 2px;
  background: var(--border); border-radius: 1px; overflow: hidden;
}
.pipeline__pulse {
  position: absolute; left: 0; width: 2px; height: 64px; border-radius: 1px;
  background: linear-gradient(180deg, transparent, var(--cyan-400), transparent);
  animation: pipelinePulse 12s linear infinite;
}
@keyframes pipelinePulse {
  0%   { top: -64px; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.pipeline__list { list-style: none; margin: 0; padding: 0; position: relative; }

.pipeline__step {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 12px; border-radius: var(--r-md);
  transition: background var(--dur) var(--ease-out);
  animation: pipelineStep 12s linear infinite;
  animation-delay: calc(var(--i) * 1.5s);
}
@keyframes pipelineStep {
  0%, 100% { background: transparent; }
  4%       { background: var(--accent-quiet); }
  12.5%    { background: var(--accent-quiet); }
  20%      { background: transparent; }
}

.pipeline__node {
  flex: 0 0 auto; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--fg-3);
  animation: pipelineNode 12s linear infinite;
  animation-delay: calc(var(--i) * 1.5s);
}
.pipeline__node svg { width: 18px; height: 18px; }
@keyframes pipelineNode {
  0%, 100% { border-color: var(--border);     color: var(--fg-3); box-shadow: none; }
  4%       { border-color: var(--cyan-400);   color: var(--cyan-300);
             box-shadow: 0 0 0 5px rgba(34,211,238,.14); }
  12.5%    { border-color: var(--cyan-400);   color: var(--cyan-300);
             box-shadow: 0 0 0 5px rgba(34,211,238,.14); }
  20%      { border-color: var(--border);     color: var(--fg-3); box-shadow: none; }
}

.pipeline__label {
  font-size: .9375rem; font-weight: 500; color: var(--fg-2); line-height: 1.35;
  animation: pipelineLabel 12s linear infinite;
  animation-delay: calc(var(--i) * 1.5s);
}
@keyframes pipelineLabel {
  0%, 100% { color: var(--fg-2); }
  4%, 12.5% { color: var(--fg); }
  20% { color: var(--fg-2); }
}

.pipeline__index {
  margin-left: auto; font-size: var(--t-micro); font-weight: 600;
  color: var(--fg-3); font-variant-numeric: tabular-nums; opacity: .6;
}

/* Compact decorative variant, used as CTA background texture. */
.pipeline--texture {
  border: 0; background: none; box-shadow: none; padding: 0;
  opacity: .16; pointer-events: none;
}

/* ==========================================================================
   12  STEPPER — interactive walkthrough (H5)
   ========================================================================== */

.stepper { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 1024px) { .stepper { grid-template-columns: minmax(0,1fr); } }

.stepper__rail { list-style: none; margin: 0; padding: 0; position: sticky; top: 104px; }
@media (max-width: 1024px) { .stepper__rail { position: static; } }

.stepper__item + .stepper__item { margin-top: 4px; }

.stepper__btn {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  padding: 14px 16px; border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.stepper__btn:hover { background: var(--surface-2); }
.stepper__btn[aria-selected="true"] {
  background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow);
}
.band--muted .stepper__btn[aria-selected="true"] { background: var(--paper); }

.stepper__num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-size: var(--t-micro); font-weight: 700; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  transition: all var(--dur) var(--ease-out);
}
.stepper__btn[aria-selected="true"] .stepper__num {
  background: var(--cyan-700); border-color: var(--cyan-700); color: #FFF;
}
.stepper__label { font-size: .9375rem; font-weight: 500; color: var(--fg-2); line-height: 1.45; }
.stepper__btn[aria-selected="true"] .stepper__label { color: var(--fg); font-weight: 600; }

/* Progress bar under the active item while auto-advancing. */
.stepper__progress { height: 2px; margin: 6px 0 0 42px; background: var(--border); border-radius: 1px; overflow: hidden; display: none; }
.stepper__btn[aria-selected="true"] + .stepper__progress { display: block; }
.stepper__progress i { display: block; height: 100%; width: 0; background: var(--cyan-600); }
.stepper[data-playing="true"] .stepper__btn[aria-selected="true"] + .stepper__progress i {
  animation: stepperProgress 6s linear forwards;
}
@keyframes stepperProgress { from { width: 0; } to { width: 100%; } }

.stepper__panels { position: relative; min-width: 0; }
.stepper__panel { display: none; }
.stepper__panel[data-active="true"] { display: block; animation: panelIn 320ms var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* No-JS / reduced-motion fallback: every panel visible, stacked with its step. */
.stepper--static .stepper__panel { display: block; margin-bottom: 32px; }

/* ==========================================================================
   13  APP FRAME — product mockups
   One shared chrome; each panel supplies only its own content.
   Every frame is a drop-in slot for a real screenshot.
   ========================================================================== */

.app {
  --app-bg:     #0C1322;
  --app-bg-2:   #121B2D;
  --app-line:   rgba(255,255,255,.09);
  --app-fg:     #E8EDF5;
  --app-fg-2:   rgba(232,237,245,.74);
  --app-fg-3:   rgba(232,237,245,.56);

  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--app-bg); color: var(--app-fg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-size: var(--t-meta);
}

/* Window chrome */
.app__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--app-line);
  background: rgba(255,255,255,.03);
}
.app__dots { display: flex; gap: 6px; }
.app__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.app__crumb { font-size: var(--t-micro); color: var(--app-fg-3); letter-spacing: .02em; }

.app__body { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 380px; }
@media (max-width: 720px) { .app__body { grid-template-columns: minmax(0,1fr); } .app__side { display: none; } }

/* Sidebar — real module names recovered from the product screenshot. */
.app__side { border-right: 1px solid var(--app-line); padding: 14px 10px; background: rgba(0,0,0,.16); }
.app__side-group { font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--app-fg-3); padding: 12px 10px 6px; font-weight: 600; }
.app__side-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 7px; color: var(--app-fg-2); font-size: var(--t-micro);
}
.app__side-item svg { width: 14px; height: 14px; opacity: .7; flex: 0 0 auto; }
.app__side-item[data-active="true"] { background: rgba(34,211,238,.13); color: var(--cyan-300); }
.app__side-item[data-active="true"] svg { opacity: 1; }

.app__main { padding: 20px 22px; min-width: 0; }
.app__title { font-size: 1rem; font-weight: 600; color: var(--app-fg); margin-bottom: 4px; }
.app__sub   { font-size: var(--t-micro); color: var(--app-fg-3); margin-bottom: 18px; }

/* Toolbar / filter row inside the app */
.app__toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.app__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--app-line); background: rgba(255,255,255,.04);
  font-size: var(--t-micro); color: var(--app-fg-2);
}
.app__chip[data-tone="ok"]   { border-color: rgba(110,231,183,.28); background: rgba(4,120,87,.18);  color: #6EE7B7; }
.app__chip[data-tone="risk"] { border-color: rgba(252,211,77,.28);  background: rgba(180,83,9,.18);   color: #FCD34D; }
.app__chip[data-tone="info"] { border-color: rgba(103,232,249,.26); background: rgba(34,211,238,.12); color: var(--cyan-300); }

/* Data table inside the app */
.app__table { width: 100%; border-collapse: collapse; font-size: var(--t-micro); }
.app__table th {
  text-align: left; font-weight: 600; color: var(--app-fg-3);
  padding: 9px 12px; border-bottom: 1px solid var(--app-line);
  text-transform: uppercase; letter-spacing: .06em; font-size: 10px; white-space: nowrap;
}
.app__table td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--app-fg-2); }
.app__table tr:last-child td { border-bottom: 0; }
.app__table td strong { color: var(--app-fg); font-weight: 600; }
.app__table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 11px; }
.app__table tr[data-flag="risk"] { background: rgba(180,83,9,.10); }
.app__table tr[data-flag="ok"]   { background: rgba(4,120,87,.08); }
.app__scroll { overflow-x: auto; margin-inline: -22px; padding-inline: 22px; }

/* Stat tiles */
.app__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
.app__stat { padding: 12px 14px; border: 1px solid var(--app-line); border-radius: var(--r-md); background: rgba(255,255,255,.03); }
.app__stat b { display: block; font-size: 1.125rem; font-weight: 600; color: var(--app-fg);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.app__stat span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--app-fg-3); margin-top: 3px; }

/* Progress / completion rows */
.app__prog { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.app__prog-label { flex: 1 1 auto; font-size: var(--t-micro); color: var(--app-fg-2); }
.app__prog-bar { flex: 0 0 96px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; }
.app__prog-bar i { display: block; height: 100%; background: var(--cyan-400); border-radius: 3px; }
.app__prog-bar[data-tone="ok"] i { background: #34D399; }

/* Audit trail / timeline */
.app__trail { position: relative; padding-left: 22px; }
.app__trail::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--app-line); }
.app__trail-item { position: relative; padding: 9px 0; }
.app__trail-item::before {
  content: ''; position: absolute; left: -21px; top: 15px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--app-bg); border: 2px solid var(--cyan-400);
}
.app__trail-item b { display: block; font-size: var(--t-micro); color: var(--app-fg); font-weight: 600; }
.app__trail-item span { display: block; font-size: 11px; color: var(--app-fg-3); margin-top: 2px; font-family: var(--font-mono); }

/* Node diagram (system boundary) */
.app__nodes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app__node {
  padding: 10px 13px; border: 1px solid var(--app-line); border-radius: var(--r-md);
  background: rgba(255,255,255,.04); font-size: var(--t-micro); color: var(--app-fg-2);
}
.app__node[data-tone="accent"] { border-color: rgba(103,232,249,.32); background: rgba(34,211,238,.10); color: var(--cyan-300); }
.app__arrow { color: var(--app-fg-3); flex: 0 0 auto; }

/* Evidence tree (Verifikacioni Data Room) */
.app__tree { font-size: var(--t-micro); }
.app__tree-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 6px; color: var(--app-fg-2);
}
.app__tree-item svg { width: 14px; height: 14px; opacity: .75; flex: 0 0 auto; }
.app__tree-item[data-depth="1"] { margin-left: 20px; }
.app__tree-item[data-depth="2"] { margin-left: 40px; }
.app__tree-item[data-tone="open"] { background: rgba(34,211,238,.10); color: var(--cyan-300); }
.app__tree-item span { margin-left: auto; color: var(--app-fg-3); font-family: var(--font-mono); font-size: 10px; }

/* Small card grid inside the app (reports, exports) */
.app__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.app__card {
  padding: 15px; border: 1px solid var(--app-line); border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
}
.app__card b { display: block; font-size: .875rem; color: var(--app-fg); margin-bottom: 3px; }
.app__card p { font-size: 11px; color: var(--app-fg-3); margin: 0 0 12px; line-height: 1.5; }

/* Materiality / risk meter */
.app__meter { margin: 4px 0 16px; }
.app__meter-track {
  position: relative; height: 8px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg, #047857 0%, #047857 45%, #B45309 72%, #991B1B 100%);
  opacity: .55;
}
.app__meter-mark {
  position: absolute; top: -4px; width: 2px; height: 16px;
  background: var(--app-fg); border-radius: 1px;
}
.app__meter-scale {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 10px; color: var(--app-fg-3); font-family: var(--font-mono);
}

/* Caption under every mockup — states plainly that figures are illustrative. */
.mock-caption {
  margin-top: 14px; font-size: var(--t-micro); color: var(--fg-3);
  display: flex; align-items: center; gap: 8px;
}
.mock-caption svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* ==========================================================================
   14  TABLES  (content tables — stack into cards on small screens)
   ========================================================================== */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }

.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th {
  text-align: left; font-weight: 600; color: var(--fg);
  padding: 16px 20px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em;
}
.table td { padding: 18px 20px; border-bottom: 1px solid var(--border); color: var(--fg-2); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table__activity { display: flex; align-items: flex-start; gap: 12px; color: var(--fg); font-weight: 600; }
.table__activity svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.table tr[data-highlight="true"] { background: var(--accent-quiet); }
.table tr[data-highlight="true"] td { color: var(--fg); }

@media (max-width: 768px) {
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table-wrap { border: 0; background: none; }
  .table tr {
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); margin-bottom: 14px; padding: 6px 0;
  }
  .table td { border-bottom: 0; padding: 12px 18px; }
  .table td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 6px;
    font-size: var(--t-micro); font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--fg-3);
  }
}

/* ==========================================================================
   15  TABLE OF CONTENTS RAIL
   ========================================================================== */

.toc { position: sticky; top: 104px; }
.toc__title {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 14px;
}
.toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.toc__list a {
  display: block; padding: 9px 0 9px 16px; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: .9375rem; line-height: 1.4; color: var(--fg-3); text-decoration: none;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.toc__list a:hover { color: var(--fg); text-decoration: none; }
.toc__list a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
@media (max-width: 1024px) { .toc { position: static; margin-bottom: 40px; } }

/* ==========================================================================
   16  FORMS
   ========================================================================== */

.field { display: block; margin-bottom: 20px; }
.field__label { display: block; font-size: .9375rem; font-weight: 600; color: var(--fg); margin-bottom: 8px; }
.field__req { color: var(--risk); margin-left: 2px; }
.field__hint { display: block; font-size: var(--t-meta); color: var(--fg-3); margin-top: 6px; }

.input, .textarea, .select {
  display: block; width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border-control); border-radius: var(--r-md);
  background: var(--surface); color: var(--fg);
  font-size: 1rem; line-height: 1.5;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--fg-3); }
/* No `outline: none` here. `.input:focus` (0,2,0) outranks the global
   `:focus-visible` (0,1,0), so suppressing the outline would strip the keyboard
   focus ring from every form field. The border shift is an extra affordance on
   top of the outline, not a replacement for it. */
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--cyan-600);
}
.textarea { min-height: 140px; resize: vertical; }
.input:user-invalid, .textarea:user-invalid { border-color: var(--risk); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--gutter); }
.form-grid .field--wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: minmax(0,1fr); } }

/* Form result banners. api/contact.php redirects back to #poslato or #greska
   and :target reveals the matching one — no JavaScript, same as the rest of
   the page. html{scroll-padding-top:96px} already clears the sticky header. */
.form-note { display: none; margin-bottom: 28px; }
.form-note:target { display: flex; }

/* Honeypot. Off-canvas rather than display:none, because some bots skip
   undisplayed inputs; tabindex="-1" and aria-hidden keep it away from
   keyboard users and screen readers. Humans never fill it; bots do. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================================
   17  DIAGRAMS, ROADMAP, LOGO PLATES
   ========================================================================== */

/* Actor flow diagram */
.flow { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.flow__step {
  flex: 1 1 180px; min-width: 0;
  padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.flow__step h4 { font-size: 1rem; margin-bottom: 6px; }
.flow__step p { font-size: var(--t-meta); margin: 0; }
.flow__arrow { display: flex; align-items: center; color: var(--fg-3); flex: 0 0 auto; }
@media (max-width: 860px) {
  .flow { flex-direction: column; }
  .flow__arrow { transform: rotate(90deg); align-self: center; }
}

/* Numbered roadmap (7 preparation steps) */
.roadmap { list-style: none; margin: 0; padding: 0; position: relative; }
.roadmap::before {
  content: ''; position: absolute; left: 19px; top: 30px; bottom: 30px;
  width: 2px; background: var(--border);
}
.roadmap__item { position: relative; display: flex; gap: 22px; padding-block: 16px; }
.roadmap__num {
  flex: 0 0 auto; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong);
  font-weight: 700; font-size: .9375rem; color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.roadmap__item:hover .roadmap__num { border-color: var(--accent); color: var(--accent); }
.roadmap__body { padding-top: 6px; }
.roadmap__body h4 { margin-bottom: 8px; }
.roadmap__body p { font-size: .9375rem; margin: 0; max-width: 62ch; }

/* Partner logo plates. */
/* Centred wrapping row: three per line, and a short final line centres itself.
   Was a rigid 3-column grid, which left a hole once the partner count passed three. */
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gutter); }
.logo-row > * { flex: 0 1 calc((100% - 2 * var(--gutter)) / 3); min-width: 220px; }
@media (max-width: 780px) { .logo-row > * { max-width: 100%; flex-basis: 100%; } }
.logo-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 164px; padding: 24px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); text-align: center; text-decoration: none;
  filter: grayscale(1); opacity: .85;
  transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.logo-plate:hover { filter: grayscale(0); opacity: 1; }
/* Tiles that link out get a border cue as well; plain tiles stay inert. */
a.logo-plate:hover { border-color: var(--accent); text-decoration: none; }
/* Real partner logos, normalised so the row reads as one set.
   Inherits the grayscale-until-hover treatment. */
.logo-plate__img {
  display: block; width: 100%; height: auto; object-fit: contain;
  /* Every logo file is trimmed to its own ink. The wordmarks are width-bound at
     200px; Karbon Centar publishes a near-square mark, which would be 218px tall
     at that width, so an 80px height cap holds the row in optical balance. */
  max-height: 80px; max-width: 200px;
}
.logo-plate__name { font-size: 1.0625rem; font-weight: 700; color: var(--fg); letter-spacing: -.01em; }

/* ==========================================================================
   17b  BUILD PLACEHOLDERS
   Deliberately loud. A knowledge-base page has no copy in info.md, and the
   real risk is it going live empty and unnoticed — so the placeholder state
   has to be impossible to mistake for finished work.
   ========================================================================== */

.build-note {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 24px; margin-bottom: clamp(32px, 4vw, 48px);
  border: 2px dashed var(--risk-line); border-radius: var(--r-lg);
  background: var(--risk-bg);
}
.build-note__icon { color: var(--risk); flex: 0 0 auto; }
.build-note__icon svg { width: 22px; height: 22px; }
.build-note b { display: block; color: #78350F; margin-bottom: 6px; }
.build-note p { margin: 0; color: #78350F; font-size: .9375rem; }

.slot {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 210px; padding: 24px;
  border: 2px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface-2);
}
.slot__tag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--fg-3);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.slot__lines { margin-top: 18px; }
.slot__line { height: 10px; border-radius: 5px; background: var(--border); margin-bottom: 10px; }
.slot__line:nth-child(2) { width: 88%; }
.slot__line:nth-child(3) { width: 64%; }
.slot__meta { margin-top: 18px; font-size: var(--t-meta); color: var(--fg-3); }

/* ==========================================================================
   18  UTILITIES
   ========================================================================== */

/* Icons — symbols carry their own stroke attributes, so this is sizing only. */
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

.stack > * + *    { margin-top: 20px; }
.stack-lg > * + * { margin-top: 32px; }
.stack-sm > * + * { margin-top: 12px; }

.span-all { grid-column: 1 / -1; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: var(--measure); }
.measure-sm { max-width: 52ch; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 32px; }
.mt-6 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }

.hide-sm { }
@media (max-width: 720px) { .hide-sm { display: none; } }

/* ==========================================================================
   19  MOTION & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Pipeline resolves to every stage lit, static. */
  .pipeline__pulse { display: none; }
  .pipeline__node { border-color: var(--cyan-400); color: var(--cyan-300); }
  .pipeline__label { color: var(--fg); }
  .pipeline__step { background: var(--accent-quiet); }
}

@media print {
  .site-header, .site-footer, .toc, .nav-toggle, .btn { display: none !important; }
  .band { padding-block: 24px; }
  /* Repainting the band is not enough: its children read the dark-scope tokens,
     so those have to come back to ink-on-paper too or they print white on white. */
  .band--dark, .band--dark * { background-image: none !important; }
  .band--dark {
    background: #FFF !important; color: #000 !important;
    --fg: #000; --fg-2: #1A1A1A; --fg-3: #444;
    --surface: #FFF; --surface-2: #FFF; --surface-3: #FFF;
    --border: #CCC; --border-strong: #999; --border-control: #999;
    --accent: #0E7490; --accent-quiet: #EEE;
  }
  .stepper__panel { display: block !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; color: #555; }
}