/* Draft v15 — v14 plus client feedback 12. 10.: badges clear of the screenshot, bigger logo, caps tagline, real copy.
   Draft A v4 — the client deck, translated for a phone at the stand.
   Every value below the token block comes from the tokens; add a token before adding a one-off. */

:root {
  /* Brand cyan #01BCEA (overrides the shared base's softer #7fd8f7) */
  --c-cyan: #01bcea;
  --c-cyan-hi: #4fd2f2;
  /* Type scale */
  --fs-h2: clamp(1.875rem, 5.4vw, 3.5rem);
  --fs-card-title: clamp(1.1875rem, 2.4vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 2.3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --lh-display: 1.05;
  --lh-heading: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.5;
  --track-wide: 0.16em;   /* section kickers */
  --track-tight: 0.06em;  /* small uppercase tags */

  /* Lines */
  --line-subtle: rgb(201 197 255 / 0.18);
  --line-strong: rgb(201 197 255 / 0.32);
  --line-cyan: rgb(1 188 234 / 0.4);

  /* Surfaces */
  --surface-glass: rgb(30 30 70 / 0.45);
  --surface-field: rgb(40 38 84 / 0.7);
  --surface-field-active: rgb(48 46 98 / 0.85);
  --surface-veil: rgb(18 18 42 / 0.5);
  --surface-frame: #1d1a42;
  --surface-step: #1a2251;
  --tint-cyan: rgb(1 188 234 / 0.14);
  --blur-glass: blur(18px) saturate(1.2);
  --c-lavender: #a59cf0;
  --c-paper: #fff;
  --c-error: #ffb3c4;

  /* Shape and depth */
  --radius-sm: 0.625rem;
  --radius-md: 1.125rem;
  --radius-device: clamp(1rem, 4vw, 1.75rem); /* the phone mock mimics hardware */
  --shadow-raise: 0 1rem 1.5rem -0.75rem rgb(4 4 20 / 0.7);

  /* Space */
  --gap-s: 0.5rem;
  --gap-m: 0.75rem;
  --gap-l: 1.25rem;
  --gap-cards: clamp(0.75rem, 1.6vw, 1.25rem);
  --pad-card: clamp(1.25rem, 3vw, 1.5rem);
  --pad-block: clamp(1.25rem, 4vw, 2.5rem);
  --space-head: clamp(2rem, 5vw, 3.25rem);  /* section header → section content */
  --section-y: clamp(3.5rem, 8vw, 6rem);

  /* Controls */
  --control-h: 3.25rem;
  --control-h-sm: 3rem;
  --icon-stroke: 1.75;
}

body { font-family: "Figtree", system-ui, sans-serif; font-size: var(--fs-body); line-height: var(--lh-body); }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
dd, .step__no { font-variant-numeric: lining-nums tabular-nums; }

/* Shared type ------------------------------------------------------------ */
.h2 { font-size: var(--fs-h2); font-weight: 400; line-height: var(--lh-heading); letter-spacing: -0.015em; text-wrap: balance; }
.h2 strong { font-weight: 700; }
/* The deck's voice: the key phrase in bold capitals, the rest light */
.h2--split strong { font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; }
.hero__claim strong { display: block; font-weight: 700; color: var(--c-text); text-transform: uppercase; letter-spacing: 0.01em; }
.lead { margin-top: var(--gap-l); max-width: 62ch; font-size: var(--fs-lead); color: var(--c-text-2); }
.kicker { margin-bottom: 1rem; font-size: clamp(var(--fs-xs), 1.6vw, var(--fs-small)); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--c-cyan); }
.kicker--line { font-size: clamp(var(--fs-body), 2.4vw, 1.375rem); font-weight: 600; letter-spacing: 0; text-transform: none; text-wrap: balance; color: var(--c-cyan); }

/* Shared surfaces and parts ----------------------------------------------- */
.glass { background: var(--surface-glass); border: 1px solid var(--line-subtle); border-radius: var(--radius-md); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }

.icon { flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }


/* Small uppercase label: app status, file type */
.tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); background: var(--tint-cyan); border: 1px solid var(--line-cyan); color: var(--c-cyan-hi); font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; letter-spacing: var(--track-tight); text-transform: uppercase; }
.tag .icon { width: 0.95rem; height: 0.95rem; }

/* Buttons: two sizes, one weight */
.btn { min-height: var(--control-h); font-size: var(--fs-body); font-weight: 700; }
.btn--ghost { background: var(--surface-veil); border-color: var(--line-strong); }
.btn--sm { min-height: var(--control-h-sm); padding: 0.65rem 1.4rem; font-size: 1rem; }

/* Content not yet supplied by the client: one look everywhere */
.todo { color: var(--c-text-3); font-style: italic; }
.todo--block { padding: var(--gap-m) var(--pad-card); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); text-align: center; font-size: var(--fs-small); }

/* Orb art: decorative, sits behind its section --------------------------- */
.orbs { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.orbs img { width: 100%; height: 100%; object-fit: cover; }
.orbs--request::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-ground) 0%, rgb(18 18 42 / 0.2) 22%, rgb(18 18 42 / 0.2) 78%, var(--c-ground) 100%); }

/* Header ----------------------------------------------------------------- */
/* Fixed header: transparent over the hero, a glass bar once the page moves */
html { scroll-padding-top: calc(var(--head-h) + 1rem); }
:root { --head-h: clamp(4rem, 9vw, 5.5rem); }
.site-head { position: fixed; z-index: 50; inset: 0 0 auto; border-bottom: 1px solid transparent; transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), -webkit-backdrop-filter 0.35s var(--ease-out), backdrop-filter 0.35s var(--ease-out); }
.site-head.is-scrolled, html:not(.js) .site-head { background: rgb(18 18 42 / 0.78); border-bottom-color: var(--line-subtle); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-l); min-height: var(--head-h); max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.site-head__logo { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-head__logo img { width: clamp(9rem, 34vw, 13.5rem); }
.site-head__cta { min-height: 2.75rem; padding: 0.55rem 1.25rem; font-size: var(--fs-small); }

/* 1 · Hero --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; padding: calc(var(--head-h) + clamp(1.5rem, 5vw, 3rem)) 0 clamp(3rem, 8vw, 5rem); }
.orbs--hero img { object-position: 78% 0%; }
.orbs--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(18 18 42 / 0.15) 0%, rgb(18 18 42 / 0.55) 55%, var(--c-ground) 100%); }

.hero__grid { display: grid; gap: clamp(2rem, 6vw, 3rem); }
.event { display: grid; gap: 0.25rem; font-size: clamp(var(--fs-small), 2vw, 1.125rem); line-height: var(--lh-snug); }
.event__name { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.event__name::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-cyan); }
.event__meta { padding-left: 1.15rem; color: var(--c-text-2); white-space: nowrap; }
@media (min-width: 48em) {
  .event { display: flex; align-items: center; gap: 0.75rem; }
  .event__meta { padding-left: 0; }
  .event__meta::before { content: "·"; margin-right: 0.75rem; color: var(--c-text-3); }
}
.hero__title { margin-top: clamp(1.5rem, 4.5vw, 2.25rem); font-size: clamp(2.75rem, 12vw, 5.25rem); font-weight: 400; line-height: var(--lh-display); letter-spacing: -0.02em; }
.hero__claim { margin-top: clamp(0.75rem, 2vw, 1.25rem); max-width: 26ch; font-size: clamp(1.1875rem, 4.6vw, 1.5rem); font-weight: 400; line-height: 1.35; color: var(--c-text-2); text-wrap: balance; }
/* The deck's DocDoc.C DMS lettering as an image; the h1 keeps the real text for search and screen readers */
.hero__wordmark { display: block; width: min(100%, 28rem); height: auto; margin-bottom: clamp(0.5rem, 2vw, 0.75rem); }
.actions { display: grid; gap: var(--gap-m); margin-top: clamp(1.75rem, 5vw, 3rem); }

/* Device frames, as in the deck */
.window { overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-frame); box-shadow: var(--shadow-raise); }
.window__bar { display: flex; gap: 0.4rem; padding: 0.6rem 0.75rem; }
.window__bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c-pink); }
.window__bar i:nth-child(2) { background: var(--c-lavender); }
.window__bar i:nth-child(3) { background: var(--c-cyan); }
.window img, .phone img { width: 100%; background: var(--c-paper); }

.phone { overflow: hidden; padding: clamp(0.3rem, 1.2vw, 0.55rem); border-radius: var(--radius-device); background: var(--surface-frame); border: 1px solid var(--line-strong); box-shadow: var(--shadow-raise); }
.phone img { border-radius: calc(var(--radius-device) - 0.4rem); aspect-ratio: 311 / 600; object-fit: cover; object-position: top; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards); }
.stat { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: var(--pad-card); text-align: center; }
.stat dd { order: -1; font-size: clamp(1.375rem, 5.4vw, 2.25rem); font-weight: 700; line-height: var(--lh-display); color: var(--c-cyan); white-space: nowrap; }
.stat dt { font-size: clamp(var(--fs-small), 2.4vw, 1.125rem); line-height: var(--lh-snug); color: var(--c-text-2); }

/* DNV badges */
.certs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-m); justify-items: center; }
.certs li { display: grid; justify-items: center; gap: var(--gap-s); text-align: center; }
.certs img { width: clamp(3.75rem, 17vw, 5.5rem); } /* white outline DNV marks from the KRIK deck */
.certs span { font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-snug); color: var(--c-text-2); }
/* Phones and tablets: the badges sit above the screenshot, across the full width */
@media (max-width: 63.99em) {
  .hero__copy { order: 0; }
  .certs { order: 1; margin-bottom: calc(-1 * clamp(2rem, 6vw, 3rem) + 1rem); }
  .hero__shot { order: 2; }
  .stats { order: 3; }
  .certs span { display: none; }
}

/* Sections --------------------------------------------------------------- */
.section { position: relative; isolation: isolate; padding-block: var(--section-y); }
.section__body { margin-top: var(--space-head); }

/* Shared card anatomy: steps, capabilities */
.card-title { font-size: var(--fs-card-title); font-weight: 700; line-height: var(--lh-snug); }

/* 2 · Flow: one line through the eight steps, drawn as you scroll (from drafts/v7/tijek.html) */
.flow {
  --line-faint: rgb(201 197 255 / 0.18);
  --node: clamp(2.75rem, 5vw, 3.5rem);
  /* Two columns of stops; --col is the distance between them, so the line passing a stop
     sits in the other column, just clear of the icon */
  --col: calc(var(--node) / 2 + 1.125rem);
  /* Names sit just past whatever is closest on their row: the icon on right-column rows,
     the line on left-column rows */
  --gutter-text: calc(var(--col) + var(--node) + 0.875rem);
  --gutter-line: calc(var(--col) + var(--node) / 2 + 1.125rem);
  --pitch: clamp(6.5rem, 11vw, 9rem);
}
.flow__title { max-width: 20ch; font-size: var(--fs-h2); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.flow__title strong { font-weight: 700; color: var(--c-cyan); }
.flow__lead { margin-top: 1.25rem; max-width: 56ch; font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--c-text-2); }

/* The route ------------------------------------------------------------ */
.route { position: relative; margin-top: clamp(3rem, 8vw, 5.5rem); }
.route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route__track { fill: none; stroke: var(--line-faint); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.route__ink { fill: none; stroke: var(--c-cyan); stroke-width: 2.5; stroke-linecap: round; }

.steps { position: relative; display: grid; }
/* Even rhythm: every stop sits on the same pitch, so the spacing is identical top to bottom */
.steps { grid-template-rows: repeat(7, var(--pitch)) auto; }
.step { position: relative; min-height: 4.5rem; padding-left: var(--gutter-text); }
/* Phones: a gentle wiggle, nodes alternate between two lanes */
/* Odd stops sit in the right column, even ones in the left */
.step:nth-child(odd) .step__node { left: var(--col); }
.step:nth-child(even) { padding-left: var(--gutter-line); }
/* Number and name sit a touch above the icon's top edge */
.step__no, .step__name { position: relative; top: -0.5rem; }
.step__node { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%; border: 1.5px solid var(--c-line-strong); background: var(--c-ground); color: var(--c-text-3); }
.step__node svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.step__no { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; color: var(--c-cyan); }
.step__name { margin-top: 0.15rem; font-size: clamp(1.5rem, 4.6vw, 2.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }

/* Desktop: the intro stays put on the left while the route scrolls past on the right,
   so the width is used and the steps keep their breathing room */
@media (min-width: 64em) {
  .flow { --pitch: clamp(7.5rem, 9vw, 9rem); }
  .flow__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .flow__intro { position: sticky; top: clamp(5rem, 22vh, 12rem); }
  .route { margin-top: 0.5rem; }
  .step__name { font-size: clamp(2rem, 2.8vw, 2.75rem); }
}

/* Motion: hidden from first paint (html.js is set in <head>), so nothing flashes before script runs. Steps stay hidden until the line reaches
   them, then come into focus the same way every other block on the page does.
   Without script every step simply shows, lit. */
.js .route .step__node { transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out), background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), color 0.5s var(--ease-out); opacity: 0; transform: scale(0.6); }
.js .route .step__no,
.js .route .step__name { transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.8s var(--ease-out); opacity: 0; transform: translateY(1rem); filter: blur(6px); }
.js .route .step__no { transition-delay: 0.05s; }
.js .route .step__name { transition-delay: 0.1s; }
.step.is-lit .step__node,
html:not(.js) .step__node { opacity: 1; transform: none; border-color: var(--c-cyan); background: var(--c-cyan); color: var(--c-on-cyan); }
.js .route .step.is-lit .step__no,
.js .route .step.is-lit .step__name { opacity: 1; transform: none; filter: none; }
@media (max-width: 47.99em) {
  .js .route .step__no, .js .route .step__name { transform: translateY(0.75rem); filter: blur(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .route .step__node, .js .route .step__no, .js .route .step__name { transition: opacity 0.25s linear; transform: none; filter: none; }
}
  

/* 3 · Za financije i računovodstvo (v3 deck): six described features (three with placeholder text) */
.fin { display: grid; gap: var(--space-head); }
.fin__title { max-width: 14ch; }
.fin__list { display: grid; border-top: 1px solid var(--line-strong); counter-reset: fin; }
.fin__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 1.75rem); row-gap: 0.5rem; padding-block: clamp(1.5rem, 4vw, 2.25rem); border-bottom: 1px solid var(--line-strong); }
.fin__icon { grid-row: span 2; display: grid; place-items: center; width: clamp(3rem, 7vw, 3.75rem); height: clamp(3rem, 7vw, 3.75rem); border-radius: 50%; background: var(--tint-cyan); border: 1px solid var(--line-cyan); color: var(--c-cyan); }
.fin__icon .icon { width: 48%; height: 48%; }
.fin__name { font-size: clamp(1.3125rem, 2.6vw, 1.75rem); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.01em; }
.fin__text { max-width: 58ch; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.55; color: var(--c-text-2); }


/* 4 · Integracije */
.integrations__grid { position: relative; display: grid; gap: var(--space-head); }
.devices { position: relative; padding-bottom: clamp(3rem, 14vw, 5rem); padding-right: clamp(2rem, 12vw, 7rem); }
.devices__phone { position: absolute; right: 0; bottom: 0; width: clamp(6.5rem, 22vw, 14rem); }
/* Systems: pills; on wider screens they float over the screenshots */
/* Systems: pills. On desktop they sit in a row above the app window, each wired into it */
.systems { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-m); }
.systems li { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.35rem 1.1rem 0.35rem 0.85rem; border-radius: var(--radius-pill); background: var(--surface-glass); border-color: var(--line-strong); }
.systems .card-title { font-size: var(--fs-small); white-space: nowrap; }
/* Same icon voice as the e-račun cards: bare cyan stroke */
.systems__icon { width: 1.4rem; height: 1.4rem; color: var(--c-cyan); }

/* Phones and tablets: the same wiring idea as desktop, turned vertical. A line drops from the
   app window and each system hangs off it on a short branch, so the pills read as connected
   to DocDoc.C instead of loose chips under the picture. */
@media (max-width: 63.99em) {
  /* The pills start right under the app window, beside the phone that hangs below it */
  .integrations__grid { --rail: 1.25rem; --branch: 1.5rem; --drop: 2rem; gap: 0; }
  .devices { padding-bottom: 0; }
  .devices__phone { bottom: calc(-1 * clamp(3rem, 14vw, 5rem)); }
  .systems { position: relative; z-index: 1; margin-top: var(--drop); display: grid; justify-content: start; justify-items: start; gap: 0.75rem; padding-left: calc(var(--rail) + var(--branch)); }
  .systems::before { content: ""; position: absolute; left: var(--rail); width: 1px; top: calc(-1 * var(--drop)); bottom: 1.375rem; background: linear-gradient(180deg, var(--line-strong), var(--c-cyan)); }
  .systems::after { content: ""; position: absolute; left: calc(var(--rail) - 3.5px); top: calc(-1 * var(--drop) - 3.5px); width: 8px; height: 8px; border-radius: 50%; background: var(--c-cyan); }
  .systems li { position: relative; min-height: 2.75rem; padding: 0.4rem 1.2rem 0.4rem 0.9rem; }
  .systems .card-title { font-size: var(--fs-body); }
  .systems li::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--branch); height: 1px; background: var(--c-cyan); }
  .systems li { height: 2.75rem; }
  /* Signal: a dot leaves each system, runs along its branch, then up the line into the app */
  .systems li::after { content: ""; position: absolute; left: -3px; top: calc(50% - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--c-cyan-hi); box-shadow: 0 0 0 3px rgb(1 188 234 / 0.18); opacity: 0;
    --up: calc(var(--drop) + var(--i) * 3.5rem + 1.375rem); }
  .systems li:nth-child(1) { --i: 0; }
  .systems li:nth-child(2) { --i: 1; }
  .systems li:nth-child(3) { --i: 2; }
  .systems li:nth-child(4) { --i: 3; }
  .systems li:nth-child(5) { --i: 4; }
}
@media (max-width: 63.99em) and (prefers-reduced-motion: no-preference) {
  /* Each trip takes 3 s and a new one starts every 1.5 s, so two dots are travelling and the
     next leaves the moment one arrives (7.5 s cycle, five pills) */
  .systems li::after { animation: signal-up 7.5s linear infinite; }
  .systems li:nth-child(3)::after { animation-delay: 1.5s; }
  .systems li:nth-child(2)::after { animation-delay: 3s; }
  .systems li:nth-child(4)::after { animation-delay: 4.5s; }
  .systems li:nth-child(5)::after { animation-delay: 6s; }
}
@keyframes signal-up {
  0% { transform: translate(0, 0); opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  2% { opacity: 1; }
  9% { transform: translate(calc(-1 * var(--branch)), 0); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  37% { opacity: 1; }
  40% { transform: translate(calc(-1 * var(--branch)), calc(-1 * var(--up))); opacity: 0; }
  100% { transform: translate(calc(-1 * var(--branch)), calc(-1 * var(--up))); opacity: 0; }
}

@media (min-width: 64em) {
  .integrations__grid { --wire: clamp(3rem, 5vw, 4.5rem); gap: 0; }
  .systems { order: -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; gap: var(--gap-l); padding-right: 7rem; margin-bottom: var(--wire); }
  .systems li { position: relative; min-height: 3.25rem; gap: 0.7rem; padding: 0.45rem 1.35rem 0.45rem 1.05rem; }
  .systems .card-title { font-size: var(--fs-body); }
  .systems__icon { width: 1.6rem; height: 1.6rem; }
  /* The wire: from the pill down into the window's top edge */
  .systems li::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: calc(var(--wire) + 1px); background: linear-gradient(180deg, var(--line-strong), var(--line-cyan)); }
  /* The signal: a small dot that travels down the wire */
  .systems li::before { content: ""; position: absolute; top: 100%; left: 50%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: var(--c-cyan); opacity: 0; }
}
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .systems li::before { animation: signal 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .systems li:nth-child(2)::before { animation-delay: 0.9s; }
  .systems li:nth-child(3)::before { animation-delay: 1.8s; }
  .systems li:nth-child(4)::before { animation-delay: 0.45s; }
  .systems li:nth-child(5)::before { animation-delay: 1.35s; }
}
@keyframes signal {
  0% { transform: translateY(0); opacity: 0; }
  15%, 80% { opacity: 1; }
  100% { transform: translateY(var(--wire)); opacity: 0; }
}

/* 5 · Zahtjev */
.orbs--request img { object-position: 90% 40%;
  /* fade the rings out well before the section edges so neither the block above nor the footer cuts them */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 92%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 92%); }
.request__grid { display: grid; gap: var(--space-head); }
/* Phones: heading to text uses the same small gap as every other heading + lead on the page */
@media (max-width: 63.99em) {
  .request__head { margin-bottom: calc(var(--gap-l) - var(--space-head)); }
  .request__copy .lead { margin-top: 0; }
}
.downloads { display: grid; gap: var(--gap-m); scroll-margin-top: 1.5rem; }
/* Conference offer (v3 deck): each benefit leads with its value */
.offer { margin-top: clamp(1.75rem, 4vw, 2.5rem); padding: var(--pad-card); border-radius: var(--radius-md); border: 1px solid var(--line-cyan); background: linear-gradient(135deg, rgb(1 188 234 / 0.12), rgb(1 188 234 / 0.03) 60%), var(--surface-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.offer__title { font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-snug); }
.offer__list { display: grid; gap: 0.75rem; margin-top: 1rem; }
.offer__list li { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; column-gap: 1rem; line-height: var(--lh-snug); color: var(--c-text-2); }
.offer__value { font-size: clamp(1.25rem, 3.2vw, 1.625rem); font-weight: 700; line-height: 1.1; color: var(--c-cyan); white-space: nowrap; }
.offer__note { margin-top: 1rem; font-size: var(--fs-small); font-style: italic; color: var(--c-text-3); }
.downloads__title { font-size: var(--fs-body); font-weight: 700; color: var(--c-text-2); }
.btn--file { justify-content: flex-start; text-align: left; }
.btn--file > .icon { width: 1.1em; height: 1.1em; color: var(--c-cyan); }
.btn--file .tag { margin-left: 0.3rem; padding: 0.05rem 0.45rem; vertical-align: 0.1em; }

/* Form */
.form { display: grid; gap: var(--gap-l); padding: var(--pad-block); }
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field > label { font-size: 1rem; font-weight: 700; }
.field__opt { font-weight: 400; color: var(--c-text-3); }
.form input:not([type="checkbox"]), .form select { width: 100%; min-height: var(--control-h); padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-field); color: var(--c-text); font-size: var(--fs-body); transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out); }
.form input:hover, .form select:hover { border-color: var(--c-text-3); }
.form input:focus-visible, .form select:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 1px; border-color: transparent; background: var(--surface-field-active); }
.form [aria-invalid="true"] { border-color: var(--c-error) !important; }
.field__error { font-size: var(--fs-small); font-weight: 600; line-height: var(--lh-snug); color: var(--c-error); }
.field__error:empty { display: none; }

.select { position: relative; }
.select::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--c-text-2); border-bottom: 2px solid var(--c-text-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select select { appearance: none; padding-right: 2.75rem; }
.select option { background: var(--c-surface); color: var(--c-text); }

.consent { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--gap-m); align-items: start; }
.consent input { width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; accent-color: var(--c-cyan); cursor: pointer; }
.consent label { font-size: var(--fs-small); font-weight: 400; line-height: 1.45; color: var(--c-text-2); cursor: pointer; }
.consent label a { color: inherit; }
.consent .field__error { grid-column: 2; }

.btn--block { width: 100%; margin-top: var(--gap-s); }
.form__status { font-weight: 600; color: var(--c-cyan-hi); }
.form__status.is-error { color: var(--c-error); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form[aria-busy="true"] .btn--block { opacity: 0.7; pointer-events: none; }
.form__status:empty { display: none; }

/* Footer */
.site-foot { padding: 0 0 clamp(2rem, 5vw, 3rem); }
.site-foot__row { display: grid; gap: var(--gap-l); padding-top: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--line-strong); }
.site-foot img { width: 9.5rem; }
.site-foot address { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--gap-m); font-style: normal; color: var(--c-text-2); }
.site-foot address span[aria-hidden] { color: var(--c-text-3); }
.site-foot a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-text); text-decoration: underline; text-decoration-color: var(--line-cyan); }
.site-foot a:hover { color: var(--c-cyan-hi); text-decoration-color: currentColor; }

/* ≥ 36em ------------------------------------------------------------------ */
@media (min-width: 36em) {
  .actions { grid-auto-flow: column; justify-content: start; }
  .actions .btn { min-width: 15rem; }
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-l); }
  .field--wide, .form .btn--block, .form__status { grid-column: 1 / -1; }
  .downloads { grid-template-columns: repeat(2, minmax(0, max-content)); }
  .downloads__title { grid-column: 1 / -1; }
}

/* ≥ 64em: deck composition ---------------------------------------------- */
@media (min-width: 64em) {
  .fin { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "list head"; column-gap: clamp(3rem, 6vw, 7rem); row-gap: clamp(2rem, 3vw, 2.5rem); align-items: start; }
  .fin__head { grid-area: head; position: sticky; top: clamp(6rem, 18vh, 10rem); }
  .fin__list { grid-area: list; border-top: 0; }
  .fin__item:first-child { padding-top: 0.25rem; }
  .hero { padding-top: calc(var(--head-h) + clamp(4rem, 7vw, 6.5rem)); }
  /* The badges sit in their own row right above the screenshot and always dip 15px into it */
  .hero__grid { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy certs" "copy shot" "stats stats"; column-gap: clamp(2.5rem, 4vw, 4rem); row-gap: 0; align-items: end; }
  .hero__copy { grid-area: copy; align-self: center; }
  .hero__shot { grid-area: shot; align-self: start; }
  .hero__title { font-size: clamp(3.75rem, 5.4vw, 5.25rem); white-space: nowrap; }
  .hero__wordmark { width: clamp(26rem, 38vw, 36rem); }
  .hero__claim { max-width: 30ch; font-size: clamp(1.375rem, 1.8vw, 1.75rem); }
  .stats { grid-area: stats; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3.5rem, 6vw, 5.5rem); }
  .stat dd { font-size: clamp(1.5rem, 2.4vw, 2.25rem); }
  .certs { grid-area: certs; position: relative; z-index: 2; justify-self: end; display: flex; gap: 1rem; margin-bottom: clamp(1rem, 1.5vw, 1.5rem); }
  .certs img { width: clamp(4.5rem, 6.5vw, 6.25rem); }
  .certs span { display: none; }






  /* Heading spans the full width; below it, text and offer on the left, the form on the right */
  .request__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head head" "copy form" "files form"; grid-template-rows: auto auto 1fr; column-gap: clamp(3rem, 6vw, 6rem); row-gap: 2rem; align-items: start; }
  .request__head { grid-area: head; margin-bottom: clamp(0.5rem, 2vw, 1.5rem); }
  .request__head .h2 { max-width: none; }
  .request__head .h2 strong { display: inline; }
  .request__copy { grid-area: copy; }
  .request__copy .lead { margin-top: 0; }
  .request .form { grid-area: form; }
  .downloads { grid-area: files; grid-template-columns: 1fr; justify-items: start; }

  .site-foot__row { grid-template-columns: auto 1fr; align-items: center; }
  .site-foot address { justify-content: flex-end; }
}

/* Reveal: every marked block comes into focus as it enters the screen, on load or on scroll.
   html.js is set in <head> before first paint; script.js adds .is-in and the delay.
   Without script (or if it fails) html.js is removed and everything simply shows. */
[data-reveal] { transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.8s var(--ease-out); transition-delay: var(--reveal-delay, 0s); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(1.25rem); filter: blur(6px); }
.js [data-reveal="soft"]:not(.is-in) { filter: none; transform: translateY(1.5rem); }
@media (max-width: 47.99em) {
  .js [data-reveal]:not(.is-in) { transform: translateY(0.875rem); filter: blur(4px); }
  .js [data-reveal="soft"]:not(.is-in) { filter: none; }
}
/* Reduced motion: no movement or blur, only a short fade */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: opacity 0.25s linear !important; transition-delay: 0s !important; }
  .js [data-reveal]:not(.is-in) { transform: none; filter: none; }
}