/* ==========================================================================
   APN - polish layer  (v2, anchored to apn-logo.svg)

   Load AFTER styles.css:
       <link rel="stylesheet" href="styles.css" />
       <link rel="stylesheet" href="apn-polish.css" />

   Overrides design tokens only - no class in your markup is restyled - so it
   applies to the current index.html with no edits to the HTML.

   PALETTE, DERIVED FROM THE LOGO
   The brand blue is #0A6EFE - the exact value used in the application, so
   the landing page and the product read as one thing. The wordmark is
   #0C132C. Every blue below is that same hue and chroma
   (oklch h=259.97 c=0.230) stepped only in lightness.

     brand      #0A6EFE  THE application's blue. Identity, icons, accents.
                         4.49:1 with white - just under AA, so never used as
                         a button fill or for body-size link text.
     brand-700  #005DE0  interactive: buttons, links, focus.   5.77:1
     brand-800  #0043AC  hover / pressed / deep accents.       8.76:1
     brand-100  #E0ECFF  tinted surfaces and icon chips.
     ink        #0C132C  logo wordmark navy. Headings.        18.3:1
     ink-soft   #47506B  body copy.                            7.6:1
     paper      #FBFCFD  cool white (was warm cream #FCFAF6).
   ========================================================================== */

:root {
  /* --- neutrals: cooled from hue 80 (cream) to hue 250, to match the logo --- */
  --background: #fbfcfd;
  --surface: #f1f5fb;
  --surface-elevated: #ffffff;
  --card: #ffffff;
  --popover: #ffffff;

  --foreground: #0c132c;
  --card-foreground: #0c132c;
  --popover-foreground: #0c132c;
  --ink: #0c132c;
  --ink-soft: #47506b;

  /* --- brand --- */
  --primary: #005de0;          /* was #0089ea - white text on it failed at 3.64:1 */
  --primary-foreground: #ffffff;
  --brand: #0a6efe;
  --brand-700: #005de0;
  --brand-800: #0043ac;
  --brand-100: #e0ecff;     /* reserved for live/active data accents */
  --brand-deep: #0043ac;

  --secondary: #eef3fa;
  --secondary-foreground: #0c132c;
  --muted: #eef3fa;
  --muted-foreground: #5a6675;
  --accent: #e5eeff;
  --accent-foreground: #0043ac;
  --destructive: #d13b3b;
  --destructive-foreground: #ffffff;
  --success: #0f7a5a;

  --border: #dbe3ee;
  --input: #d0dbe9;
  --ring: #005de0;

  /* legacy names kept alive so old rules don't fall back to nothing */
  --amber-glow: var(--brand);
  --gradient-amber: linear-gradient(135deg, #0068f7, #0043ac);

  --gradient-hero:
    radial-gradient(1100px 560px at 78% -12%, rgb(10 110 254 / 0.16), transparent 62%),
    radial-gradient(820px 460px at 8% 6%, rgb(10 110 254 / 0.16), transparent 62%);

  /* cool navy shadows instead of the old blue-purple cast */
  --shadow-soft: 0 1px 2px rgb(12 19 44 / 0.05), 0 8px 24px -10px rgb(12 19 44 / 0.10);
  --shadow-float: 0 28px 70px -32px rgb(12 19 44 / 0.30), 0 8px 20px -12px rgb(12 19 44 / 0.12);
  --shadow-window: 0 22px 56px -24px rgb(12 19 44 / 0.22), 0 2px 6px rgb(12 19 44 / 0.05);

  /* Instrument Serif retired: a serif display on an operations product reads
     decorative. Inter across the board, with a mono for document IDs. */
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-doc: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* dark tokens were still the template's orange (#ff9c3f) and unreferenced.
   Corrected so nothing flips brand colour if .dark is ever applied. */
.dark {
  --background: #0c132c;
  --surface: #121b2c;
  --surface-elevated: #16203300;
  --foreground: #f7f9fb;
  --ink: #f7f9fb;
  --ink-soft: #a9b6c6;
  --card: #131d2e;
  --card-foreground: #f7f9fb;
  --popover: #131d2e;
  --popover-foreground: #f7f9fb;
  --primary: #4d94ff;
  --primary-foreground: #06101f;
  --secondary: #1b2739;
  --secondary-foreground: #f7f9fb;
  --muted: #1b2739;
  --muted-foreground: #9fadbe;
  --accent: #16233a;
  --accent-foreground: #d9e7ff;
  --border: rgb(255 255 255 / 0.10);
  --input: rgb(255 255 255 / 0.16);
  --ring: #4d94ff;
}

/* Tailwind v4 inlines theme values into utilities, so redefining
   --font-display alone does not change the .font-display class - it still
   carries a literal "Instrument Serif". This overrides the utility itself. */
.font-display {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

/* Headline emphasis spans were written as serif italic
   (class="font-display italic text-primary"). With Inter, italic reads like
   a mistake - the emphasis now carries on weight and colour instead. */
.font-display.italic {
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--primary);
}

/* ==========================================================================
   Global quality floor

   NOTE: these live inside @layer base on purpose. styles.css is Tailwind v4,
   which puts .h-9, .w-auto etc. inside @layer utilities - and in the CSS
   cascade, UNLAYERED rules beat layered ones regardless of specificity.
   An unlayered `img { height: auto }` here silently overrode the header
   logo's .h-9 and blew the whole header apart. Keep element-level rules
   layered; keep only tokens and custom classes unlayered.
   ========================================================================== */

@layer base {
  html {
    scroll-behavior: smooth;
  }

  /* stops the sticky header from covering anchor targets */
  section[id],
  div[id] {
    scroll-margin-top: 6.5rem;
  }

  ::selection {
    background: #cfe0ff;
    color: #0043ac;
  }

  /* keyboard focus was invisible; the single biggest a11y win here */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* numbers in a nalog should line up like they do on the paper form */
  table,
  .tabular,
  .doc-value,
  [data-numeric] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Form fields - clearer states, real error styling
   ========================================================================== */

.form-input,
.form-textarea {
  background: var(--surface-elevated);
  border: 1px solid var(--input);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(10 110 254 / 0.16);
}

.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px rgb(209 59 59 / 0.12);
}

.form-error {
  margin-top: 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(209 59 59 / 0.35);
  background: rgb(209 59 59 / 0.06);
  color: #8f2323;
  font-size: 0.875rem;
}

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

/* ==========================================================================
   Signature: document-grade data
   The product replaces stamped paper forms, so IDs and figures are set the
   way they appear on the nalog itself.
   ========================================================================== */

.doc-id {
  font-family: var(--font-doc);
  font-size: 0.8125em;
  letter-spacing: 0.02em;
  color: var(--brand-deep);
  background: var(--accent);
  padding: 0.15em 0.45em;
  border-radius: 0.3rem;
  white-space: nowrap;
}

.doc-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--success);
  border: 1px solid rgb(15 122 90 / 0.3);
  background: rgb(15 122 90 / 0.07);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

/* ==========================================================================
   Proof section (pairs with proof-section.html)
   ========================================================================== */

.proof {
  padding: 4.5rem 0;
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.proof-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.proof-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.proof-title {
  margin-top: 0.75rem;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 28ch;
}

.proof-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.proof-case {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.proof-case-meta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.proof-case-result {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.proof-case-quote {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.proof-case-role {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.proof-note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   Small responsive corrections
   ========================================================================== */

@media (max-width: 480px) {
  .proof { padding: 3rem 0; }
}

/* The privacy link inside the form note lost its underline (the Tailwind
   utility doesn't survive the i18n innerHTML replacement). Made explicit. */
#kontakt p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   "Za koga je APN" segments (pairs with segments-section.html)

   Replaces the eight one-word industry boxes. Same visual language as the
   module cards, but each one names a situation rather than a label.
   ========================================================================== */

.segments {
  padding: 4.5rem 0;
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.segments-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.segments-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
}

.segments-title {
  margin-top: 0.75rem;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  max-width: 30ch;
}

.segments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.segment {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.segment:hover {
  box-shadow: var(--shadow-float);
  transform: translateY(-2px);
}

.segment-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--brand-100);
  color: var(--brand-700);
}

.segment-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.segment-title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.segment-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.segment-tags {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.segments-more {
  margin-top: 1.5rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 480px) {
  .segments { padding: 3rem 0; }
}

/* ==========================================================================
   UX revision
   ========================================================================== */

/* --- 1. Skip link. First tab stop on every page; invisible until focused. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* --- 2. Current-section state in the header nav.
   Soft chip (brand tint + weight), not an underline - the bar read as a
   second border under the glass header and fought the rounded nav pills. */
.header-nav a[aria-current="true"],
#mobile-menu a[aria-current="true"] {
  color: var(--brand-700);
  font-weight: 600;
  background: var(--brand-100);
}

.header-nav a[aria-current="true"]:hover,
#mobile-menu a[aria-current="true"]:hover {
  color: var(--brand-800);
  background: var(--brand-100);
}

/* --- 4. Module cards carried 11-14 tags each, which read as noise rather
   than detail. Six is enough to convey range; the rest are still in the DOM
   for search engines. */
.module-tags > span:nth-child(n + 7) {
  display: none;
}


#moduli .grid > .group {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

#moduli .grid > a.group:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

#moduli .module-tags {
  margin-top: auto;
  padding-top: 1rem;
}

/* --- 5. Automation: ten near-identical cards became a scannable list.
   Same information, roughly half the height. */
.auto-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 2.5rem;
  margin-top: 2.5rem;
}

.auto-item {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.auto-item-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--brand-100);
  color: var(--brand-700);
}

.auto-item-icon svg {
  width: 1rem;
  height: 1rem;
}

.auto-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.auto-item-desc {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- 6. Vertical rhythm. py-28 (7rem) top and bottom on every section is
   a lot of scrolling on a phone for no gain. */
@media (max-width: 640px) {
  section.py-28 {
    padding-block: 3.5rem;
  }
  .segments,
  .proof {
    padding-block: 3rem;
  }
}

/* --- 7. Reading measure. Long body paragraphs ran the full container
   width; ~70 characters is where comfortable reading tops out. */
.segment-body,
.proof-case-quote,
.auto-item-desc {
  max-width: 62ch;
}

/* ==========================================================================
   Header navigation

   The old nav had five items where three (Moduli / Platforma / Zašto APN)
   all meant "the product", and the seven real subpages were reachable only
   from the footer. This is a site nav rather than a page nav: four items,
   no synonyms, every product page one click from the header.
   ========================================================================== */

.header-nav {
  gap: 0.25rem;
}

.navlink,
.navmenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.6rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.navlink:hover,
.navmenu-trigger:hover,
.navmenu.is-open .navmenu-trigger {
  color: var(--ink);
  background: var(--muted);
}

.navmenu-trigger svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.18s ease;
}

.navmenu.is-open .navmenu-trigger svg {
  transform: rotate(180deg);
}

/* --- flyout panel --- */
.navmenu {
  position: relative;
}

.navmenu-panel {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.65rem);
  z-index: 70;
  width: min(41rem, 90vw);
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  /* near-opaque: at 0.86 the hero headline read straight through the panel */
  background: rgb(255 255 255 / 0.98);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.4rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.navmenu.is-open .navmenu-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* keeps the pointer from crossing dead space between trigger and panel */
.navmenu-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.7rem;
  height: 0.7rem;
}

.navmenu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
}

.navmenu-item {
  display: flex;
  gap: 0.7rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.navmenu-item:hover {
  background: var(--brand-100);
}

.navmenu-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: var(--brand-100);
  color: var(--brand-700);
}

.navmenu-item:hover .navmenu-icon {
  background: #fff;
}

.navmenu-icon svg {
  width: 1rem;
  height: 1rem;
}

.navmenu-item-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.navmenu-item-desc {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.navmenu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.7rem 0.8rem 0.35rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.navmenu-foot a {
  font-weight: 600;
  color: var(--brand-700);
  white-space: nowrap;
}

/* --- mobile sheet --- */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-0.45rem);
  pointer-events: none;
  visibility: hidden;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  box-shadow: none;
  transition:
    max-height 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.24s ease,
    transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    margin-top 0.34s ease,
    padding 0.34s ease,
    border-color 0.24s ease,
    box-shadow 0.34s ease,
    visibility 0s linear 0.34s;
}

#mobile-menu.is-open {
  max-height: min(80vh, 42rem);
  overflow-y: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
  transition-delay: 0s;
}

.burger {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.burger-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.18s ease,
    top 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.burger-line:nth-child(1) { top: 3px; }
.burger-line:nth-child(2) { top: 9px; }
.burger-line:nth-child(3) { top: 15px; }

.header-menu-toggle[aria-expanded="true"] .burger-line:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.header-menu-toggle[aria-expanded="true"] .burger-line:nth-child(2) {
  opacity: 0;
}

.header-menu-toggle[aria-expanded="true"] .burger-line:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

#mobile-menu .m-group-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

#mobile-menu .m-group-trigger svg {
  width: 1rem;
  height: 1rem;
  color: var(--ink-soft);
  transition: transform 0.18s ease;
}

#mobile-menu .m-group-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

#mobile-menu .m-group-body {
  display: none;
  padding: 0 0.4rem 0.4rem;
}

#mobile-menu .m-group-body.is-open {
  display: block;
}

#mobile-menu .m-sub {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 0.6rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

#mobile-menu .m-sub:hover {
  background: var(--muted);
  color: var(--ink);
}

.nav-external {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.25em;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .navmenu-panel,
  .navmenu-trigger svg,
  #mobile-menu .m-group-trigger svg {
    transition: none;
  }
}

/* ==========================================================================
   Hero rotator - one lead-in, a cycling object
   ========================================================================== */

.rotator {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.rotator-lead {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  line-height: inherit;
}

.rotator-lead::after {
  content: "›››";
  margin-left: 0.4rem;
  color: var(--brand);
  letter-spacing: -0.08em;
}


.rotator-slot {
  display: grid;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  line-height: inherit;
}

.rotator-item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.35s ease, transform 0.35s ease;
  color: var(--brand-700);
  font-weight: 600;
  line-height: inherit;
  pointer-events: none;
}

.rotator-item.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.rotator-item.is-leaving {
  opacity: 0;
  transform: translateY(-0.5em);
}

/* ==========================================================================
   Nalog lifecycle - the product doing its job, not a screenshot of it
   ========================================================================== */

.nalog {
  max-width: 46rem;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}

.nalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.nalog-route {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.nalog-sub {
  margin-top: 0.1rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.nalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--ink-soft);
}

.nalog-chip::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
}

.nalog-chip .chip-done,
.nalog-chip.is-done .chip-active {
  display: none;
}

.nalog-chip.is-done .chip-done {
  display: inline;
}

.nalog-chip.is-done {
  color: var(--success);
  border-color: rgb(15 122 90 / 0.35);
  background: rgb(15 122 90 / 0.07);
}

/* --- step rail --- */
.nalog-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 1.1rem 1.2rem 0.4rem;
}

.nalog-step {
  position: relative;
  padding-top: 1.1rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  transition: color 0.3s ease;
}

.nalog-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--border);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.nalog-step::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: -0.5rem;
  top: 0.575rem;
  height: 2px;
  background: var(--border);
  transition: background-color 0.4s ease;
}

.nalog-step:last-child::after {
  display: none;
}

.nalog-step.is-on {
  color: var(--ink);
  font-weight: 600;
}

.nalog-step.is-on::before {
  background: var(--brand-700);
  box-shadow: 0 0 0 4px rgb(10 110 254 / 0.15);
}

.nalog-step.is-on::after {
  background: var(--brand-700);
}

/* --- fields --- */
.nalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.1rem 1.4rem;
  padding: 0.9rem 1.2rem 0.4rem;
}

.nalog-field {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.nalog-field.is-on {
  opacity: 1;
  transform: translateY(0);
}

.nalog-label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nalog-value {
  margin-top: 0.1rem;
  font-family: var(--font-doc);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- log --- */
.nalog-log {
  margin: 0.6rem 1.2rem 1.1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.7rem;
  background: var(--ink);
  min-height: 6.6rem;
}

.nalog-log-line {
  display: flex;
  gap: 0.7rem;
  font-family: var(--font-doc);
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.72);
  opacity: 0;
  transform: translateY(0.3rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nalog-log-line.is-on {
  opacity: 1;
  transform: translateY(0);
}

.nalog-log-time {
  color: var(--brand);
  flex: 0 0 auto;
}

.nalog-log-line.is-final {
  color: #7fe3c0;
}

.nalog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.2rem 1.1rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.nalog-replay {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface-elevated);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-700);
  cursor: pointer;
}

.nalog-replay:hover {
  background: var(--brand-100);
}

@media (max-width: 560px) {
  .nalog-grid { grid-template-columns: repeat(2, 1fr); }
  .nalog-steps { grid-template-columns: repeat(2, 1fr); row-gap: 0.9rem; }
  .nalog-step:nth-child(2)::after { display: none; }
  .rotator { flex-direction: column; align-items: flex-start; gap: 0.15rem; }

  /* the slot holds absolutely-positioned items, so with align-items:flex-start
     it collapses to zero width and the cycling text disappears */
  .rotator-slot { align-self: stretch; width: 100%; }
}

/* ==========================================================================
   Proximity

   Measured before touching it: the hero ran 24/24/24/24/24px between every
   sibling, segment cards 12/12/12, proof cards 14/14/14. Equal gaps mean no
   grouping - the eye can't tell which lines belong together, so it reads
   every block as one undifferentiated list.

   The rule applied below: within a group 4-14px, between groups 24-34px.
   ========================================================================== */

/* --- hero: three groups, not five equal steps ---
   [badge + headline + rotator] = the claim
   [subtitle]                   = the explanation
   [buttons + trust chips]      = the action                              */
.hero-copy > * + * {
  margin-top: 1.75rem;
}

.hero-copy > h1 {
  margin-top: 0.75rem;      /* badge labels the headline - keep them together */
}

.hero-copy > .rotator {
  margin-top: 0.9rem;       /* rotator continues the headline's sentence */
}

.hero-copy > p {
  margin-top: 1.75rem;      /* new group: explanation */
}

.hero-copy > div:has(> a) {
  margin-top: 2rem;         /* new group: action */
}

.hero-copy > div:last-child {
  margin-top: 1.15rem;      /* trust chips belong to the buttons above them */
}

/* --- cards: label tight to what it labels --- */
.segment {
  gap: 0;
}

.segment-title {
  margin-top: 0.85rem;      /* icon is a marker, not a sibling line */
}

.segment-body {
  margin-top: 0.4rem;       /* title and body are one unit */
}

.segment-tags {
  margin-top: auto;
}

.proof-case {
  gap: 0;
}

.proof-case-result {
  margin-top: 0.4rem;       /* the meta line labels the result */
}

.proof-case-quote {
  margin-top: 0.9rem;       /* separate thought */
}

/* --- section heading groups --- */
.segments-title,
.proof-title {
  margin-top: 0.55rem;      /* eyebrow labels the heading */
}

/* --- form: label belongs to its input --- */
.form-label {
  display: block;
  margin-bottom: 0.35rem;
}

.form-field + .form-field,
.form-grid-2 + .form-grid-2 {
  margin-top: 1.35rem;
}

/* --- automation list: title and its line are one unit --- */
.auto-item-desc {
  margin-top: 0.15rem;
}

/* ==========================================================================
   Lifecycle: streaming feed

   Reworked toward the Conductor "Workflow Orchestration" idiom - a log that
   streams rather than a sequence that reveals. Each line arrives pending,
   sits with a working ellipsis, then resolves. Loops continuously.
   ========================================================================== */

.nalog-meter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-doc);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.nalog-meter-idx {
  color: var(--brand-700);
  font-weight: 700;
}

.nalog-meter-bar {
  display: block;
  width: 3.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.nalog-meter-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brand-700);
  transition: width 0.5s ease;
}

.nalog-head {
  flex-wrap: wrap;
}

/* --- pending / resolved log lines --- */
.nalog-log-dots {
  color: var(--brand);
  flex: 0 0 auto;
  width: 1.1rem;
  opacity: 0;
}

.nalog-log-line.is-pending .nalog-log-dots {
  opacity: 1;
  animation: nalog-dots 1s steps(4, end) infinite;
}

.nalog-log-line.is-pending {
  color: rgb(255 255 255 / 0.45);
}

.nalog-log-line.is-pending .nalog-log-time {
  color: rgb(255 255 255 / 0.35);
}

@keyframes nalog-dots {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* the resolved line gets a tick in place of the dots */
.nalog-log-line.is-on:not(.is-pending) .nalog-log-dots::after {
  content: "✓";
  color: #7fe3c0;
}

.nalog-log-line.is-on:not(.is-pending) .nalog-log-dots {
  opacity: 1;
  font-size: 0;
}

.nalog-log-line.is-on:not(.is-pending) .nalog-log-dots::after {
  font-size: 0.76rem;
}

@media (prefers-reduced-motion: reduce) {
  .nalog-log-line.is-pending .nalog-log-dots { animation: none; }
  .nalog-meter-bar i { transition: none; }
}

/* ==========================================================================
   Type scale

   Audit found 23 distinct font sizes rendering on the page, including seven
   between 10px and 11.5px - 0.68, 0.7, 0.72, 0.76, 0.78, 0.8125, 0.9,
   0.9375, 1.05 and 1.0625rem all coexisting. Most were near-duplicates
   introduced component by component.

   Collapsed to seven steps, matching the Tailwind base already in use:

     display  3.75rem / 60px   hero headline
     h2       3rem    / 48px   section headings (2.25rem under 768px)
     lead     1.125rem/ 18px   intros, card titles, standout lines
     base     1rem    / 16px   body copy
     sm       0.875rem/ 14px   secondary text, UI labels, data values
     xs       0.75rem / 12px   captions, tags, log lines, meta
     2xs      0.6875rem/11px   uppercase micro-labels only
   ========================================================================== */

:root {
  --fs-lead: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-2xs: 0.6875rem;
}

/* --- headings: my two custom sections drifted to 40px and 36px --- */
.segments-title,
.proof-title {
  font-size: 2.25rem;
}

@media (min-width: 768px) {
  .segments-title,
  .proof-title {
    font-size: 3rem;
  }
}

/* --- lead --- */
.rotator,
.segment-title,
.proof-case-result {
  font-size: var(--fs-lead);
}

/* --- base --- */
.segment-body,
.proof-case-quote,
.segments-more,
.auto-item-title,
.nalog-route,
#mobile-menu .m-group-trigger {
  font-size: var(--fs-base);
}

/* --- sm --- */
.proof-case-role,
.proof-note,
.auto-item-desc,
.navlink,
.navmenu-trigger,
.navmenu-item-title,
.navmenu-foot,
.nalog-value,
#mobile-menu .m-sub,
.form-error,
.skip-link {
  font-size: var(--fs-sm);
}

/* --- xs --- */
.segments-eyebrow,
.proof-eyebrow,
.segment-tags,
.proof-case-meta,
.navmenu-item-desc,
.nalog-sub,
.nalog-step,
.nalog-log-line,
.nalog-foot,
.nalog-replay,
[class*="text-[10.5px]"],
.module-tags > span {
  font-size: var(--fs-xs);
}

/* --- 2xs: uppercase micro-labels only, where 12px would be too loud --- */
.nalog-label,
.nalog-chip,
.nalog-meter,
.doc-id,
[class*="text-[10px]"],
[class*="text-[11px]"] {
  font-size: var(--fs-2xs);
}

.doc-id {
  font-size: var(--fs-2xs);
}

/* the tick and ellipsis in the log ride the log's own size */
.nalog-log-line.is-on:not(.is-pending) .nalog-log-dots::after {
  font-size: var(--fs-xs);
}

/* the language switcher and form labels sat at 13px, the last odd step */
.lang-switch-btn,
.lang-option,
.lang-pill,
.form-label,
.form-label .optional {
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Review & collaboration

   Replaces the legacy hub-and-spokes orbit in #zasto - a decorative diagram
   whose connector-line script had stopped running, and which showed the
   org chart rather than the product. Same streaming idiom as the lifecycle
   widget: each approver arrives pending, works, then resolves.
   ========================================================================== */

.review {
  max-width: 46rem;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.review-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
}

.review-sub {
  margin-top: 0.15rem;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.review-count {
  font-family: var(--font-doc);
  font-size: var(--fs-2xs);
  color: var(--ink-soft);
  white-space: nowrap;
}

.review-count b {
  color: var(--brand-700);
}

/* --- approver rows --- */
.review-rows {
  padding: 0.4rem 1.2rem 0.6rem;
}

.review-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  opacity: 0.4;
  transition: opacity 0.35s ease;
}

.review-row:last-child {
  border-bottom: 0;
}

.review-row.is-on {
  opacity: 1;
}

.review-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--muted);
  color: var(--ink-soft);
  font-family: var(--font-doc);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.review-row.is-on .review-avatar {
  background: var(--brand-100);
  color: var(--brand-700);
}

.review-row.is-done .review-avatar {
  background: rgb(15 122 90 / 0.1);
  color: var(--success);
}

.review-who {
  flex: 1 1 auto;
  min-width: 0;
}

.review-role {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.review-action {
  margin-top: 0.1rem;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.review-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-doc);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  white-space: nowrap;
}

.review-tick {
  width: 1rem;
  text-align: center;
  color: var(--brand);
}

.review-row.is-pending .review-tick::after {
  content: "•••";
  letter-spacing: -0.1em;
  animation: review-dots 1s steps(3, end) infinite;
}

.review-row.is-done .review-tick {
  color: var(--success);
}

.review-row.is-done .review-tick::after {
  content: "✓";
}

.review-row.is-pending .review-time,
.review-row:not(.is-on) .review-time {
  visibility: hidden;
}

@keyframes review-dots {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* --- attachments strip --- */
.review-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.2rem 1.1rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.review-file {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--surface);
  font-family: var(--font-doc);
  font-size: var(--fs-2xs);
  color: var(--ink);
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.review-file.is-on {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 560px) {
  .review-state { align-self: flex-start; }
  .review-row { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .review-row.is-pending .review-tick::after { animation: none; }
}

/* ==========================================================================
   Lifecycle: waiting state

   At the top of each loop the card showed six half-faded values and an
   unlit rail - it read as broken rather than as pending. The field rows now
   stay in place with their labels dimmed and a skeleton bar holding the
   value's space, so the empty state says "not yet" instead of "missing".
   ========================================================================== */

.nalog-field {
  position: relative;
  opacity: 1;
  transform: none;
}

.nalog-field .nalog-label {
  opacity: 0.45;
  transition: opacity 0.35s ease;
}

.nalog-field .nalog-value {
  opacity: 0;
  transform: translateY(0.3rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.nalog-field.is-on .nalog-label {
  opacity: 1;
}

.nalog-field.is-on .nalog-value {
  opacity: 1;
  transform: none;
}

.nalog-skel {
  position: absolute;
  left: 0;
  bottom: 0.62rem;
  width: 58%;
  height: 0.62rem;
  border-radius: 3px;
  background: var(--muted);
  transition: opacity 0.25s ease;
}

.nalog-field:nth-child(2) .nalog-skel { width: 46%; }
.nalog-field:nth-child(4) .nalog-skel { width: 40%; }
.nalog-field:nth-child(6) .nalog-skel { width: 52%; }

.nalog-field.is-on .nalog-skel {
  opacity: 0;
}

/* the rail always shows where the order stands, never a row of dead dots */
.nalog-step:first-child::before {
  background: var(--brand-700);
  box-shadow: 0 0 0 4px rgb(10 110 254 / 0.15);
}

.nalog-step:first-child {
  color: var(--ink);
  font-weight: 600;
}

/* ==========================================================================
   Demo grid - the three animations side by side

   Shown together rather than behind tabs, so the section makes its whole
   argument at a glance: a travel order, a work order and an automation rule
   all running in one platform. Starts are staggered by 400ms each so the
   three don't pulse in unison, which reads as decoration rather than work.
   ========================================================================== */

.demogrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 2.5rem;
  align-items: stretch;
}

/* equal-height cards; the column heading sits above, the card fills the rest */
.democol {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1100px) {
  .demogrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.democol-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
}

.democol-sub {
  margin-top: 0.15rem;
  margin-bottom: 0.85rem;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

/* --- the three cards were built as one wide focal panel; tighten them --- */
.demogrid .nalog,
.demogrid .review,
.demogrid .flow {
  max-width: none;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.demogrid .nalog-log,
.demogrid .review-foot,
.demogrid .flow-result {
  margin-top: auto;
}

.demogrid .nalog-head,
.demogrid .review-head,
.demogrid .flow-head {
  padding: 0.75rem 0.9rem;
}

.demogrid .nalog-steps {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 0.85rem;
  padding: 0.9rem 0.9rem 0.3rem;
}

.demogrid .nalog-step:nth-child(2)::after {
  display: none;
}

.demogrid .nalog-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.1rem 1rem;
  padding: 0.7rem 0.9rem 0.3rem;
}

.demogrid .nalog-log {
  margin: 0.5rem 0.9rem 0.9rem;
  padding: 0.6rem 0.7rem;
  min-height: 6.2rem;
}

.demogrid .nalog-foot {
  padding: 0 0.9rem 0.9rem;
}

.demogrid .nalog-meter-bar {
  width: 2.25rem;
}

.demogrid .review-rows {
  padding: 0.3rem 0.9rem 0.5rem;
}

.demogrid .review-row {
  align-items: flex-start;
  gap: 0.65rem;
}

/* role and action stack in a narrow column instead of running as one line */
.demogrid .review-role,
.demogrid .review-action {
  display: block;
}

.demogrid .review-state {
  align-self: flex-start;
  padding-top: 0.1rem;
}

.demogrid .review-foot {
  padding: 0.75rem 0.9rem 0.9rem;
}

.demogrid .flow-body {
  padding: 0.9rem 0.9rem 0.3rem;
}

.demogrid .flow-node + .flow-node {
  margin-top: 1.15rem;
}

.demogrid .flow-node + .flow-node::before,
.demogrid .flow-node + .flow-node::after {
  top: -1.15rem;
  height: 1.15rem;
}

.demogrid .flow-node.is-on + .flow-node::after,
.demogrid .flow-node.is-fired + .flow-node::after {
  height: 1.15rem;
}

.demogrid .flow-result {
  margin: 0.9rem 0.9rem 0.9rem;
  padding: 0.6rem 0.7rem;
}

/* ==========================================================================
   Automation rule - trigger, condition, actions
   ========================================================================== */

.flow {
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}

.flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.flow-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
}

.flow-sub {
  margin-top: 0.15rem;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.flow-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-doc);
  font-size: var(--fs-2xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--success);
}

.flow-live::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
}

.flow-body {
  padding: 1.1rem 1.2rem 0.4rem;
}

.flow-node {
  position: relative;
  display: flex;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
  opacity: 0.45;
  transition: opacity 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

.flow-node.is-on {
  opacity: 1;
  border-color: rgb(10 110 254 / 0.35);
  background: var(--surface-elevated);
}

.flow-node.is-fired {
  border-color: rgb(15 122 90 / 0.3);
}

/* connector between nodes */
.flow-node + .flow-node {
  margin-top: 1.5rem;
}

.flow-node + .flow-node::before {
  content: "";
  position: absolute;
  left: 1.85rem;
  top: -1.5rem;
  width: 2px;
  height: 1.5rem;
  background: var(--border);
}

.flow-node + .flow-node::after {
  content: "";
  position: absolute;
  left: 1.85rem;
  top: -1.5rem;
  width: 2px;
  height: 0;
  background: var(--brand-700);
  transition: height 0.4s ease;
}

.flow-node.is-on + .flow-node::after,
.flow-node.is-fired + .flow-node::after {
  height: 1.5rem;
}

.flow-kind {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--muted);
  color: var(--ink-soft);
  font-family: var(--font-doc);
  font-size: var(--fs-2xs);
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.flow-node.is-on .flow-kind {
  background: var(--brand-100);
  color: var(--brand-700);
}

.flow-node.is-fired .flow-kind {
  background: rgb(15 122 90 / 0.1);
  color: var(--success);
}

.flow-label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.flow-text {
  margin-top: 0.1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.flow-result {
  margin: 1.1rem 1.2rem 1.2rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.7rem;
  background: var(--ink);
  font-family: var(--font-doc);
  font-size: var(--fs-xs);
  color: #7fe3c0;
  opacity: 0;
  transform: translateY(0.3rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.flow-result.is-on {
  opacity: 1;
  transform: none;
}

@media (max-width: 560px) {
  .demotabs-list { flex-wrap: wrap; }
  .demotab { flex: 1 1 45%; }
}

/* ==========================================================================
   Buttons - matched to the application

   Sampled from the product screenshots: the app's primary button is a flat
   #0266FB with white text and an ~8px radius, not a gradient. The landing
   page was using a two-stop gradient, which is the single most obvious
   giveaway that the marketing site and the product are different things.

   #0266FB is white-on 4.89:1, so it clears AA on its own - no compromise
   needed between matching the app and staying legible.

   .amber-gradient is the shared class on every primary CTA (header, hero,
   contact form, mobile bar), so overriding it covers all of them at once.
   ========================================================================== */

:root {
  --btn: #0266fb;          /* the application's button fill */
  --btn-hover: #0056da;    /* same hue, one step down */
  --gradient-amber: var(--btn);
}

.amber-gradient {
  background-image: none;
  background-color: var(--btn);
  border-radius: 0.5rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(2 102 251 / 0.18);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.amber-gradient:hover {
  background-color: var(--btn-hover);
  opacity: 1;                       /* the old rule faded the whole button */
  box-shadow: 0 2px 6px rgb(2 102 251 / 0.26);
}

.amber-gradient:active {
  background-color: var(--btn-hover);
  box-shadow: none;
}

/* icon chips inside module cards reuse the class on hover - keep those round */
.group-hover\:amber-gradient {
  border-radius: 0.75rem;
}

/* --- secondary: the app's outline button is blue on white, not grey --- */
.hero-copy a[href="#platforma"],
#kontakt a[href^="mailto"] {
  border-color: rgb(2 102 251 / 0.35);
  color: var(--btn);
}

.hero-copy a[href="#platforma"]:hover {
  border-color: var(--btn);
  background: var(--brand-100);
}

/* ==========================================================================
   Footer

   Proximity, measured before the rewrite: the brand block ran 16 / 16 / 28
   between logo, description, address and the app block - description and
   address equidistant, so they read as one flat list instead of "who we
   are" then "where we are". The four columns also stretched to a common
   893px bottom while the link lists ended ~300px higher, leaving a void
   under them that made the whole footer look unfinished.

   Now: the brand column holds only identity, the link columns sit beside it
   at comparable height, and the app badges move down to the bottom bar
   where they balance the SCE lockup.
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  padding-block: 3.5rem 2rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;         /* was stretch - that produced the empty void */
}

@media (min-width: 720px) {
  .footer-top { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: span 3; }
}

@media (min-width: 1024px) {
  .footer-top {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
  }
  .footer-brand { grid-column: auto; }
}

/* --- brand: identity, then location --- */
.footer-logo {
  height: 2.25rem;
  width: auto;
}

.footer-brand-desc {
  margin-top: 0.85rem;        /* belongs with the logo */
  max-width: 34ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}

.footer-address {
  margin-top: 1.5rem;         /* separate fact, clearly apart */
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

/* --- link columns --- */
.footer-col-title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer-col ul {
  margin-top: 1.1rem;         /* label to its group */
  display: flex;
  flex-direction: column;
  gap: 0.7rem;                /* items tighter than the label gap */
}

.footer-col a {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--ink);
}

/* --- bottom bar --- */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.footer-by {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.25rem;
}

.footer-by img {
  height: 2.4rem;
  width: auto;
}

.footer-by span {
  color: var(--brand-700);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgb(0 93 224 / 0.4);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.footer-by:hover span {
  color: var(--brand-800);
  text-decoration-color: var(--brand-800);
}

/* --- app badges --- */
.footer-apps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.footer-apps-label {
  margin-right: 0.25rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--surface-elevated);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.app-badge:hover {
  border-color: var(--btn);
  background: var(--brand-100);
}

.app-badge svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ink);
  flex: 0 0 auto;
}

.app-badge-text { display: block; line-height: 1.2; }

.app-badge-small {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--ink-soft);
}

.app-badge-name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

/* --- copyright: a footnote, not a peer of the bar above it --- */
.footer-copy {
  margin-top: 1.5rem;
  font-size: var(--fs-2xs);
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .footer-bottom { justify-content: flex-start; }
  .footer-apps-label { width: 100%; margin-bottom: 0.15rem; }
}

/* ==========================================================================
   Contact form corrections

   1. `.form-field + .form-field { margin-top }` from the proximity pass was
      also matching the *second column* inside `.form-grid-2`, pushing Email
      and Telefon 21.6px below their row partners. Scoped out.

   2. The trust row used `gap-x-5`, which doesn't exist: styles.css is a
      pre-built Tailwind file containing only the classes the original
      markup used, so any utility introduced later silently does nothing.
      Its labels ran together as one string. Given a real class instead.
   ========================================================================== */

.form-grid-2 .form-field + .form-field {
  margin-top: 0;
}

.form-grid-2 {
  align-items: start;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

/* --- contact list: one treatment for all three rows --- */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.contact-list svg {
  width: 1rem;
  height: 1rem;
  color: var(--btn);
  flex: 0 0 auto;
}

.contact-list a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.contact-list a:hover {
  color: var(--btn);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Tap targets

   Footer links rendered 16px tall and contact links 21px - under the 24×24
   minimum, and awkward to hit on a phone. Padding enlarges the hit area;
   the list gap shrinks by the same amount so the visual rhythm is unchanged.
   ========================================================================== */

.footer-col ul {
  gap: 0.2rem;
}

.footer-col a {
  display: inline-block;
  padding-block: 0.3rem;
}

.contact-list {
  gap: 0.35rem;
}

.contact-list li {
  padding-block: 0.15rem;
}

/* the anchor is the target, not the row it sits in */
.contact-list a {
  display: inline-block;
  padding-block: 0.25rem;
}

.navmenu-foot a {
  display: inline-block;
  padding-block: 0.2rem;
}

.timeline-track-fill {
  width: 0%;
  background: var(--brand-700);
  transform-origin: left;
  transition: width 2.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-viz.is-active .timeline-track-fill {
  width: 100%;
}

.timeline-step {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.83s ease, transform 0.83s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--step-i, 0) * 225ms);
}

.timeline-viz.is-active .timeline-step {
  opacity: 1;
  transform: none;
}

.timeline-step-icon {
  transition:
    background-color 0.68s ease,
    border-color 0.68s ease,
    box-shadow 0.68s ease,
    transform 0.68s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--step-i, 0) * 225ms);
}

.timeline-viz.is-active .timeline-step-icon {
  background: var(--brand-100);
  border-color: var(--brand-700);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-700) 12%, transparent), var(--shadow-soft);
  transform: translateY(-3px);
}