/* =====================================================================
   Scenske Tehnologije (Scen-Teh) · V2 — Eldra-aligned rebuild
   Parent brand: eldra.hr  →  blue #1964b0 · near-black #070c11
   Type: K2D (display) + Open Sans (body).  Ethos: maximum simplicity.
   Light base with dark "stage" sections. One accent colour. Calm motion.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* type — two families only */
  --font-display: "K2D", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* 2.35rem on a 390px phone, ~4.55rem at 1280px, capped at 4.6rem */
  --fs-display: clamp(2.35rem, 1.2rem + 4.2vw, 4.6rem);
  --fs-h2: clamp(1.8rem, 3.3vw, 2.7rem);
  --fs-h3: clamp(1.12rem, 1.5vw, 1.32rem);
  --fs-lead: clamp(1.08rem, 1.4vw, 1.28rem);
  --fs-body: clamp(1.02rem, 1.05vw, 1.1rem);
  --fs-label: 0.78rem;

  /* brand — Eldra blue family */
  --blue: #1964b0;
  --blue-2: #14538f;        /* button hover */
  --blue-deep: #0f4c86;     /* accent text / links on light (AA on white) */
  --blue-light: #5aa6e6;    /* accent on dark "stage" backgrounds */
  --blue-glow: rgba(25, 100, 176, .35);

  /* contextual tokens — LIGHT base (default) */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --fg: #0c131c;
  --fg-muted: #586472;
  --border: #e4e9f0;
  --eyebrow: var(--blue-deep);
  --shadow: 0 1px 2px rgba(12,19,28,.04), 0 16px 40px -28px rgba(12,19,28,.20);

  /* spacing rhythm (8px base) */
  --space-section: clamp(4.25rem, 8vw, 7rem);
  --container: 1280px;
  --radius: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22,.7,.2,1);

  --z-header: 100;
  --z-mobilebar: 90;
}

/* contextual tokens — DARK "stage" (Eldra near-black). Hero shares them. */
.section--stage, .hero {
  --bg: #070c11;
  --surface: #0c1218;
  --surface-2: #111a24;
  --fg: #eef3f8;
  --fg-muted: #9aabbd;
  --border: rgba(140,165,195,.16);
  --eyebrow: var(--blue-light);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 28px 60px -34px rgba(0,0,0,.7);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable;
  /* Page canvas = the dark stage colour so iOS Safari's elastic overscroll + its translucent
     "glass" URL/tool bars show/reflect SOLID DARK at the top and bottom edges instead of the
     white page bleeding through ("web leakage" while scrolling). The dark header (top) and the
     dark mobile bar / footer (bottom) sit on this, so the edges read as one continuous surface.
     The white content still shows normally because <body> paints its own light background. */
  background: #070c11;
  overscroll-behavior: none;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--fg);
  letter-spacing: -.003em;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas, picture { display: block; max-width: 100%; }
a, button { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.section--stage :focus-visible { outline-color: var(--blue-light); }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-section); background: var(--bg); color: var(--fg); }
.section--stage { padding-block: var(--space-section); background: var(--bg); color: var(--fg); position: relative; }

.measure { max-width: 56ch; }
.measure-wide { max-width: 68ch; }

/* ---------- Bilingual visibility ---------- */
[data-lang="hr"] .i18n[lang="en"] { display: none; }
[data-lang="en"] .i18n[lang="hr"] { display: none; }

/* ---------- Screen-reader-only ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed; left: 1rem; top: -120px; z-index: 1100;
  background: var(--blue); color: #fff; padding: .7rem 1.1rem;
  border-radius: 8px; font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: var(--fs-label);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--eyebrow); margin-bottom: 1.1rem; font-weight: 600;
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.eyebrow--dark { color: var(--blue-deep); }

.section__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.025em;
  text-wrap: balance; max-width: 20ch;
}
.section__title--light { color: var(--fg); max-width: 18ch; }
.section__sub { color: var(--fg-muted); font-size: var(--fs-lead); margin-top: 1.5rem; }
.lead { font-size: var(--fs-lead); color: var(--fg); line-height: 1.65; }
/* breathing room between a section title and the text that follows it */
.section__title + .lead, .section__title + .muted, .section__title + .section__sub { margin-top: 1.5rem; }
.muted { color: var(--fg-muted); }

.grad { color: var(--blue); }
.section--stage .grad { color: var(--blue-light); }

/* ---------- Buttons (simple: solid + outline) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 10px;
  font-weight: 600; font-size: 1rem; letter-spacing: .005em;
  min-height: 48px;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn svg { transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--full { width: 100%; }

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-2); }
.btn--primary:hover svg { transform: translateY(2px); }

/* glow kept as alias of primary for simplicity */
.btn--glow { background: var(--blue); color: #fff; }
.btn--glow:hover { background: var(--blue-2); }
.btn--glow:hover svg { transform: translateX(3px); }

.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue-deep); }
.section--stage .btn--ghost, .hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.section--stage .btn--ghost:hover, .hero .btn--ghost:hover { border-color: var(--blue-light); color: var(--blue-light); }
.btn--ghost:hover svg { transform: translateY(2px); }

/* ---------- Reveal (guarded by .js so content shows if JS fails) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.in) { animation: revealSafety 0s linear 4s forwards; }
}
@keyframes revealSafety { to { opacity: 1; transform: none; } }

/* First-view load animations — hero text staggers up, hero image fades in */
.js .hero__media { animation: fadeIn 1.2s var(--ease) both; }
.js .hero .eyebrow,
.js .hero__title,
.js .hero__lead,
.js .hero__cta,
.js .hero__trust { opacity: 0; transform: translateY(18px); animation: heroIn .8s var(--ease) forwards; }
.js .hero .eyebrow { animation-delay: .15s; }
.js .hero__title  { animation-delay: .28s; }
.js .hero__lead   { animation-delay: .42s; }
.js .hero__cta    { animation-delay: .54s; }
.js .hero__trust  { animation-delay: .64s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  /* At the top of the page the header sits over the white <body>, so a
     lighter tint read as grey; this keeps it the brand's near-black. */
  background: rgba(7,12,17,.92);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-bottom: 1px solid rgba(140,165,195,.12);
  color: #eef3f8;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled { background: rgba(7,12,17,.94); border-bottom-color: rgba(140,165,195,.20); }

/* Reading progress — one fader line riding the header's bottom edge.
   Scroll-driven, so there is no animation to suppress for reduced motion. */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  box-shadow: 0 0 12px rgba(90,166,230,.5);
  pointer-events: none;
}
/* The #top target sits at the very top of the document, outside the sticky
   header, so "back to top" always has somewhere real to scroll to. */
.top-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
html { scroll-padding-top: var(--header-h, 100px); }

/* Language row — the upper right of the header at every width. Full labels,
   one control, so there is exactly one tab stop per language. */
.header__util { border-bottom: 1px solid rgba(140,165,195,.10); }
.header__util-inner { display: flex; justify-content: flex-end; align-items: center; min-height: 34px; }
.header__inner { display: flex; align-items: center; gap: 1.2rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; flex: none; padding-block: .8rem; }
.brand__logo { height: clamp(15px, 4.8vw, 22px); width: auto; display: block; }
.brand__logo--footer { height: 30px; }
.nav { display: flex; gap: 1.6rem; margin-left: auto; }
.nav a { position: relative; white-space: nowrap; font-size: .95rem; font-weight: 500; color: #cdd9e6; padding: .4rem 0; transition: color .2s var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--blue-light); transition: width .25s var(--ease); }
.nav a:hover, .nav a:focus-visible { color: #fff; }
.nav a:hover::after, .nav a:focus-visible::after { width: 100%; }
/* Section the visitor is currently reading (set by script.js) */
.nav a[aria-current] { color: #fff; }
.nav a[aria-current]::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: .9rem; margin-left: 1rem; }
.lang-switch { display: inline-flex; align-items: center; gap: .15rem; font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .12em; }
.lang-btn {
  color: #93a5ba; padding: .3rem .45rem; min-height: 32px; border-radius: 4px;
  text-decoration: underline 2px transparent; text-underline-offset: 6px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
/* colour AND an underline mark the current language, not colour alone */
.lang-btn.is-active { color: var(--blue-light); text-decoration-color: currentColor; }
/* 32px to look at, 44px to hit: the tap area extends above and below */
.lang-btn { position: relative; }
.lang-btn::after { content: ""; position: absolute; inset: -6px 0; }
.lang-btn:hover { color: #fff; }
.lang-sep { color: #56677d; }
.header__cta { padding: .6rem 1.2rem; min-height: 42px; font-size: .95rem; border-radius: 9px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { width: 24px; height: 2px; background: #eef3f8; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================================================================
   HERO — the approved blue artwork: one wash fixture upper right, its
   beam running down-left through the haze. The copy sits in the dark
   left field. The first screen is filled (svh, so a phone's collapsing
   URL bar cannot expose the next section), but capped on tall monitors
   so the section never inflates into empty space.
   =================================================================== */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: clamp(560px, calc(100svh - var(--header-h, 100px)), 920px);
  padding-block: clamp(3.5rem, 8vh, 6rem) clamp(4.5rem, 10vh, 6.5rem);
  background: #02050c;   /* the artwork's own ground, so no seam at any crop */
  color: #eef3f8; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; display: block; }
/* Anchored right and a little below the top: whatever the viewport ratio,
   the crop gives up empty haze on the left and never the optical head. */
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 24%;
  display: block;
}
/* Readability only where the copy sits: a left-hand fade that stops well
   short of the lenses, and a low fade into the section below. The beam and
   the fixture stay untouched. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,5,12,.78) 0%, rgba(2,5,12,.58) 32%, rgba(2,5,12,.16) 52%, rgba(2,5,12,0) 64%),
    linear-gradient(180deg, rgba(2,5,12,0) 62%, rgba(2,5,12,.6) 100%);
}
.hero__inner { position: relative; z-index: 2; }
/* The text column: wide enough for the two-line headline, and kept clear of
   the fixture, which starts at roughly 70% of the artwork's width. */
.hero__inner > * { max-width: min(46rem, 60vw); }
.hero__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.03em;
  margin: .1rem 0 1.5rem; text-wrap: balance;
}
/* Keep the accent phrase whole, so it never breaks across lines. */
.hero__title .grad { white-space: nowrap; }
/* The brand blue is only ~3.2:1 on the hero's near-black; the lighter
   contextual blue keeps the accent comfortably legible (~7.5:1). */
.hero__title .grad { font-weight: 600; color: var(--blue-light); }
/* small uppercase text over the lit haze needs a touch more light: ≥4.5:1
   against the brightest haze pixels behind it at every tested width */
.hero .eyebrow { color: #93c5f0; text-wrap: balance; }
.hero__lead { font-size: var(--fs-lead); color: #c9d6e4; line-height: 1.62; max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero__cta .btn { min-height: 52px; padding-inline: 1.6rem; }
/* The facts row belongs to the text block: its rule spans the copy, not the page. */
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; margin-top: clamp(2.4rem, 5vh, 3.2rem);
  padding-top: 1.4rem; border-top: 1px solid rgba(140,165,195,.2);
  width: fit-content; min-width: min(100%, 26rem);
}
.hero__trust li { font-size: .9rem; color: #9aabbf; display: flex; flex-direction: column; gap: .25rem; }
.hero__trust strong { font-family: var(--font-display); font-size: 1.6rem; color: #fff; font-weight: 600; line-height: 1; }

/* Lower right, on the container edge, away from the actions. */
.scroll-cue {
  position: absolute; z-index: 2; bottom: 1.8rem;
  right: max(1.25rem, calc((100% - var(--container)) / 2));
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #8295aa;
}
.scroll-cue:hover { color: #cdd9e6; }
@media (max-height: 700px) { .scroll-cue { display: none; } }
.scroll-cue__line { width: 1px; height: 38px; background: linear-gradient(var(--blue-light), transparent); position: relative; overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; top: -40%; left: 0; width: 100%; height: 40%; background: var(--blue-light); animation: scrollPulse 1.8s var(--ease) infinite; }
@keyframes scrollPulse { 0%{top:-40%} 100%{top:120%} }

/* ===================================================================
   ABOUT — editorial: lede + one real photograph, then three short passages,
   then the facts row and the way into the contact section.
   =================================================================== */
/* Story left, the client's equipment montage right. The montage (dark
   version, 4:3) is shown whole at its own proportions — hoist, fixtures,
   desk and rack run close to the edges, so no crop. The picture takes the
   larger column (~620px at 1280px) and the story keeps a ~55-character
   measure, so the pair reads as equals. */
.about__lede { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); gap: clamp(2.5rem, 4.4vw, 4rem); align-items: center; }
.about__lede-copy .lead { margin-top: 1.4rem; }
.about__figure { margin: 0; }
.about__figure picture { display: block; }
.about__figure img {
  width: 100%; height: auto; display: block; aspect-ratio: 1448 / 1086; object-fit: contain;
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(12,19,28,.05), 0 22px 48px -30px rgba(12,19,28,.32);
  background: var(--surface-2);
}
.about__kicker { margin: 0; }
.about__lede-copy .lead + .lead { margin-top: 1.1rem; }

.about__notes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3.4vw, 3rem);
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2.2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
}
.about__note-title {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500;
  letter-spacing: -.012em; line-height: 1.2; margin-bottom: .7rem;
}
/* a short accent rule instead of a card, so the passages stay editorial */
.about__note-title::before {
  content: ""; display: block; width: 30px; height: 2px; margin-bottom: .9rem;
  background: var(--blue);
}
.about__note p { color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.7; }
/* Five categories: three over two on a six-track grid, the second row
   centred under the first so the set reads as deliberate, not a gap. */
.about__notes--five { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(2rem, 3.6vw, 3rem) clamp(1.6rem, 3vw, 2.8rem); }
.about__notes--five .about__note { grid-column: span 2; }
.about__notes--five .about__note:nth-child(4) { grid-column: 2 / span 2; }
.about__foot--cta { justify-content: flex-start; }

.about__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.6rem 2.5rem; margin-top: clamp(2.4rem, 5vw, 3.4rem);
}
.about__foot .stat-row { margin-top: 0; border-top: 0; padding-top: 0; }
.stat-row { display: flex; flex-wrap: wrap; gap: 1.4rem 2.8rem; margin-top: 2.4rem; border-top: 1px solid var(--border); padding-top: 1.8rem; }
.stat dt { font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: .45rem; }
.stat dd { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 500; line-height: 1; color: var(--blue-deep); white-space: nowrap; }

/* ===================================================================
   SIGNATURE — THE PARTNER NETWORK (graph with logos)
   =================================================================== */
.network { position: relative; overflow: hidden; }
.network__head { position: relative; z-index: 2; max-width: 60ch; }

.network__stage {
  position: relative; height: clamp(360px, 44vw, 520px); margin: 2.5rem 0 .5rem; z-index: 1;
  /* script.js overrides this per layout so the plates always clear each other */
  --pnode-w: clamp(98px, 11vw, 122px);
}
.network__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Hub: the dot itself sits exactly at stage centre (where the lines meet);
   the label is absolutely positioned below it so it can't shift the dot. */
.network__hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 3; pointer-events: none; display: grid; place-items: center;
  width: var(--hub-w, 300px); height: auto;
  padding: 15px 22px; border-radius: 16px;
  background: rgba(7,12,17,.74);
  border: 1px solid rgba(90,166,230,.34);
  box-shadow: 0 0 0 7px rgba(90,166,230,.07), 0 0 52px rgba(90,166,230,.30);
}
.network__hub-logo { width: 100%; height: auto; display: block; }

/* Graph nodes (built by JS from the partner cards; absolutely positioned) */
.pnode {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; place-items: center; z-index: 2;
  transition: opacity .35s var(--ease), filter .35s var(--ease);
}
.pnode__plate {
  display: grid; place-items: center; overflow: hidden;
  width: var(--pnode-w); height: calc(var(--pnode-w) * .72);
  padding: clamp(6px, calc(var(--pnode-w) * .09), 10px) clamp(8px, calc(var(--pnode-w) * .11), 14px);
  border-radius: 13px;
  background: #fff; border: 1px solid rgba(140,165,195,.22);
  box-shadow: 0 10px 26px -16px rgba(0,0,0,.8);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* caps kept proportional to the plate, comfortably smaller than it, so every
   logo (incl. stacked icon+wordmark ones like Eurotruss/Astera) shows in full */
/* Equal optical weight: each logo gets roughly the same AREA, so a square
   mark grows taller and a long wordmark wider, each inside the plate's caps.
   --r (width / height) is set per image by script.js from its own size. */
.pnode__plate img {
  width: min(calc(var(--pnode-w) * .78), calc(var(--pnode-w) * .54 * var(--r, 3)), calc(var(--pnode-w) * .44 * sqrt(var(--r, 3))));
  height: auto; max-height: calc(var(--pnode-w) * .54); object-fit: contain;
}
/* A 6:1–11:1 wordmark is width-bound, so the side padding is what shrinks it. */
.pnode--wide .pnode__plate { padding-inline: clamp(5px, calc(var(--pnode-w) * .06), 8px); }
.pnode--wide .pnode__plate img { width: calc(var(--pnode-w) * .88); }
.pnode__plate--word { font-family: var(--font-display); font-weight: 600; font-size: max(9px, calc(var(--pnode-w) * .105)); color: #0c131c; letter-spacing: -.01em; text-align: center; line-height: 1.05; }
/* Active logo: plate and logo grow together as one transform (no reflow, the
   anchor's own box and so the pointer target never move), and the node rises
   above its neighbours and the hub. --pnode-zoom is smaller in the phone grid,
   where the gaps are tighter. Touch never needs hover: a tap goes straight to
   the card. */
.pnode { cursor: pointer; --pnode-zoom: 1.42; }
.pnode:hover, .pnode:focus-visible { z-index: 5; }
.pnode:focus-visible { outline: none; }
.pnode:hover .pnode__plate, .pnode:focus-visible .pnode__plate { transform: scale(var(--pnode-zoom)); box-shadow: 0 22px 40px -16px rgba(0,0,0,.9), 0 0 0 2px var(--blue-light); }
.pnode:focus-visible .pnode__plate { box-shadow: 0 22px 40px -16px rgba(0,0,0,.9), 0 0 0 2px var(--blue-light), 0 0 0 5px rgba(255,255,255,.9); }
@media (hover: none) { .pnode:hover .pnode__plate { transform: none; } }
.pnode.dim { opacity: .26; filter: grayscale(1); }

/* Card highlight when its graph node is clicked */
.partner.is-flash > article { border-color: var(--blue-light); transform: translateY(-4px); box-shadow: 0 0 0 3px var(--blue-light), 0 0 44px -2px var(--blue-glow), 0 26px 54px -28px rgba(0,0,0,.85); animation: cardFlash 1.9s var(--ease); }
@keyframes cardFlash { 0%, 18% { box-shadow: 0 0 0 4px var(--blue-light), 0 0 60px 4px rgba(90,166,230,.7); } 100% { box-shadow: 0 0 0 3px var(--blue-light), 0 0 44px -2px var(--blue-glow), 0 26px 54px -28px rgba(0,0,0,.85); } }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.8rem 0 2.4rem; position: relative; z-index: 2; }
.chip {
  font-family: var(--font-body); font-weight: 600; font-size: .82rem; letter-spacing: .01em;
  padding: .6rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--fg-muted);
  background: transparent; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); min-height: 44px;
}
.chip:hover { color: var(--fg); border-color: var(--blue-light); }
.chip.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }
/* Video's second row: sits tight under the primary row, smaller chips,
   labelled so it reads as "inside Video" rather than as more categories. */
.filters--sub { align-items: center; margin: -1.4rem 0 2.4rem; padding-left: .9rem; border-left: 2px solid var(--blue); }
.filters--sub[hidden] { display: none; }
.filters__label { font-family: var(--font-body); font-weight: 600; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); margin-right: .3rem; }
.chip--sub { min-height: 40px; padding: .45rem .9rem; font-size: .78rem; }
.chip--sub.is-active { background: rgba(90,166,230,.16); color: var(--fg); border-color: var(--blue-light); }

/* Partner cards */
.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; position: relative; z-index: 2; }
.partner { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.partner.is-hidden { display: none; }
.partner > article {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.5rem; overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.partner > article:hover { border-color: var(--blue-light); transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.8); }
/* a single lit edge on hover — the card's own little light cue */
.partner > article::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--blue-light), rgba(90,166,230,0));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease); pointer-events: none;
}
.partner > article:hover::before,
.partner > article:focus-within::before { transform: scaleX(1); }

/* One panel size for every card, so the row reads as a set. The logo is
   centred and contained inside it, which lets a wide wordmark use the width
   and a stacked mark use the height without either being forced to match the
   other's pixel size. */
.partner__logo {
  display: grid; place-items: center; overflow: hidden;
  width: 176px; height: 58px; padding: 6px 14px; margin-bottom: 1.2rem;
  background: #fff; border-radius: 10px; border: 1px solid rgba(140,165,195,.18);
}
.partner__logo img {
  width: min(148px, calc(46px * var(--r, 3)), calc(60px * sqrt(var(--r, 3))));
  height: auto; max-height: 46px; object-fit: contain; display: block;
}
.partner__logo--word { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #0c131c; letter-spacing: -.01em; }

.partner__top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.partner__index { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--blue-light); letter-spacing: .05em; }
.partner__tag { font-family: var(--font-body); font-weight: 600; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); padding: .25rem .6rem; border: 1px solid var(--border); border-radius: 999px; }
.partner__name { font-family: var(--font-display); font-size: 1.42rem; font-weight: 500; letter-spacing: -.018em; color: var(--fg); line-height: 1.12; }
.partner__alt { font-size: .8rem; color: var(--fg-muted); font-weight: 400; }
.partner__origin { font-family: var(--font-body); font-weight: 600; font-size: .76rem; color: var(--blue-light); margin: .25rem 0 .9rem; letter-spacing: .02em; }
.partner__desc { color: var(--fg-muted); font-size: .96rem; line-height: 1.6; flex: 1; }
.partner__marks { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.partner__badge { font-family: var(--font-body); font-weight: 700; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: .25rem .6rem; background: var(--blue); border: 1px solid var(--blue); border-radius: 999px; }
.partner--new > article { border-color: rgba(90,166,230,.45); }
.partner__tagline { margin-top: .9rem; font-family: var(--font-body); font-weight: 600; font-size: .86rem; line-height: 1.5; color: var(--fg); }
.partner__link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .65rem; padding-block: .6rem; min-height: 44px; width: fit-content; font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--blue-light); transition: gap .2s var(--ease); }
.partner__link:hover { gap: .55rem; }
.network__empty { text-align: center; color: var(--fg-muted); padding: 2rem 0; }

/* ===================================================================
   CAPABILITIES
   =================================================================== */
.usluge__head { margin-bottom: 2.8rem; }
/* Each card spans three rows of the parent grid (icon, title, text), so a
   title that wraps to two lines keeps every description in the row level. */
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.cap { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.cap {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.7rem 1.5rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  box-shadow: var(--shadow);
}
.cap:hover { transform: translateY(-5px); border-color: var(--blue-light); box-shadow: 0 26px 50px -30px rgba(12,19,28,.30); }
.cap__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1.2rem; background: rgba(25,100,176,.10); color: var(--blue-deep); }
.cap__icon svg { width: 24px; height: 24px; }
.cap__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; margin-bottom: .55rem; line-height: 1.2; letter-spacing: -.012em; }
.cap__desc { color: var(--fg-muted); font-size: .95rem; line-height: 1.6; }

/* ===================================================================
   REFERENCES STRIP
   =================================================================== */
.refs { padding-block: clamp(3rem, 5vw, 4.5rem); background: var(--surface-2); border-block: 1px solid var(--border); }
.refs__lead { text-align: center; color: var(--fg-muted); font-family: var(--font-body); font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.6rem; }
/* Eight sectors: four by two on desktop, two columns on tablets and phones.
   Tiles rather than pills, so a longer English label can wrap cleanly. */
.refs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; max-width: 1060px; margin-inline: auto; }
.refs__list li {
  display: flex; align-items: center; gap: .75rem; min-height: 64px;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.25;
  color: var(--fg); padding: .85rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface);
}
.refs__list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* ===================================================================
   CONTACT
   =================================================================== */
.kontakt__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-list { margin-top: 2.2rem; display: grid; gap: 1.1rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--blue-deep); }
.contact-list__icon svg { width: 22px; height: 22px; }
.contact-list__body { display: flex; flex-direction: column; gap: .15rem; padding-top: .25rem; }
.contact-list__label { font-family: var(--font-body); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-muted); }
.contact-list__body a, .contact-list__body span:not(.contact-list__label) { font-size: 1.05rem; font-weight: 600; color: var(--fg); }
/* keep each phone/e-mail its own tap target rather than a full-width band */
.contact-list__body { min-width: 0; }
.contact-list__body a { width: fit-content; max-width: 100%; line-height: 1.5; overflow-wrap: anywhere; }
.contact-list__body a + a { color: var(--fg-muted); }
.contact-list__body a:hover, .contact-list__body a + a:hover { color: var(--blue-deep); }
.kontakt__legal { margin-top: 2rem; font-family: var(--font-body); font-size: .76rem; color: var(--fg-muted); letter-spacing: .01em; }

.kontakt__panel { display: flex; flex-direction: column; gap: 1rem; }
.map-embed {
  position: relative; aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2); box-shadow: var(--shadow);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* On narrow phones the 16/11 aspect would drop the map below a usable height —
   switch to an explicit, always-tappable height (>=260px) full-width. */
@media (max-width: 480px) {
  .map-embed { aspect-ratio: auto; height: clamp(260px, 70vw, 320px); }
}
.map-link { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--blue-deep); transition: color .2s var(--ease); }
.map-link svg { color: var(--blue); flex: none; }
.map-link:hover { color: var(--blue); }
.kontakt__note { font-family: var(--font-body); font-size: .76rem; color: var(--fg-muted); text-align: center; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer { padding-block: clamp(3.5rem, 6vw, 5rem) 1.6rem; background: #070c11; color: #cdd9e6; position: relative; }
.footer__inner { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 2.2rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(140,165,195,.14); }
.brand--footer { color: #eef3f8; font-size: 1.28rem; }
.footer__nav { display: flex; flex-direction: column; gap: .7rem; }
.footer__nav a { color: #aebcce; font-size: .95rem; width: fit-content; transition: color .2s var(--ease); }
.footer__nav a:hover { color: var(--blue-light); }
.footer__contact { display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; color: #aebcce; }
.footer__contact a:hover { color: var(--blue-light); }
.social { display: flex; gap: .6rem; margin-top: .5rem; }
.social__link {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 11px; color: #cdd9e6;
  border: 1px solid rgba(140,165,195,.22); background: rgba(255,255,255,.04);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.social__link:hover, .social__link:focus-visible { color: var(--blue-light); border-color: var(--blue-light); background: rgba(90,166,230,.10); }

.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; padding-top: 1.4rem; font-family: var(--font-body); font-size: .76rem; color: #76889d; }

/* ===================================================================
   MOBILE STICKY CTA
   =================================================================== */
.mobile-bar { display: none; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
/* Between the tablet breakpoint and ~1000px the brand, the four nav items,
   the language switch and the CTA all sit on one row. The wordmark is ~14:1,
   so at 26px tall it alone takes 370px and pushes the row past the viewport.
   (Pre-existing: the page scrolled sideways at ~880px.) */
@media (min-width: 861px) and (max-width: 1000px) {
  .brand__logo { height: 20px; }
}

@media (max-width: 1024px) {
  .partners { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .about__lede { grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 2.6rem); }
  .about__lede-copy { max-width: 70ch; }
  .about__figure { max-width: 820px; }
  .about__notes { grid-template-columns: 1fr; gap: 1.9rem; }
  /* two columns; the fifth centred beneath the pair above it */
  .about__notes--five { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 2.2rem; }
  .about__notes--five .about__note:nth-child(4) { grid-column: span 2; }
  .about__notes--five .about__note:nth-child(5) { grid-column: 2 / span 2; }
}

@media (max-width: 860px) {
  .refs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav, .header__cta { display: none; }
  .nav-toggle { display: flex; }
  /* Mobile: make the sticky header a SOLID bar so page content can't ghost through it while
     scrolling (iOS Safari shows content through translucent + backdrop-filter bars). !important
     also overrides the translucent background script.js sets inline on scroll. Desktop unchanged. */
  .site-header {
    background: #070c11 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .header__inner { min-height: 60px; }
  .nav {
    position: fixed; inset: var(--header-h, 95px) 0 auto 0; flex-direction: column; gap: 0;
    background: #070c11;
    padding: .5rem 1.25rem 1.5rem; border-bottom: 1px solid rgba(140,165,195,.14);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav.is-open { display: flex; transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: .95rem 0; border-bottom: 1px solid rgba(140,165,195,.1); font-size: 1.05rem; }
  .nav a::after { display: none; }
  /* the underline is off in the drawer, so mark the current section by colour */
  .nav a[aria-current] { color: var(--blue-light); }
  .kontakt__grid { grid-template-columns: 1fr; }
  /* The brand network becomes an ordered grid here (script.js); this height
     is the first-paint estimate, the script sets the exact one. */
  .network__stage { height: 480px; margin-top: 2rem; --hub-w: min(260px, 64vw); }
  .pnode { --pnode-zoom: 1.3; }
  .mobile-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobilebar);
    gap: .6rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background: #070c11; border-top: 1px solid rgba(140,165,195,.16);
  }
  .mobile-bar__btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; border-radius: 11px; font-weight: 600; font-size: .98rem; white-space: nowrap; }
  .mobile-bar__btn--call { background: var(--blue); color: #fff; }
  .mobile-bar__btn--mail { background: rgba(255,255,255,.06); color: #eef3f8; border: 1px solid rgba(140,165,195,.22); }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  /* focused or scrolled-to elements stop above the fixed contact bar */
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .scroll-cue { display: none; }
}

@media (max-width: 700px) {
  .footer__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .partners { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: 1fr; }
  .stat-row { flex-direction: column; gap: 1.2rem; }
  .about__notes--five { grid-template-columns: 1fr; gap: 1.9rem; }
  .about__notes--five .about__note:nth-child(n) { grid-column: auto; }
  .about__foot { flex-direction: column; align-items: flex-start; }
  .about__cta { width: 100%; }
  /* Phones: no ring can give 20 plates a legible size on a 390px screen, so
     script.js lays the same nodes out as an ordered grid, four across, with
     the Scen-Teh hub on its own row in the middle and every line still
     drawn from it (see the 860px block for the stage itself). */
  .network__hub { padding: 12px 18px; }
  .filters { gap: .45rem; margin: 1.6rem 0 2rem; }
  .chip { padding: .55rem .9rem; font-size: .8rem; }
  .filters--sub { margin: -1.2rem 0 2rem; padding-left: .75rem; }
  .filters__label { flex-basis: 100%; }
  .partner > article { padding: 1.25rem 1.2rem 1.3rem; }
}

/* Portrait hero — phones, and tablets held upright. Same condition as the
   portrait <source> in index.html, which serves a crop of the same artwork
   around the fixture (1032 x 720). The artwork is a band across the top at
   its own ratio, never stretched to the section; the copy starts on its
   lower, darkened edge, and the section grows naturally with the copy. */
@media (max-width: 560px), (max-width: 860px) and (orientation: portrait) {
  .hero {
    /* the band's height: the crop's own ratio, but never more than ~half
       an upright tablet's screen (there it trims haze on the left) */
    --art-h: min(calc(100vw * 720 / 1032), 46svh);
    display: block; min-height: 0;
    /* band height minus the overlap the copy is allowed to take */
    padding-block: calc(var(--art-h) - clamp(3.4rem, 11vw, 5.5rem)) 2.75rem;
  }
  .hero__media { inset: 0 0 auto 0; height: var(--art-h); }
  /* 2px past the band so sub-pixel rounding never leaves a seam */
  .hero__scrim { inset: 0 0 auto 0; height: calc(var(--art-h) + 2px); }
  .hero__media img { object-position: 100% 0; }
  /* one fade into the ground under the copy; the lenses stay clear */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(2,5,12,0) 0%, rgba(2,5,12,0) 52%, rgba(2,5,12,.72) 80%, #02050c 100%),
      linear-gradient(90deg, rgba(2,5,12,.35) 0%, rgba(2,5,12,0) 45%);
  }
  .hero__inner > * { max-width: 40rem; }
}

@media (max-width: 560px) {
  .hero__title br { display: none; }
  .hero .eyebrow { font-size: .7rem; letter-spacing: .12em; line-height: 1.55; margin-bottom: .85rem; align-items: flex-start; }
  .hero .eyebrow__dot { margin-top: .42em; }
  .hero__title { line-height: 1.06; margin-bottom: 1rem; }
  .hero__lead { font-size: 1.02rem; line-height: 1.58; }
  .hero__cta { margin-top: 1.5rem; gap: .7rem; }
  .hero__cta .btn { flex: 1 1 100%; min-height: 50px; }
  .hero__trust { margin-top: 2rem; padding-top: 1.2rem; gap: 1.2rem 2rem; min-width: 0; width: 100%; }
}

@media (max-width: 360px) {
  .container { width: min(100% - 1.6rem, var(--container)); }
  .hero__title { font-size: 2.2rem; }
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .js .hero__media,
  .js .hero .eyebrow, .js .hero__title, .js .hero__lead, .js .hero__cta, .js .hero__trust {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .scroll-cue__line::after { animation: none !important; }
}


/* ===================================================================
   CONTACT DIALOG — one small chooser behind the header phone button and
   the "Pošalji upit" button. Native <dialog>, so Escape and the focus
   trap come from the platform; the order of the two options is set by
   whichever button opened it.
   =================================================================== */
.cdlg {
  /* the global `* { margin: 0 }` reset wipes the UA's `margin: auto`,
     which is what centres a modal dialog */
  margin: auto; overscroll-behavior: contain;
  width: min(400px, calc(100vw - 2rem));
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--fg);
  box-shadow: 0 30px 70px -30px rgba(12,19,28,.55);
}
.cdlg::backdrop { background: rgba(7,12,17,.62); backdrop-filter: blur(2px); }
.cdlg__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.15rem .85rem 1.35rem;
}
.cdlg__title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 500; letter-spacing: -.015em; }
.cdlg__close {
  flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  color: var(--fg-muted); background: transparent; border: 1px solid transparent;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.cdlg__close:hover, .cdlg__close:focus-visible { color: var(--fg); background: var(--surface-2); border-color: var(--border); }

.cdlg__list { display: flex; flex-direction: column; gap: .6rem; padding: 0 1.15rem 1.15rem; }
.cdlg__item { display: flex; flex-direction: column; gap: .5rem; }
/* opened from "Pošalji upit": e-mail leads */
.cdlg--email-first .cdlg__item[data-opt="email"] { order: -1; }

.cdlg__action {
  display: flex; align-items: center; gap: .9rem; min-height: 64px;
  padding: .7rem .9rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.cdlg__action:hover, .cdlg__action:focus-visible { border-color: var(--blue); background: #fff; transform: translateY(-1px); }
.cdlg__icon { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(25,100,176,.10); color: var(--blue-deep); }
.cdlg__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cdlg__label { font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.cdlg__value { font-size: 1.02rem; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }

.cdlg__copy {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem .9rem; border-radius: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .85rem;
  color: var(--blue-deep); background: transparent; border: 1px solid var(--border);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.cdlg__copy:hover, .cdlg__copy:focus-visible { border-color: var(--blue); background: rgba(25,100,176,.06); }

.cdlg__status { padding: 0 1.35rem 1.15rem; font-family: var(--font-body); font-size: .82rem; color: var(--blue-deep); min-height: 1.2em; }
.cdlg__status:empty { display: none; }

@media (max-width: 420px) {
  .cdlg__head { padding: 1rem 1rem .7rem 1.1rem; }
  .cdlg__list { padding: 0 1rem 1rem; }
  .cdlg__status { padding: 0 1.1rem 1rem; }
}