/* ============================================================
   Tender Radar — základ (tokeny, reset, typografie, komponenty)
   Firemní identita NODUS / Cyber Security Tech.
   Zdroj pravdy pro barvy: "Komunikační barvy - TEMPLATE.png"
   Fonty: Sora (display) + Inter (body) — navázání na wordmark.
   ============================================================ */

:root {
  /* --- Komunikační paleta NODUS --- */
  --navy:        #071B59;   /* Deep Navy — logo, nadpisy, klíčové CTA */
  --navy-2:      #0B2472;   /* světlejší navy pro přechody v tmavých pásech */
  --navy-ink:    #0A1330;   /* nejtmavší podklad */
  --azure:       #18B6F6;   /* Azure Pulse — primární digitální akcent */
  --blue:        #3D7BFF;   /* Digital Blue — sekundární rozhraní a odkazy */
  --violet:      #6A3FF5;   /* Neo Violet — inovace, AI, důležité akce */
  --mist:        #F4F6FB;   /* Soft Mist — pozadí */

  /* --- Neutrály odvozené (klidné, ne neonové) --- */
  --ink:         #0C1636;   /* hlavní text na světlém */
  --slate:       #566079;   /* sekundární text, ≥4.5:1 na mist */
  --slate-soft:  #646E8C;   /* terciární labely (≥4.5:1 na mist) */
  --blue-ink:    #2456B3;   /* modrý text v malých velikostech (≥4.5:1) */
  --line:        #E1E7F1;   /* jemné linky na světlém */
  --line-2:      #CED7E6;   /* silnější linka */
  --surface:     #FFFFFF;   /* karty na světlém */
  --surface-2:   #FBFCFE;

  /* Neutrály pro tmavé pásy */
  --d-ink:       #EAF0FF;
  --d-ink-2:     #AEB9DC;
  --d-ink-3:     #7C88B4;
  --d-line:      rgba(140,165,230,.16);
  --d-line-2:    rgba(140,165,230,.30);
  --d-surface:   rgba(255,255,255,.04);

  /* --- Relevance (skóre 0–100) — laděno v rámci brand modři, ne semafor --- */
  /* Světlé odstíny = prstenec/výplň (dekorace); *-ink = text (≥ AA kontrast). */
  --rel-high:    #18B6F6;   /* ≥ 80 vysoká — prstenec */
  --rel-high-ink:#0E7FB0;   /* text vysoké relevance */
  --rel-high-bg: rgba(24,182,246,.12);
  --rel-mid:     #3D7BFF;   /* 60–79 střední — prstenec */
  --rel-mid-ink: #2456B3;   /* text střední relevance */
  --rel-mid-bg:  rgba(61,123,255,.10);
  --rel-low:     #7C88B4;   /* < 60 nízká — prstenec */
  --rel-low-ink: #566079;   /* text nízké relevance */
  --rel-low-bg:  rgba(124,136,180,.12);

  /* stavová sémantika (lhůty, statusy) */
  --ok:          #1D9E75;
  --warn:        #C08324;   /* prstenec/ikony */
  --warn-ink:    #8A5A12;   /* text upozornění na lhůtu (≥4.5:1) */
  --risk:        #C0402E;

  /* Brandový gradient — jen akcenty/CTA/glow */
  --grad: linear-gradient(120deg, #18B6F6 0%, #3D7BFF 48%, #6A3FF5 100%);
  --grad-soft: linear-gradient(120deg, rgba(24,182,246,.14), rgba(106,63,245,.10));

  /* Tvary a stín (jeden systém rádiusů) */
  --r:    16px;   /* karty, panely */
  --r-md: 12px;   /* ikonové dlaždice, malé skóre boxy */
  --r-sm: 10px;   /* inputy, drobné prvky */
  --r-xs: 8px;
  --pill: 999px;
  --shadow-sm: 0 1px 2px rgba(9,20,60,.06), 0 2px 8px rgba(9,20,60,.05);
  --shadow-md: 0 8px 30px rgba(9,20,60,.10);
  --shadow-lg: 0 24px 60px rgba(9,20,60,.16);

  /* Typografie */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Motion (Emil tokeny) */
  --e-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --e-io:    cubic-bezier(0.77, 0, 0.175, 1);
  --maxw: 1200px;

  /* z-index škála */
  --z-nav: 50;
  --z-drawer: 80;
  --z-overlay: 70;
  --z-toast: 90;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  background: var(--mist);
  color: var(--ink);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas { max-width: 100%; display: block; }
a { color: var(--blue-ink); text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
p  { text-wrap: pretty; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.num  { font-variant-numeric: tabular-nums; }

.text-grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 600; transition: top .2s var(--e-out);
}
.skip-link:focus { top: 16px; }

/* ===== Tlačítka (jeden systém: pill) ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: .98rem; letter-spacing: -0.01em;
  padding: 12px 22px; border-radius: var(--pill); border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none; color: var(--navy); background: transparent;
  transition: transform .14s var(--e-out), box-shadow .22s var(--e-out),
              background-color .2s, border-color .2s, filter .2s, color .2s;
}
.btn svg { width: 18px; height: 18px; }
.btn-lg { padding: 15px 30px; font-size: 1.04rem; }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn:active { transform: scale(.975); }

.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(61,123,255,.32); filter: brightness(1.04); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--navy-2); }

.btn-ghost { border-color: var(--line-2); color: var(--navy); background: var(--surface); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

.btn-on-dark { border-color: var(--d-line-2); color: var(--d-ink); background: transparent; }
.btn-on-dark:hover { border-color: var(--azure); color: var(--azure); background: rgba(24,182,246,.08); transform: translateY(-2px); }

/* ===== Chips / štítky ===== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  padding: 4px 10px; border-radius: var(--pill);
  background: var(--mist); color: var(--slate); border: 1px solid var(--line);
}
.chip-mono { font-family: var(--font-mono); font-weight: 500; }

/* Vlaječka země */
.flag { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.flag-cz { color: var(--blue-ink); }
.flag-sk { color: var(--violet); }
.flag-eu { color: var(--rel-high-ink); }

/* ===== Focus ===== */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 5px; }

/* ===== Jemná zrnitá textura (premium feel) ===== */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Brand lockup (maskot Nodi + wordmark) ===== */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.18rem;
  letter-spacing: -0.02em; color: var(--navy); line-height: 1;
}
.brand-name b { font-weight: 800; }
.brand-name .radar { color: var(--blue); }

/* ===== Reveal on scroll (jen když JS + motion) ===== */
@media (prefers-reduced-motion: no-preference) {
  html.anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--e-out), transform .7s var(--e-out); }
  html.anim .reveal.in { opacity: 1; transform: none; }
  html.anim .reveal-group > * { transition-delay: calc(var(--i, 0) * 70ms); }
}