@charset "UTF-8";
/* ============================================================
   TECH-SCOPE v4 — "Blueprint": a drafting sheet, not a terminal.
   Deep-indigo pencil on cool drafting white. One plot-blue accent
   for CTAs, links and the fixed-plan line. Burnt amber reserved
   strictly for the 3-projects scarcity. Green for the guarantee.
   Dark bands invert to solid indigo. Headlines set in Archivo
   Expanded and used as an active element, not a delivery vehicle.
   ============================================================ */

:root{
  --bg:#FBFBFC;
  --bg-soft:#F1F4F8;
  --bg-elevated:#FFFFFF;
  --ink:#14203A;
  --ink-soft:#48566F;
  --ink-faint:#8A94A6;
  --line:#E4E8EE;
  --accent:#1B4DFF;
  --accent-dark:#1740CC;
  --money:#0E7C5A;
  --gold:#B4530A;
  --danger:#C0392B;
  --danger-soft:#FBE9E6;
  --dark:#111A2E;
  --paper:#FFFFFF;
  --scene-blue:var(--accent);

  --bg-rgb:251,251,252;
  --bg-elevated-rgb:255,255,255;
  --line-rgb:228,232,238;
  --accent-rgb:27,77,255;
  --money-rgb:14,124,90;
  --gold-rgb:180,83,10;
  --danger-rgb:192,57,43;
  --ink-rgb:20,32,58;
  --paper-rgb:255,255,255;
  --scene-blue-rgb:var(--accent-rgb);

  /* light ground: shadows are a cool navy cast, restrained — reserved for hover-lift only */
  --shadow-card:0 16px 40px -28px rgba(20,32,58,0.30);
  --shadow-pop:0 30px 60px -24px rgba(20,32,58,0.28);

  --font-display:'Archivo', 'Archivo Expanded', sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font-headline:'Archivo Expanded', 'Archivo', sans-serif;

  --container:1200px;
  --radius:10px;
  --radius-sm:8px;
  --ease:cubic-bezier(.16,1,.3,1);
  --section-y:clamp(56px,7vw,96px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@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; scroll-behavior:auto !important; }
}

body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0 0 0.5em; letter-spacing:-0.015em; text-transform:none; color:var(--ink); }
h1,h2{ font-family:var(--font-headline); font-weight:700; letter-spacing:-0.025em; line-height:1.06; text-wrap:balance; }
h1{ font-size:clamp(2rem, 4.4vw, 3.5rem); }
h2{ font-size:clamp(1.65rem, 3vw, 2.4rem); }
h3{ font-size:1.25rem; font-weight:700; }
h4{ font-weight:700; }
p{ margin:0 0 1em; color:var(--ink-soft); }
b,strong{ color:var(--ink); }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
section{ padding:var(--section-y) 0; }
@media (max-width:720px){ section{ padding:52px 0; } }

/* ---------- intro splash (homepage only, sessionStorage-gated) ---------- */
.splash{
  position:fixed; inset:0; z-index:9999;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, transform .5s ease;
}
.splash.splash-hide{ opacity:0; transform:translateY(-24px); pointer-events:none; }
.splash-inner{ text-align:center; }
.splash-mark{ font-family:var(--font-mono); font-weight:700; font-size:2.4rem; color:var(--scene-blue); white-space:nowrap; }
.splash-cursor{ display:inline-block; animation:cursor-blink 1s step-end infinite; }
.splash-sub{
  margin:14px 0 0; font-family:var(--font-body); font-size:1rem; font-weight:500; color:var(--scene-blue);
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
}
.splash-sub.in{ opacity:0.8; transform:translateY(0); }

/* ---------- splash shatter transition (text -> data points) ----------
   Spawned by assets/splash.js right before the intro hides: each glyph of
   "<techscope_>" and each subheadline word becomes one of these, matching
   the visual language of the hero-viz scenes it hands off to (points +
   thin connecting lines) so the cut from "splash" to "hero" reads as one
   continuous idea, not two unrelated animations. */
.splash-shatter-layer{ position:fixed; inset:0; z-index:10000; pointer-events:none; }
.splash-shatter-dot{
  position:fixed; z-index:10000; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; background:var(--scene-blue); opacity:0.9;
  transition:transform 0.7s cubic-bezier(.2,.7,.3,1), opacity 0.7s ease;
}
.splash-shatter-link{
  position:fixed; z-index:10000; height:0.5px; background:var(--scene-blue); opacity:0.32;
  transform-origin:0 50%; transition:opacity 0.35s ease;
}
.splash-mark .shatter-src, .splash-sub .shatter-src{ display:inline-block; }

/* ---------- urgency bar ---------- */
.urgency-bar{ background:var(--dark); color:#fff; text-align:center; font-size:0.8rem; font-weight:600; padding:7px 16px; }
.urgency-bar span{ color:var(--gold); }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(var(--bg-rgb),0.9); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease); }
.nav.is-scrolled{ box-shadow:0 1px 20px -8px rgba(20,32,58,0.18); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 24px; max-width:var(--container); margin:0 auto; }
.logo{ display:inline-flex; align-items:baseline; gap:0; font-family:var(--font-mono); font-weight:700; font-size:1rem; letter-spacing:-0.01em; text-decoration:none; color:var(--ink); }
.logo-punct{ color:var(--accent); }
.logo-cursor{ animation:cursor-blink 1s step-end infinite; }
@keyframes cursor-blink{ 0%, 49%{ opacity:1; } 50%, 100%{ opacity:0; } }
.logo-admin-tag{ font-family:var(--font-mono); font-size:0.65rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; border:1px solid var(--line); border-radius:4px; padding:2px 6px; margin-left:8px; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size:0.92rem; font-weight:600; color:var(--ink-soft); position:relative; padding-bottom:3px; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .22s ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ right:0; }
/* Explicit flex row (not just relying on inline whitespace between the
   two <a> buttons + <button> toggle) — without this, the block-level
   .nav-cta's fit-content width calculation was wrapping the toggle onto
   its own line on narrow phones even though there was room for it. */
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:8px 10px; cursor:pointer; transition:border-color .16s ease; }
.nav-toggle:hover{ border-color:var(--accent); }
/* rezervacia.html: nav-links centered in the bar on desktop (no nav-cta
   button on this page) — scoped to desktop only so the mobile dropdown
   rules below still take over below 880px instead of being overridden by
   a fixed inline position. */
@media (min-width:881px){
  .nav-links.nav-links-center{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
}
@media (max-width:880px){
  .nav-links{ position:absolute; top:100%; left:0; right:0; background:var(--bg-soft); flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--line); display:none; }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:16px 24px; border-bottom:1px solid var(--line); width:100%; }
  .nav-links a::after{ display:none; }
  .nav-toggle{ display:block; }
  .nav-cta .btn-primary{ display:none; }
  /* .btn-secondary ("Klientská zóna") stays visible here, unlike the
     primary CTA — it's the only nav-cta button left once the primary
     hides, so it gets a smaller footprint to sit comfortably next to the
     hamburger instead of crowding it. */
  .nav-cta .btn-secondary{ padding:8px 14px; font-size:0.82rem; }
}

/* ---------- "Služby" rozbaľovacia karta ----------
   Desktop: hover / focus-within / .is-open (klik) odkryje kartu pod trigerom;
   trigger ostáva reálny odkaz na #sluzby ako fallback bez JS.
   Mobil (<=880px): karta sa vykreslí staticky, odsadená pod "Služby",
   vnútri už otvoreného .nav-links panelu. */
.nav-dd{ position:relative; }
.nav-dd-trigger{ display:inline-flex; align-items:center; gap:6px; }
.nav-dd-chevron{
  width:13px; height:13px; flex-shrink:0; transition:transform .22s var(--ease);
}
.nav-dd:hover .nav-dd-chevron,
.nav-dd:focus-within .nav-dd-chevron,
.nav-dd.is-open .nav-dd-chevron{ transform:rotate(180deg); }

.nav-dd-panel{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
  width:320px; padding:8px;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-pop);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index:60;
}
/* hover-bridge — aby kurzor prešiel z trigeru na kartu bez zavretia */
.nav-dd-panel::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel,
.nav-dd.is-open .nav-dd-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-dd-panel a{
  display:block; padding:11px 13px; border-radius:8px;
  text-decoration:none; color:var(--ink);
  transition:background .16s var(--ease);
}
.nav-dd-panel a::after{ display:none; }
.nav-dd-panel a span{ display:block; font-weight:700; font-size:0.92rem; color:var(--ink); transition:color .16s var(--ease); }
.nav-dd-panel a small{ display:block; margin-top:2px; font-size:0.8rem; font-weight:500; color:var(--ink-faint); line-height:1.4; }
.nav-dd-panel a:hover{ background:rgba(var(--accent-rgb),0.06); }
.nav-dd-panel a:hover span{ color:var(--accent); }

@media (max-width:880px){
  .nav-dd-panel{
    position:static; width:100%; padding:0;
    background:transparent; border:none; border-radius:0; box-shadow:none;
    opacity:1; visibility:hidden; pointer-events:none; max-height:0; overflow:hidden;
    transition:none;
  }
  .nav-dd-panel,
  .nav-dd:hover .nav-dd-panel,
  .nav-dd:focus-within .nav-dd-panel,
  .nav-dd.is-open .nav-dd-panel{ transform:none; }
  .nav-dd.is-open .nav-dd-panel{ visibility:visible; pointer-events:auto; max-height:none; }
  .nav-dd-panel::before{ display:none; }
  .nav-links a.nav-dd-trigger{ display:flex; align-items:center; justify-content:space-between; }
  .nav-dd-chevron{ width:16px; height:16px; }
  .nav-dd-panel a{
    padding:13px 24px 13px 40px; border-bottom:1px solid var(--line); border-radius:0;
    background:var(--bg-soft);
  }
  .nav-dd-panel a small{ display:none; }
}

/* ---------- buttons ----------
   Primary = confident outline that fills solid on hover (no box-shadow,
   no lift/transform) — boldness comes from size/padding/letter-spacing,
   not a loud fill. Ghost/secondary = no border or background at all,
   ever; just text that gains an underline on hover. Shared across every
   page (rezervacia.html CTAs, admin forms, popups), not homepage-only. */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:800; font-size:1rem; letter-spacing:0.025em; text-decoration:none; padding:18px 34px; border-radius:var(--radius); border:2px solid transparent; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
/* Solid indigo block — the darkest thing on a light page, so hierarchy is
   unmistakable without a shadow or a lift. Blue is kept for links and the
   plan line; the CTA only shifts to blue on hover as a small reward. */
.btn-primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-primary:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:active{ background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
/* inverted context: on a dark band the same button flips to a white block */
.band-dark .btn-primary, .guarantee .btn-primary{ background:#fff; color:var(--ink); border-color:#fff; }
.band-dark .btn-primary:hover, .guarantee .btn-primary:hover{ background:transparent; color:#fff; border-color:#fff; }
.btn-ghost{
  background-image:linear-gradient(currentColor, currentColor);
  background-position:0 100%; background-repeat:no-repeat; background-size:0% 1px;
  color:var(--ink-soft); border-color:transparent; padding:10px 4px;
  transition:background-size .2s ease, color .18s ease;
}
.btn-ghost:hover{ color:var(--ink); background-size:100% 1px; }
.btn-block{ width:100%; }

/* nav-only secondary CTA ("Klientská zóna") — same size/shape as
   .btn-primary so the two sit level in the header, but a thin faint line
   colored border + muted text instead of the bold ink outline keeps it
   clearly the less prominent of the two. */
.btn-secondary{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
.btn-secondary:hover{ color:var(--ink); border-color:var(--scene-blue); background:rgba(var(--scene-blue-rgb),0.06); }
.btn-secondary:active{ color:var(--ink); border-color:var(--scene-blue); background:rgba(var(--scene-blue-rgb),0.1); }

/* destructive admin action (e.g. "Zmazať projekt") — thin danger-colored
   outline, deliberately smaller than the full-size primary CTA so it never
   reads as the "main" button in a card header. */
.btn-danger{ background:transparent; color:var(--danger); border-color:rgba(var(--danger-rgb),.4); padding:10px 18px; font-size:0.85rem; font-weight:700; flex-shrink:0; }
.btn-danger:hover{ background:var(--danger-soft); border-color:var(--danger); }
.btn-danger:active{ background:rgba(var(--danger-rgb),.15); }

/* ---------- eyebrow / tags ---------- */
/* measured-tick section marker — a short drafting rule, sentence case,
   no tracking, no caps, no mono "+" glyph. The tick colour carries the
   category (blue default, amber on a dark band, green for value). */
.eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:0.82rem; letter-spacing:0; text-transform:none; color:var(--ink-soft); margin-bottom:20px; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); flex-shrink:0; }
.eyebrow.dark{ color:#B7C5DC; }
.eyebrow.dark::before{ background:var(--gold); }
.eyebrow.green::before{ background:var(--money); }

/* ---------- hero ---------- */
.hero{ position:relative; padding:34px 0 14px; text-align:center; overflow:hidden; }
/* Statická jemná mriežka na pozadí hero — bez pohybu (žiadna animácia). */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:0.55;
  mask-image:radial-gradient(ellipse 70% 65% at 50% 15%, #000 35%, transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 15%, #000 35%, transparent 82%);
}
.hero > .container{ position:relative; z-index:2; }

/* ---------- hero ambient background ("živá dátová mapa") ----------
   Layer 1 (static, pure CSS): faint dot grid via .geo-bg::before — no
   SVG/JS, zero runtime cost. Layer 2 (animated): .geo-point/.geo-link
   elements injected + scheduled by assets/script.js, snapped onto this
   same grid so points look like they're landing on real coordinates. ---------- */
.geo-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.geo-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle, var(--ink-soft) 1px, transparent 1.5px);
  background-size:34px 34px;
  opacity:0.32;
}
@media (max-width:768px){ .geo-bg::before{ display:none; } }

.geo-point{
  position:absolute;
  width:4px; height:4px; margin:-2px 0 0 -2px;
  border-radius:50%;
  background:var(--accent);
  opacity:0;
  transition:opacity 1s ease;
}
.geo-point.in{ opacity:0.5; }

.geo-link{
  position:absolute;
  height:0.5px;
  background:var(--accent);
  opacity:0;
  transform-origin:0 50%;
  transition:opacity 1s ease;
}
.geo-link.in{ opacity:0.22; }

/* ---------- hero 2-column layout (text left ~55%, code terminal right
   ~45%, single CTA centered below both — homepage only) ----------
   The data-scene canvas (assets/hero-viz.js) is no longer confined to a
   panel — it's a full-bleed ambient layer behind the whole section (see
   .hero-bg-canvas-wrap below), low-opacity and z-index'd under everything
   so it never competes with text/code for attention. */
.hero.hero-split{
  text-align:left; padding:clamp(28px,5vh,52px) clamp(24px,5vw,64px) clamp(40px,6vh,72px);
}
.hero-inner{ position:relative; z-index:2; max-width:1280px; width:100%; margin:0 auto; }

.hero-grid{
  display:grid; grid-template-columns:11fr 9fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.hero-copy{ max-width:560px; }
.hero-copy .eyebrow{
  color:var(--ink-soft); gap:10px; margin-bottom:20px;
}
.hero-copy .eyebrow::before{ content:none; }
.eyebrow-icon{ flex-shrink:0; color:var(--accent); }

.hero-title-main{
  margin:0 0 20px; font-family:var(--font-headline); font-size:clamp(2.05rem, 4vw, 3.5rem); line-height:1.05;
  font-weight:700; letter-spacing:-0.025em; color:var(--ink); text-wrap:balance;
}
.hero-subheadline{
  margin:0; color:var(--ink-soft); font-size:clamp(1.05rem, 1.2vw, 1.15rem);
  max-width:52ch; line-height:1.6;
}

.hero-typing-phrase{
  margin:clamp(22px,3.5vh,36px) 0 0; color:var(--ink-soft); text-align:center;
  font-family:var(--font-mono); font-size:clamp(0.85rem, 1vw, 0.95rem); font-weight:500;
}
.hero-typing-variable{ color:var(--scene-blue); font-weight:600; }
.hero-hub .hero-typing-phrase{ min-height:2.8em; }
.hero-typing-cursor{
  display:inline-block; width:0.5em; height:1em; margin-left:1px; vertical-align:-0.15em;
  background:var(--scene-blue); animation:cursor-blink 1s step-end infinite;
}
@media (prefers-reduced-motion: reduce){
  .hero-typing-cursor{ display:none; }
}

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

.hero-split .hero-ctas{ justify-content:center; margin-top:clamp(20px,3vh,32px); margin-bottom:0; }

/* ---------- hero code editor window ----------
   Wraps the typed code block so it reads as an anchored editor pane, not
   loose floating text: thin outline, a tab-bar header with the "file"
   for whichever of the 6 scenes is currently running, line numbers down
   the left. Deliberately no macOS-style traffic-light dots — just the
   filename and one small scene-blue marker. */
.hero-editor{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--bg-elevated); width:100%;
}
.hero-editor-tab{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:0.72rem; font-weight:600; color:var(--ink-faint);
}
.hero-editor-tab::before{
  content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--scene-blue); opacity:0.7;
}
.hero-code-block{
  font-family:var(--font-mono); font-size:0.85rem; line-height:1.85;
  padding:18px 20px; overflow-x:auto;
}
.hero-code-block .code-line{ display:flex; min-height:1.85em; }
.hero-code-block .code-line-num{
  flex-shrink:0; width:1.4em; margin-right:14px; text-align:right;
  color:var(--ink-faint); opacity:0.55; -webkit-user-select:none; user-select:none;
}
.hero-code-block .code-line-code{ white-space:pre; color:rgba(var(--ink-rgb),0.9); }
.hero-code-block .code-line-code .kw{ color:var(--scene-blue); }
.hero-code-block .code-cursor{ background:rgba(var(--scene-blue-rgb),0.7); }

/* ---------- full-bleed ambient data-scene background ----------
   Sits behind the entire hero (z-index below .hero-inner's content, above
   the static .hero::before/::after grid+glow and .geo-bg dot texture).
   pointer-events:none throughout so it never blocks clicks; opacity kept
   low so text/code stay the clear focal point. */
.hero-bg-canvas-wrap{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hero-viz-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0.5; }

@media (max-width:768px){
  .hero.hero-split{ min-height:0; padding:clamp(32px,10vh,56px) 20px; }
  .hero-grid{ grid-template-columns:1fr; gap:28px; }
  .hero-copy{ max-width:none; }
  .hero-title-main{ font-size:clamp(2rem, 8vw, 2.6rem); }
  .hero-subheadline{ max-width:none; }
  .hero-code-block{ font-size:0.72rem; padding:14px 16px; }
}

/* ---------- hero, centered hub variant ----------
   Hub page (index.html): same full-bleed ambient canvas as the product
   pages' hero-viz, but no two-column code terminal — just a single
   centered copy block, since the hero's job here is to route into the 4
   service pages, not sell one product. .hero-editor stays in the DOM
   (assets/hero-viz.js requires .hero-code-block to exist to start at
   all) but visually hidden via .visually-hidden. */
/* .hero.hero-split.hero-hub (all three classes, matching the actual
   markup exactly) is deliberate, not decoration: .hero.hero-split alone
   sets text-align:left at (0,2,0) specificity for the other 4 hero-split
   pages, which otherwise silently beats a plain .hero-hub{text-align:
   center} at (0,1,0) — the H1 LOOKED centered before only because its box
   happened to fill its already-centered parent exactly, while the actual
   text inside stayed left-aligned (visible as soon as it wraps to two
   uneven lines). (0,3,0) here wins outright, no source-order gamble. */
.hero.hero-split.hero-hub{ text-align:center; }
.hero-hub .hero-copy-center{ max-width:720px; margin:0 auto; }
.hero-hub .hero-copy-center .eyebrow{ justify-content:center; color:var(--ink-soft); }
.hero-hub .hero-copy-center .eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); opacity:1; }
/* H1 gets its own max-width + margin:0 auto (not just inherited
   text-align) so it self-centers as its own block, independent of
   .hero-copy-center's width — matches every other centered element here. */
.hero-hub .hero-title-main{ max-width:680px; margin:0 auto 20px; text-align:center; }
.hero-hub .hero-subheadline{ margin:0 auto; text-align:center; }
.hero-hub .hero-ctas{ justify-content:center; margin-top:clamp(24px,4vh,36px); }

/* ---------- "skillset spine" — hub hero only ----------
   A thin vertical line with 4 lit nodes (one per service), each showing
   a small monospace label that cross-fades through 2-3 related
   skills/technologies (assets/skillset-spine.js). Purely ambient — sits
   off to the side so it never competes with the centered H1/subheadline,
   z-index'd with the canvas layer (below .hero-inner's text) and clipped
   by .hero's own overflow:hidden. Hidden below ~960px: there isn't
   enough side margin next to the centered copy on tablet/mobile for a
   decorative side element without it either overlapping text or feeling
   cramped, and the hero already has the ambient canvas doing this job.

   .skillset-area is the outer positioned box (wide enough for the drifting
   background symbols and the outer arc to have room to breathe); the line
   + 4 nodes that used to BE .skillset-spine now live inside it unchanged,
   just reparented one level down. Paint order (back to front, all same
   z-index stacking context so DOM order decides): ambient code symbols,
   the outer arc connecting node 1 <-> node 4, then the spine itself. */
.skillset-area{
  position:absolute; z-index:1; top:50%; right:6%; transform:translateY(-50%);
  height:62%; width:210px; pointer-events:none;
}
.skillset-spine{
  position:absolute; left:0; top:0; height:100%; display:flex; align-items:stretch;
}
.skillset-line{
  width:1px; flex-shrink:0;
  background:linear-gradient(to bottom, transparent, rgba(var(--scene-blue-rgb),0.4) 12%, rgba(var(--scene-blue-rgb),0.4) 88%, transparent);
}
.skillset-nodes{
  display:flex; flex-direction:column; justify-content:space-between;
  margin-left:-5px;
}
.skillset-node{ display:flex; align-items:center; gap:11px; }
.skillset-dot{
  position:relative; width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:var(--bg); border:2px solid var(--scene-blue);
  box-shadow:0 0 10px -1px rgba(var(--scene-blue-rgb),0.6);
}
/* glow pulse — assets/skillset-spine.js toggles .is-pulsing on the dot at
   the exact moment its label swaps to the next skill, so the ring "marks"
   the change instead of it happening silently. Re-triggerable: the JS
   removes+reflows+re-adds the class every cycle so the animation restarts
   each time rather than only playing once. */
.skillset-dot::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  background:rgba(var(--scene-blue-rgb),0.55); opacity:0; pointer-events:none;
}
.skillset-dot.is-pulsing::after{ animation:skillset-pulse .8s ease-out; }
@keyframes skillset-pulse{
  0%{ opacity:0.55; transform:scale(0.4); }
  100%{ opacity:0; transform:scale(2.4); }
}
.skillset-label{
  font-family:var(--font-mono); font-size:0.76rem; font-weight:600;
  color:var(--ink-soft); white-space:nowrap; opacity:1; transition:opacity .35s ease;
}
.skillset-label.is-swapping{ opacity:0; }

/* ambient background symbols — sparse, very low-opacity programming
   glyphs drifting independently of the node cycling, so the area around
   the spine reads as "full" rather than empty air. Each gets its own
   duration/delay inline (see index.html) so they don't move in lockstep. */
.skillset-ambient{ position:absolute; inset:0; overflow:visible; }
.skillset-symbol{
  position:absolute; font-family:var(--font-mono); font-weight:600;
  color:var(--ink); opacity:0.11; white-space:nowrap; user-select:none;
  animation-name:skillset-symbol-drift; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
@keyframes skillset-symbol-drift{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(7px,-9px) rotate(4deg); }
}

/* outer arc — one thin bowed connector from the first node to the last
   (Data Compass <-> AI riešenia), bulging past the labels on the right
   so it never crosses the text, hinting the 4 services interconnect
   rather than reading as a strictly linear list. viewBox 0 0 100 100 +
   preserveAspectRatio="none" makes the path coordinates behave like
   percentages of whatever box the svg actually renders at. */
.skillset-arc{ position:absolute; inset:0; overflow:visible; }
.skillset-arc-path{ fill:none; stroke:var(--scene-blue); stroke-width:0.6; opacity:0.28; vector-effect:non-scaling-stroke; }

@media (max-width:960px){ .skillset-area{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .skillset-label{ transition:none; }
  .skillset-symbol{ animation:none; }
  .skillset-dot.is-pulsing::after{ animation:none; opacity:0; }
}

/* ---------- "commit graph" ambient — hub hero only, left side ----------
   Mirrors the skillset spine's positioning on the opposite side of the
   centered hero copy, but reads as its own thing: a faint git-branch
   graph (trunk + one fork/merge) sitting behind the text, deliberately
   dimmer and slower than the skillset side (see the opacity/duration
   values below vs. .skillset-*) since its only job is background depth,
   not a secondary focal point. One small dot travels the trunk on a
   native SVG <animateMotion> loop — cheap, no extra JS/canvas needed;
   hidden outright under reduced-motion (see index.html) while the static
   graph underneath it stays. */
.commitgraph-area{
  position:absolute; z-index:1; top:50%; left:6%; transform:translateY(-50%);
  height:58%; width:180px; pointer-events:none; overflow:visible;
}
.commitgraph-svg{ position:absolute; inset:0; }
.commitgraph-edge{ fill:none; stroke:var(--ink); stroke-width:0.6; opacity:0.13; vector-effect:non-scaling-stroke; }
.commitgraph-edge--branch{ stroke:var(--scene-blue); opacity:0.18; }
.commitgraph-node{ fill:var(--ink); opacity:0.22; }
.commitgraph-node--branch{ fill:var(--scene-blue); opacity:0.3; }
.commitgraph-pulse{ fill:var(--scene-blue); opacity:0.55; }
@media (max-width:960px){ .commitgraph-area{ display:none; } }
@media (prefers-reduced-motion: reduce){ .commitgraph-pulse{ display:none; } }

.hero h1{ max-width:23ch; margin:0 auto 16px; font-size:clamp(1.7rem, 3.6vw, 2.7rem); line-height:1.12; }
.hero h1 mark{ background:none; color:var(--accent); }
.hero-sub{ font-size:1.02rem; max-width:54ch; margin:0 auto 24px; }
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }
.hero-proof{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:24px; font-size:0.82rem; color:var(--ink-faint); font-weight:600; }
.hero-proof span::before{ content:"\002713 "; color:var(--money); font-weight:800; }
.btn-call{ font-size:1.05rem; }
.btn-call .icon{ font-size:1.1rem; }

/* ---------- story bridge ---------- */
.story{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.story-inner{ max-width:760px; margin:0 auto 48px; text-align:center; }
.story-inner h2{ margin:0 0 16px; }
.story-inner p{ font-size:1.12rem; color:var(--ink); max-width:65ch; margin:0 auto; }
.story-inner p.story-citation{ font-size:0.82rem; color:var(--ink-faint); margin:4px auto 0; }

.story-stats{ display:grid; grid-template-columns:repeat(3,auto); gap:40px; margin:32px auto 28px; justify-content:center; }
@media (max-width:640px){ .story-stats{ grid-template-columns:1fr; gap:22px; } }
.story-stat{ text-align:center; }
.story-stat-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,4vw,3rem); color:var(--scene-blue); line-height:1; margin-bottom:8px; }
.story-stat p{ margin:0 auto; font-size:0.88rem; color:var(--ink-soft); max-width:22ch; }

/* ---------- value wheel ("koleso hodnoty") ----------
   8 nodes positioned by trigonometry (JS: angle = index * 360/8, x/y via
   cos/sin) around a static central "RAST" hub. Three independent layers
   sit on top of each other, all pure CSS transform/opacity animations —
   JS only ever computes rest-position geometry once (on load/resize), it
   never drives the rotation frame-by-frame:
     .value-orbit-rings  — static, non-rotating guide circles (context only)
     .value-spokes        — SVG lines, hub → each node's rest position,
                             behind the hub (z-index 1)
     .value-nodes          — the node markers/cards, above the hub (z-index 3)
   .value-spokes and .value-nodes both get the identical value-wheel-spin
   animation (same duration/easing, started in the same JS tick via
   valueSetSpinning), so they stay perfectly in lockstep without being
   nested — that's what lets spokes render *behind* the hub while nodes
   render *above* it, instead of forcing one shared stacking order.
   Each node's own .value-node-counter runs that rotation in reverse at
   the same duration so its marker+label content cancels the spin and
   stays upright — only its *position* orbits, never its content.
   Clicking a node pauses everything (freezing wherever the ring is) and
   opens a floating detail panel. Whichever node is currently nearest the
   12-o'clock position gets .is-top (see valueRefreshHighlightCycle() in
   script.js) — brighter label, accent card border, lit spoke/marker —
   and the same treatment is reused for a manually-opened node (.is-open).
   Both are pure color/glow/opacity changes, never layout, so they can't
   desync the trigonometric positions and stay cheap to animate. */
#hodnota{ padding:40px 0 48px; }
#hodnota .section-head{ margin-bottom:20px; }

.value-wheel{
  position:relative; width:min(1080px,94vw); aspect-ratio:1/1; margin:0 auto;
  background:radial-gradient(circle at 50% 50%, rgba(var(--scene-blue-rgb),0.06), transparent 62%);
}

.value-orbit-rings{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.value-orbit-ring{
  position:absolute; top:50%; left:50%; border-radius:50%; transform:translate(-50%,-50%);
  border:1px solid rgba(var(--scene-blue-rgb),0.12);
}
.value-orbit-ring--outer{ width:70%; height:70%; }
.value-orbit-ring--inner{ width:45%; height:45%; border-color:rgba(var(--scene-blue-rgb),0.08); }

.value-spokes{ position:absolute; inset:0; z-index:1; overflow:visible; pointer-events:none; }
.value-spokes.is-spinning{ animation:value-wheel-spin 56s linear infinite; }
.value-spoke{
  stroke:url(#value-spoke-gradient); stroke-width:1.25; stroke-linecap:round;
  opacity:.4; transition:opacity .5s ease;
}
.value-spoke.is-lit{ opacity:1; filter:drop-shadow(0 0 3px rgba(var(--scene-blue-rgb),0.7)); }
#value-spoke-gradient stop:first-child{ stop-color:var(--scene-blue); stop-opacity:0.85; }
#value-spoke-gradient stop:last-child{ stop-color:var(--scene-blue); stop-opacity:0; }

.value-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:clamp(146px,20vw,200px); height:clamp(146px,20vw,200px); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--bg-elevated), var(--bg-soft));
  border:2px solid var(--scene-blue);
  box-shadow:0 0 46px -6px rgba(var(--scene-blue-rgb),0.55), inset 0 0 0 1px rgba(var(--scene-blue-rgb),0.18);
}
.value-hub::before{
  content:''; position:absolute; inset:-26%; z-index:-2; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--scene-blue-rgb),0.3), transparent 68%);
  filter:blur(4px);
  animation:value-hub-pulse 3.6s ease-in-out infinite;
}
.value-hub::after{
  content:''; position:absolute; inset:-3px; z-index:-1; border-radius:50%; opacity:.6;
  background:conic-gradient(from 120deg, rgba(var(--scene-blue-rgb),0.9), rgba(var(--scene-blue-rgb),0.1) 40%, rgba(var(--scene-blue-rgb),0.85) 80%, rgba(var(--scene-blue-rgb),0.9));
  animation:value-hub-pulse 3.6s ease-in-out infinite alternate;
}
.value-hub span{
  font-family:var(--font-display); font-weight:800; letter-spacing:0.03em;
  font-size:clamp(1.75rem,4vw,2.3rem); color:var(--ink);
}
@keyframes value-hub-pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

.value-nodes{ position:absolute; inset:0; z-index:3; transform-origin:50% 50%; }
.value-nodes.is-spinning{ animation:value-wheel-spin 56s linear infinite; }
@keyframes value-wheel-spin{ to{ transform:rotate(360deg); } }
@keyframes value-wheel-spin-reverse{ to{ transform:rotate(-360deg); } }

.value-node{ position:absolute; transform:translate(-50%,-50%); }
.value-node-counter{ transform-origin:50% 50%; position:relative; }
.value-nodes.is-spinning .value-node-counter{ animation:value-wheel-spin-reverse 56s linear infinite; }

.value-node-marker{
  width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--scene-blue);
  box-shadow:0 0 6px rgba(var(--scene-blue-rgb),0.55);
  transition:box-shadow .35s ease;
  animation:value-marker-breathe 4.5s ease-in-out infinite;
}
@keyframes value-marker-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.16); } }

.value-node-trigger{
  box-sizing:border-box; display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:9px 14px; border-radius:8px; text-align:left;
  border:1px solid rgba(var(--line-rgb),0.8);
  background:rgba(var(--bg-elevated-rgb),0.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.value-node[data-side="left"] .value-node-trigger{ flex-direction:row-reverse; }
.value-node[data-side="center"] .value-node-trigger{ flex-direction:column; text-align:center; }
.value-node[data-vpos="top"] .value-node-trigger{ flex-direction:column-reverse; }
.value-node-label{
  max-width:148px; font-size:1rem; font-weight:600; line-height:1.3; color:var(--ink-soft);
  transition:color .35s ease, text-shadow .35s ease;
}
.value-node[data-side="left"] .value-node-label{ text-align:right; }
.value-node[data-side="right"] .value-node-label{ text-align:left; }
.value-node[data-side="center"] .value-node-label{ text-align:center; }

.value-node-trigger:hover,
.value-node.is-open .value-node-trigger{
  border-color:var(--scene-blue); background:rgba(var(--bg-elevated-rgb),0.75);
}
.value-node-trigger:hover .value-node-label,
.value-node.is-open .value-node-label{ color:var(--ink); }
.value-node-trigger:focus-visible{ outline:2px solid var(--scene-blue); outline-offset:2px; }

/* the node currently nearest the 12-o'clock position as the ring rotates
   (desktop) or the node currently "up" in the mobile cycle — see the
   valueRefreshHighlightCycle()/valueApplyHighlight() JS. Reused for a
   manually-opened node too (.is-open). */
.value-node.is-top .value-node-label,
.value-node.is-open .value-node-label{
  color:var(--ink); text-shadow:0 0 12px rgba(var(--scene-blue-rgb),0.55);
}
.value-node.is-top .value-node-trigger,
.value-node.is-open .value-node-trigger{
  border-color:var(--scene-blue); background:rgba(var(--bg-elevated-rgb),0.75);
  box-shadow:0 0 24px -8px rgba(var(--scene-blue-rgb),0.55);
}
.value-node.is-top .value-node-marker,
.value-node.is-open .value-node-marker{
  box-shadow:0 0 16px rgba(var(--scene-blue-rgb),0.9), 0 0 4px rgba(var(--scene-blue-rgb),1);
}

.value-node-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px;
  width:216px; z-index:6;
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.value-node-panel[data-placement="above"]{ top:auto; bottom:100%; margin-top:0; margin-bottom:8px; }
.value-node-panel.is-open{ grid-template-rows:1fr; opacity:1; }
.value-node-panel-inner{ overflow:hidden; min-height:0; }
.value-node-panel-inner p{
  margin:0; padding:11px 13px; font-size:0.8rem; line-height:1.5; color:var(--ink-soft);
  background:var(--bg-elevated); border:1px solid var(--scene-blue); border-radius:10px;
  box-shadow:var(--shadow-pop);
}

.value-wheel-note{
  max-width:56ch; margin:28px auto 0; text-align:center; font-size:0.92rem; color:var(--ink-soft);
}

@media (prefers-reduced-motion:reduce){
  .value-hub::before, .value-hub::after, .value-node-marker{ animation:none; }
}

/* mobile: replace the circle with a plain vertical list of the same
   glass cards, no orbit geometry — trigger+panel share one rounded card
   (.value-node-counter) so the expanding detail stays visually contained.
   JS skips computing node positions below the 768px breakpoint, so these
   overrides are all this needs. */
@media (max-width:767px){
  .value-wheel{ width:100%; aspect-ratio:auto; background:none; }
  .value-orbit-rings, .value-spokes{ display:none; }
  .value-hub{
    position:static; transform:none; width:auto; height:auto; margin:0 0 24px; border:none;
    background:none; box-shadow:none; border-radius:0;
  }
  .value-hub::before, .value-hub::after{ display:none; }
  .value-hub span{ font-size:1.5rem; }
  .value-nodes{ position:static; display:flex; flex-direction:column; gap:10px; }
  .value-node{ position:static !important; transform:none; }
  .value-node-counter{
    animation:none !important; overflow:hidden; border-radius:10px;
    border:1px solid rgba(var(--line-rgb),0.8); background:rgba(var(--bg-elevated-rgb),0.4);
    transition:background .35s ease, border-color .35s ease;
  }
  .value-node.is-top .value-node-counter,
  .value-node.is-open .value-node-counter{
    border-color:var(--scene-blue); background:rgba(var(--bg-elevated-rgb),0.75);
  }
  .value-node-trigger, .value-node[data-side] .value-node-trigger, .value-node[data-vpos] .value-node-trigger{
    flex-direction:row; width:100%; padding:14px 16px; border-radius:0; border:none; background:none;
  }
  .value-node-trigger:hover, .value-node.is-open .value-node-trigger{ background:none; }
  .value-node-label, .value-node[data-side] .value-node-label{ max-width:none; text-align:left; flex:1; font-size:1rem; }
  .value-node-panel, .value-node-panel[data-placement="above"]{
    position:static; width:auto; margin:0; transform:none; bottom:auto;
  }
  .value-node-panel-inner p{ border:none; border-radius:0; background:none; padding:0 16px 14px; }
}

/* ---------- value equation ---------- */
.eq-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:880px){ .eq-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .eq-grid{ grid-template-columns:1fr; } }
.eq-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); padding:24px 20px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.eq-card:hover, .eq-card.reveal:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--scene-blue); }
.eq-card .num{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--accent); margin-bottom:10px; }
.eq-card h4{ font-family:var(--font-body); font-weight:800; font-size:1rem; margin:0 0 8px; }
.eq-card p{ font-size:0.88rem; margin:0; }
@media (min-width:881px){
  .eq-grid{ position:relative; }
}

/* ---------- "ako pracujeme" steps — custom JS-driven accordion (button +
   panel, not native <details>): the panel height animates via the
   grid-template-rows 0fr/1fr trick, kept perfectly in sync with the
   per-character typing reveal in assets/script.js (see the .step-card
   block there for why). Collapsed (0fr) is the CSS default, which assumes
   JS is available to open it — the <noscript> override in <head> forces
   panels open for visitors without JS. */
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:880px){ .steps-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps-grid{ grid-template-columns:1fr; } }

/* ---------- compact (non-expanding) process grid — hub page ----------
   Reuses .eq-card (already defined below) for a plain number+title+text
   card, no accordion — the hub only needs a quick overview, the full
   step-by-step detail lives on each service page. */
.eq-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
@media (max-width:1024px){ .eq-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:640px){ .eq-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .eq-grid{ grid-template-columns:1fr; } }

.step-card{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--bg-elevated), var(--bg-soft));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 20px;
  transition:border-color .28s ease, box-shadow .28s ease;
}
.step-card:hover, .step-card.is-open{
  border-color:var(--scene-blue);
  box-shadow:0 14px 32px -22px rgba(var(--scene-blue-rgb),0.4);
}
.step-card-num-bg{
  position:absolute; top:8px; right:14px; z-index:0;
  font-family:var(--font-display); font-weight:700; font-size:4rem; line-height:1;
  color:var(--scene-blue); opacity:0.1; pointer-events:none; user-select:none;
}
.step-card-trigger{
  all:unset; box-sizing:border-box; position:relative; z-index:1;
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
}
.step-card-trigger:focus-visible{ outline:2px solid var(--scene-blue); outline-offset:4px; border-radius:4px; }
.step-name{ flex:1; font-family:var(--font-body); font-weight:800; font-size:1rem; color:var(--ink); }
.step-card-label{ font-size:0.8rem; font-weight:700; color:var(--scene-blue); }
.step-card-label::after{ content:"Zistiť viac"; }
.step-card-trigger[aria-expanded="true"] .step-card-label::after{ content:"Skryť"; }
.step-card-arrow{ width:16px; height:16px; color:var(--scene-blue); flex-shrink:0; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.step-card-trigger[aria-expanded="true"] .step-card-arrow{ transform:rotate(180deg); }

.step-card-panel{
  position:relative; z-index:1; display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1);
}
.step-card-panel.is-open{ grid-template-rows:1fr; }
.step-card-panel-inner{ overflow:hidden; min-height:0; }
.step-card-panel-inner p{ margin:16px 0 0; font-size:0.9rem; color:var(--ink-soft); opacity:0; transition:opacity .4s ease; }
.step-card-panel.is-open .step-card-panel-inner p{ opacity:1; }
.step-card-panel-inner p .step-hl{ color:var(--scene-blue); font-weight:800; }
.step-card-panel-inner p .type-char-new{
  color:var(--ink); text-shadow:0 0 8px rgba(var(--scene-blue-rgb),0.55);
  transition:color .2s ease, text-shadow .2s ease;
}
.step-typing-cursor{
  display:inline-block; width:2px; height:0.95em; margin-left:1px; vertical-align:-0.12em;
  background:var(--scene-blue); animation:cursor-blink 1s step-end infinite;
}
@media (prefers-reduced-motion:reduce){
  .step-card-panel-inner p{ transition:none; }
}

.step-card.reveal{
  opacity:0; transform:translateY(18px) scale(0.96);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.step-card.reveal.in{ opacity:1; transform:translateY(0) scale(1); }

/* ---------- "ako pracujeme" full process detail — native <details>
   expand, no JS. Deliberately denser/longer than the rest of the page:
   this is opt-in depth for visitors who click through, not something
   meant to be skimmed at a glance. ---------- */
.process-toggle{ cursor:pointer; list-style:none; }
.process-toggle::-webkit-details-marker{ display:none; }
.process-toggle-label::after{ content:"Zistiť viac o celom procese ↓"; }
.process-detail[open] .process-toggle-label::after{ content:"Skryť celý proces ↑"; }
.process-detail{ text-align:left; }
.process-detail-body{
  max-width:820px; margin:28px auto 0; background:var(--bg-elevated);
  border:1px solid var(--line); border-radius:var(--radius); padding:6px 32px;
}
.process-item{ display:flex; gap:20px; padding:26px 0; border-bottom:1px solid var(--line); }
.process-item:last-child{ border-bottom:none; }
.process-item-marker{ display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; width:40px; padding-top:2px; }
.process-item-num{ font-family:var(--font-mono); font-size:0.72rem; font-weight:700; color:var(--ink-faint); }
.process-item-icon{ width:22px; height:22px; color:var(--scene-blue); flex-shrink:0; }
.process-item-body h4{ margin:0 0 8px; font-family:var(--font-body); font-weight:800; font-size:1rem; color:var(--ink); }
.process-item-body p{ margin:0; font-size:0.92rem; color:var(--ink-soft); }
@media (max-width:600px){
  .process-detail-body{ padding:4px 18px; }
  .process-item{ gap:14px; }
}

/* ---------- qualify (for / not for) ---------- */
/* ---------- own-software vs. SaaS comparison table ----------
   Two columns side by side (.compare-col-us / .compare-col-them) sharing
   a header row and one row per point, divided by a single vertical rule
   down the middle plus thin horizontal rules between rows. The left
   column reads as the clear "winner" (accent border/background, check
   marks); the right column is deliberately muted, not red/hostile — a
   dash, not an X, and no brand names anywhere. On mobile the two columns
   stack per-row (us above, them below) and each cell grows its own small
   label, since the shared header no longer sits next to a stacked pair. */
.compare-table{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--bg-elevated);
}
.compare-table::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:var(--line); z-index:1;
}
.compare-head{ display:grid; grid-template-columns:1fr 1fr; }
.compare-head-col{
  padding:16px 22px; font-family:var(--font-body); font-weight:800; font-size:0.92rem;
  text-align:center; border-bottom:1px solid var(--line);
}
.compare-head .compare-col-us{ color:var(--scene-blue); background:rgba(var(--scene-blue-rgb),0.07); }
.compare-head .compare-col-them{ color:var(--ink-faint); }

.compare-row{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.compare-row:last-child{ border-bottom:none; }
.compare-cell{
  display:flex; align-items:flex-start; padding:16px 22px;
  font-size:0.9rem; line-height:1.5;
}
.compare-cell .mark{ flex-shrink:0; font-weight:800; margin-top:1px; margin-right:10px; }
.compare-row .compare-col-us{ background:rgba(var(--scene-blue-rgb),0.045); color:var(--ink); font-weight:600; }
.compare-row .compare-col-us .mark{ color:var(--scene-blue); }
.compare-row .compare-col-them{ color:var(--ink-faint); }
.compare-row .compare-col-them .mark{ color:var(--ink-faint); }
.compare-tag{ display:none; }

@media (max-width:767px){
  .compare-table::before{ display:none; }
  .compare-head{ display:none; }
  .compare-row{ grid-template-columns:1fr; }
  .compare-cell{ padding:14px 18px; flex-wrap:wrap; }
  .compare-row .compare-col-them{ border-top:1px dashed var(--line); }
  .compare-tag{
    display:block; flex:0 0 100%; font-family:var(--font-body); font-weight:800;
    font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px;
  }
  .compare-col-us .compare-tag{ color:var(--scene-blue); }
  .compare-col-them .compare-tag{ color:var(--ink-faint); }
}

/* ---------- packages grid (used on service pages) ---------- */
.pkg{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pkg:hover, .pkg.reveal:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--scene-blue); }
.pkg .name{ font-family:var(--font-display); font-weight:700; font-size:0.9rem; text-transform:none; letter-spacing:0; color:var(--accent); margin-bottom:8px; }
.pkg ul{ list-style:none; margin:0 0 16px; padding:0; flex:1; }
.pkg li{ position:relative; padding-left:24px; margin-bottom:10px; font-size:0.92rem; }
.pkg li::before{ content:"\002713"; position:absolute; left:0; color:var(--money); font-weight:800; }
.pkg-group{ margin-bottom:18px; }
.pkg-group:last-child{ margin-bottom:0; }
.pkg-group strong{ display:block; font-size:0.85rem; font-weight:800; color:var(--ink); margin-bottom:8px; }
.pkg-group ul{ margin-bottom:0; }

/* ---------- service cards (hub page — 4 services) ----------
   Same thin-border / lift-on-hover / scene-blue-border language as .pkg,
   reused here as its own component since it's a distinct repeating unit
   (number + name + one-line pitch + link) that shows up on the hub and
   will likely show up again wherever services get cross-linked. */
.services-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:768px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover, .service-card.reveal:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--scene-blue);
}
.service-card .service-card-num{
  font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--scene-blue); margin-bottom:14px;
}
.service-card h3{ margin:0 0 10px; font-family:var(--font-body); font-weight:800; font-size:1.15rem; }
.service-card p{ margin:0 0 20px; color:var(--ink-soft); font-size:0.94rem; flex:1; }
.service-card .service-card-link{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:0.9rem;
  color:var(--scene-blue); text-decoration:none;
}
.service-card .service-card-link:hover{ text-decoration:underline; }

/* ---------- product branches (2-product offer) ---------- */
.branch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:880px){ .branch-grid{ grid-template-columns:1fr; } }
.slot-row{ display:flex; flex-wrap:wrap; gap:10px; }
.slot-btn{ font-family:var(--font-body); font-weight:700; font-size:0.9rem; padding:10px 16px; border:1.5px solid var(--line); border-radius:8px; background:var(--bg-elevated); color:var(--ink); cursor:pointer; transition:border-color .12s ease, background .12s ease, color .12s ease; }
.slot-btn:hover{ border-color:var(--accent); }
.slot-btn.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
.slot-btn.selected::after{ content:" \002713"; }

/* ---------- rezervácia — calendar picker (Krok 1) ---------- */
.calendar-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
@media (max-width:760px){ .calendar-wrap{ grid-template-columns:1fr; } }

.calendar-col{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:14px; padding:24px; }

.calendar-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.calendar-nav-btn{ width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:1.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s ease, color .15s ease; }
.calendar-nav-btn:hover{ border-color:var(--accent); color:var(--accent); }
.calendar-nav-btn:disabled{ opacity:0.3; cursor:not-allowed; }
.calendar-nav-btn:disabled:hover{ border-color:var(--line); color:var(--ink); }
.calendar-title{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }

.calendar-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.calendar-weekdays span{ display:block; text-align:center; font-family:var(--font-mono); font-size:0.68rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.03em; }

.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.calendar-grid.cal-fade-in{ animation:cal-fade .25s ease; }
@keyframes cal-fade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }

.cal-day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid transparent; background:transparent; font-family:var(--font-body); font-size:0.88rem; font-weight:600; color:var(--ink-faint); padding:0; }
.cal-day-empty{ visibility:hidden; }
.cal-day-today{ border-color:var(--accent); }
.cal-day-available{ color:var(--ink); cursor:pointer; transition:background .15s ease, color .15s ease; }
.cal-day-available:hover{ background:rgba(var(--accent-rgb),0.16); color:var(--accent); }
.cal-day-selected{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:800; }
.cal-day-selected:hover{ background:var(--accent); color:#fff; }
.cal-day-disabled{ cursor:not-allowed; opacity:0.45; }

.calendar-empty-note{ font-size:0.8rem; color:var(--ink-faint); text-align:center; margin:14px 0 0; min-height:1.2em; }

.calendar-times{ min-height:160px; }
.calendar-times-placeholder{ color:var(--ink-faint); font-size:0.9rem; }
.calendar-times h4{ font-family:var(--font-body); font-weight:800; font-size:0.95rem; margin:0 0 14px; text-transform:capitalize; }
.calendar-times.cal-times-in{ animation:cal-fade .3s ease; }

/* ---------- rezervácia — form validation ---------- */
.field-error{ display:none; color:var(--accent-dark); font-size:0.78rem; margin-top:6px; font-weight:600; }
.form-row.invalid .field-error{ display:block; }
.form-row.invalid input, .form-row.invalid select, .form-row.invalid textarea{ border-color:var(--accent); }
.form-row input[readonly]{ background:var(--bg-soft); color:var(--ink-soft); cursor:not-allowed; }
.form-row input[type="checkbox"]{ width:auto; }
.form-row-checkbox .checkbox-label{ display:flex; align-items:flex-start; gap:10px; font-weight:500; font-size:0.9rem; text-transform:none; letter-spacing:normal; color:var(--ink-soft); cursor:pointer; }
.checkbox-label input[type="checkbox"]{ margin-top:3px; }
.form-banner-error{ display:none; background:var(--danger-soft); border:1px solid rgba(var(--danger-rgb),.35); border-radius:8px; padding:14px 16px; font-size:0.9rem; margin:16px 0; color:var(--danger); font-weight:600; }
.form-banner-error.show{ display:block; }

/* ---------- rezervácia — confirmation ---------- */
.confirm-card{ max-width:560px; margin:40px auto 0; text-align:center; background:var(--bg-elevated); border:2px solid var(--ink); border-radius:14px; padding:40px 34px; }
.confirm-badge{ width:80px; height:80px; border-radius:50%; border:3px solid var(--money); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.confirm-badge svg{ width:40px; height:40px; }

/* ---------- admin ---------- */
.admin-section{ margin-bottom:64px; }
.admin-toolbar{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin:20px 0 28px; }
.admin-toolbar .form-row{ margin-bottom:0; min-width:150px; }
.admin-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elevated); }
.admin-table{ width:100%; border-collapse:collapse; font-size:0.86rem; }
.admin-table th, .admin-table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; color:var(--ink); }
.admin-table th{ background:var(--bg-soft); font-family:var(--font-mono); font-weight:700; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tbody tr:hover td{ background:var(--bg-soft); }
.admin-table td.wrap{ white-space:normal; max-width:240px; }
.admin-table select{ border:1.5px solid var(--line); border-radius:6px; padding:6px 10px; font-family:var(--font-body); font-size:0.85rem; background:var(--bg-soft); color:var(--ink); }
.admin-table select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.status-badge{ display:inline-block; padding:3px 9px; border-radius:4px; border:1px solid; background:none; font-family:var(--font-mono); font-size:0.72rem; font-weight:700; letter-spacing:0.02em; white-space:nowrap; }
.status-badge.dostupny{ color:var(--money); border-color:var(--money); }
.status-badge.rezervovany{ color:var(--danger); border-color:var(--danger); }
.status-badge.aktivny{ color:var(--money); border-color:var(--money); }
.status-badge.pozastaveny{ color:var(--gold); border-color:var(--gold); }
.status-badge.dokonceny{ color:var(--scene-blue); border-color:var(--scene-blue); }
.status-badge.crm-zaujemca{ color:var(--ink-faint); border-color:var(--ink-faint); }
.status-badge.crm-strategy_call{ color:var(--accent); border-color:var(--accent); }
.status-badge.crm-odoslana_ponuka{ color:var(--gold); border-color:var(--gold); }
.status-badge.crm-uzavrety{ color:var(--money); border-color:var(--money); }
.status-badge.crm-zruseny{ color:var(--danger); border-color:var(--danger); }

/* admin.html — interná sekčná navigácia + CRM statusové taby (assets/js/admin.js) */
.admin-subnav{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 48px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.admin-subnav a{ text-decoration:none; font-family:var(--font-mono); font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-soft); border:1px solid var(--line); border-radius:6px; padding:7px 12px; }
.admin-subnav a:hover{ color:var(--ink); border-color:var(--scene-blue); background:rgba(var(--scene-blue-rgb),0.06); }
.crm-tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.crm-tab{ cursor:pointer; font-family:var(--font-mono); font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-soft); background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; padding:7px 12px; }
.crm-tab:hover{ color:var(--ink); border-color:var(--scene-blue); }
.crm-tab.is-active{ color:var(--bg); background:var(--scene-blue); border-color:var(--scene-blue); }
.crm-row{ cursor:pointer; }
.crm-row.is-open td{ background:var(--bg-soft); box-shadow:inset 2px 0 0 var(--scene-blue); }
.crm-source{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-soft); }
.crm-origin-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; }
.crm-origin-grid span{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.03em; }
.crm-origin-grid p{ margin:4px 0 0; color:var(--ink); font-size:0.9rem; }

/* project rows in the admin "Prehľad zákaziek" table (assets/admin.js) —
   clickable, with the currently-open one visually pinned so it's obvious
   which row the detail panel below belongs to. */
.project-row{ cursor:pointer; }
.project-row.is-open td{ background:var(--bg-soft); box-shadow:inset 2px 0 0 var(--scene-blue); }
.admin-textarea{
  width:100%; min-height:70px; border:1.5px solid var(--line); border-radius:6px;
  padding:10px 12px; background:var(--bg-elevated); color:var(--ink);
  font-family:var(--font-body); font-size:0.9rem; resize:vertical;
}
.admin-textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }

/* ---------- admin: generovanie faktúr (invoices) ---------- */
.inv-sub{
  margin:0 0 10px; font-family:var(--font-body); font-weight:800; font-size:0.82rem;
  color:var(--scene-blue); letter-spacing:0.01em;
}
.inv-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; }
.inv-three-col{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px 20px; }
@media (max-width:720px){ .inv-two-col, .inv-three-col{ grid-template-columns:1fr; } }
#pd-invoice-form .form-row{ margin-bottom:12px; }
#pd-invoice-form .form-row input{
  width:100%; border:1.5px solid var(--line); border-radius:6px; padding:9px 11px;
  font-family:var(--font-body); font-size:0.9rem; background:var(--bg-elevated); color:var(--ink);
}
#pd-invoice-form .form-row input:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.inv-item-row{
  display:grid; grid-template-columns:1fr 90px 110px 96px 34px; gap:8px; align-items:center;
  margin-bottom:8px;
}
.inv-item-row input{
  border:1.5px solid var(--line); border-radius:6px; padding:8px 10px;
  font-family:var(--font-body); font-size:0.88rem; background:var(--bg-elevated); color:var(--ink); width:100%;
}
.inv-item-row input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.inv-riadok-spolu{ font-size:0.85rem; font-weight:700; color:var(--ink); text-align:right; }
.inv-item-remove{ padding:6px 8px; font-size:1.1rem; line-height:1; color:var(--danger); }
@media (max-width:640px){
  .inv-item-row{ grid-template-columns:1fr 1fr; }
  .inv-riadok-spolu{ text-align:left; }
}

.inv-totals{
  margin-top:20px; margin-left:auto; max-width:340px;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-elevated);
}
.inv-totals > div{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:11px 16px; border-top:1px solid var(--line); font-size:0.9rem;
}
.inv-totals > div:first-child{ border-top:none; }
.inv-totals .inv-total-final{
  background:var(--scene-blue); color:#fff; padding:13px 16px;
}
.inv-totals .inv-total-final span{ font-weight:700; }
.inv-totals .inv-total-final strong{ font-size:1.05rem; }

/* ---------- client portal (klient.html) ----------
   Same "internal tool" register as .admin-* above (plain cards, outline
   badges, no filled pills), plus one component unique to this page: the
   6-phase progress tracker, deliberately the most visually prominent
   thing on the page since its entire job is "show the client at a glance
   where their project actually is". Desktop: dots in a row with a filled
   line behind them (width set inline by assets/klient.js from the
   project's current phase index — see renderPhaseTracker()). Mobile: the
   same steps stack vertically with a short vertical connector instead,
   since a horizontal line has no room to read once labels wrap. */
.portal-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.portal-card + .portal-card{ margin-top:28px; }
.portal-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.portal-header h2{ margin:0 0 6px; }
.portal-service{ color:var(--ink-soft); font-size:0.92rem; }

.phase-tracker{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; margin:28px 0 4px; }
.phase-tracker-line{ position:absolute; top:15px; left:26px; right:26px; height:2px; background:var(--line); z-index:0; }
.phase-tracker-fill{ position:absolute; top:15px; left:26px; height:2px; background:var(--scene-blue); z-index:0; transition:width .5s ease; }
.phase-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; text-align:center; padding:0 4px; }
.phase-step-dot{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--line); background:var(--bg-soft); color:var(--ink-faint);
  font-family:var(--font-mono); font-size:0.78rem; font-weight:700;
}
.phase-step.is-done .phase-step-dot{ border-color:var(--scene-blue); background:var(--scene-blue); color:var(--bg); }
.phase-step.is-done .phase-step-dot svg{ width:14px; height:14px; }
.phase-step.is-current .phase-step-dot{ border-color:var(--scene-blue); color:var(--scene-blue); box-shadow:0 0 0 4px rgba(var(--scene-blue-rgb),0.16); }
.phase-step-label{ font-size:0.78rem; font-weight:600; color:var(--ink-faint); max-width:12ch; line-height:1.3; }
.phase-step.is-done .phase-step-label, .phase-step.is-current .phase-step-label{ color:var(--ink); }
@media (max-width:640px){
  .phase-tracker{ flex-direction:column; align-items:stretch; gap:0; margin-top:20px; }
  .phase-tracker-line, .phase-tracker-fill{ display:none; }
  .phase-step{ flex-direction:row; align-items:center; text-align:left; gap:14px; padding:9px 0; }
  .phase-step-label{ max-width:none; }
  .phase-step:not(:last-child){ position:relative; }
  .phase-step:not(:last-child)::after{ content:""; position:absolute; left:14px; top:38px; bottom:-9px; width:2px; background:var(--line); z-index:0; }
  .phase-step.is-done:not(:last-child)::after{ background:var(--scene-blue); }
}

.project-pick-btn{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  font-family:var(--font-body); cursor:pointer; transition:border-color .15s ease;
}
.project-pick-btn:hover{ border-color:var(--scene-blue); }
.project-pick-btn strong{ color:var(--ink); font-size:1rem; }
.project-pick-btn span{ color:var(--ink-faint); font-size:0.85rem; }

.update-row{ padding:14px 0; border-bottom:1px solid var(--line); }
.update-row:last-child{ border-bottom:none; }
.update-row-date{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint); margin-bottom:5px; }
.update-row p{ margin:0; font-size:0.92rem; color:var(--ink); }

.doc-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.doc-row:last-child{ border-bottom:none; }
.doc-row-name{ font-weight:600; font-size:0.92rem; }
.doc-row-date{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint); margin-top:3px; }

.question-card{ border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:14px; background:var(--bg-soft); }
.question-card:last-child{ margin-bottom:0; }
.question-card p.question-text{ margin:0 0 12px; font-weight:600; color:var(--ink); }
.question-card textarea{ width:100%; border:1.5px solid var(--line); border-radius:6px; padding:10px 12px; font-family:var(--font-body); font-size:0.9rem; background:var(--bg-elevated); color:var(--ink); resize:vertical; min-height:70px; }
.question-card textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.question-card .btn{ margin-top:10px; padding:10px 20px; font-size:0.88rem; }
.question-card.is-answered{ background:transparent; opacity:0.8; }
.question-card .answer-text{ margin:8px 0 0; padding-top:10px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:0.9rem; }
.question-card .answered-at{ font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-faint); margin-top:8px; }

/* ---------- guarantee ---------- */
.guarantee{ background:var(--dark); color:#fff; border-radius:16px; padding:48px 40px; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; }
@media (max-width:640px){ .guarantee{ grid-template-columns:1fr; text-align:center; } }
.guarantee-badge{ width:120px; height:120px; border-radius:50%; border:3px solid var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:0 auto; }
.guarantee-badge svg{ width:56px; height:56px; }
.guarantee h3{ color:#fff; margin-bottom:10px; font-family:var(--font-display); font-weight:600; }
.guarantee p{ color:#C1CCDE; margin:0; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding:22px 0; }
.faq-item summary{ cursor:pointer; font-weight:800; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.4rem; color:var(--accent); flex-shrink:0; }
.faq-item[open] summary::after{ content:"\002013"; }
.faq-item p{ margin-top:14px; max-width:66ch; }

/* ---------- "riešenia" two-level accordion ----------
   Level 1 = category (.solu-category): a button+panel accordion, same
   grid-template-rows 0fr/1fr technique and button/panel structure as the
   "ako pracujeme" step-cards, but full-width stacked rows instead of a
   grid, and only one may be open at a time (enforced in script.js).
   Level 2 = item (.solu-item), nested inside the open category's panel:
   its own independent button+panel accordion, reusing the exact same
   initTypingAccordion() typing-reveal logic as the step-cards — no
   duplicate implementation. Multiple items may be open at once. */
.solu-list{ display:flex; flex-direction:column; gap:14px; max-width:820px; margin:0 auto; }

.solu-category{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(165deg, var(--bg-elevated), var(--bg-soft));
  border:1px solid var(--line);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.solu-category:hover{ border-color:rgba(var(--scene-blue-rgb),0.5); }
.solu-category.is-open{ border-color:var(--scene-blue); box-shadow:0 14px 32px -22px rgba(var(--scene-blue-rgb),0.4); }

.solu-category-trigger{
  all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:8px;
  width:100%; padding:22px 24px; cursor:pointer;
}
.solu-category-trigger:focus-visible{ outline:2px solid var(--scene-blue); outline-offset:-2px; border-radius:4px; }
.solu-category-top{ display:flex; align-items:center; gap:14px; width:100%; }
.solu-category-name{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); }
.solu-category-badge{
  font-family:var(--font-mono); font-size:0.7rem; font-weight:700; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:20px; padding:3px 10px; white-space:nowrap;
}
.solu-category-arrow{
  width:18px; height:18px; color:var(--scene-blue); flex-shrink:0; margin-left:auto;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.solu-category-trigger[aria-expanded="true"] .solu-category-arrow{ transform:rotate(180deg); }
.solu-category-pain{ font-size:0.92rem; color:var(--ink-soft); line-height:1.5; }

.solu-category-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1); }
.solu-category-panel.is-open{ grid-template-rows:1fr; }
.solu-category-panel-inner{ overflow:hidden; min-height:0; }
.solu-items{ padding:2px 24px 22px; border-top:1px solid var(--line); margin-top:4px; }

.solu-item{
  border-left:2px solid var(--line); margin:12px 0 0 6px; padding-left:16px;
  background:rgba(var(--ink-rgb),0.04); border-radius:0 8px 8px 0;
  transition:border-color .2s ease, background .2s ease;
}
.solu-item:hover{ border-left-color:rgba(var(--scene-blue-rgb),0.6); }
.solu-item.is-open{ border-left-color:var(--scene-blue); background:rgba(var(--scene-blue-rgb),0.07); }

.solu-item-trigger{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px;
  width:100%; padding:13px 14px 13px 2px; cursor:pointer;
}
.solu-item-trigger:focus-visible{ outline:2px solid var(--scene-blue); outline-offset:2px; border-radius:4px; }
.solu-item-name{ flex:1; font-size:0.92rem; font-weight:700; color:var(--ink); line-height:1.4; }
.solu-item-arrow{
  width:14px; height:14px; color:var(--scene-blue); flex-shrink:0;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.solu-item-trigger[aria-expanded="true"] .solu-item-arrow{ transform:rotate(180deg); }

.solu-item-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1); }
.solu-item-panel.is-open{ grid-template-rows:1fr; }
.solu-item-panel-inner{ overflow:hidden; min-height:0; }
.solu-item-panel-inner p{ margin:0 14px 15px 2px; font-size:0.86rem; color:var(--ink-soft); line-height:1.55; }
.solu-item-panel-inner p .type-char-new{
  color:var(--ink); text-shadow:0 0 8px rgba(var(--scene-blue-rgb),0.55);
  transition:color .2s ease, text-shadow .2s ease;
}

.solu-category.reveal{
  opacity:0; transform:translateY(18px) scale(0.97);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.solu-category.reveal.in{ opacity:1; transform:translateY(0) scale(1); }

@media (max-width:600px){
  .solu-category-trigger{ padding:18px 18px; }
  .solu-items{ padding:2px 14px 16px; }
}

/* ---------- section head ---------- */
.section-head{ max-width:680px; margin:0 auto 48px; text-align:center; }

/* ---------- pain points carousel ---------- */
.pain-carousel{ max-width:620px; margin:0 auto; }
.pain-carousel-viewport{ overflow:hidden; border-radius:0 var(--radius) var(--radius) 0; }
.pain-carousel-track{ display:flex; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.pain-carousel-track .pain-card{ flex:0 0 100%; width:100%; box-sizing:border-box; }
.pain-card{ padding:22px 24px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--bg-elevated); border-radius:0 var(--radius) var(--radius) 0; transition:transform .2s ease, box-shadow .2s ease; min-height:118px; }
.pain-card:hover{ transform:translateY(-3px) translateX(2px); box-shadow:var(--shadow-card); }
.pain-card h4{ font-family:var(--font-body); font-weight:800; margin:0 0 6px; font-size:1rem; }
.pain-card p{ margin:0; font-size:0.92rem; }
.pain-card-list{ margin:0; padding-left:18px; font-size:0.92rem; color:var(--ink); }
.pain-card-list li{ margin:0 0 4px; }
.pain-card-list li:last-child{ margin-bottom:0; }

.pain-carousel-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:18px; }
.pain-carousel-arrow{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--scene-blue);
  cursor:pointer; transition:background .2s ease, border-color .2s ease;
}
.pain-carousel-arrow:hover{ background:rgba(var(--scene-blue-rgb),0.1); border-color:var(--scene-blue); }
.pain-carousel-arrow:focus-visible{ outline:2px solid var(--scene-blue); outline-offset:2px; }
.pain-carousel-dots{ display:flex; align-items:center; gap:8px; }
.pain-carousel-dot{ width:8px; height:8px; padding:0; border:none; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.pain-carousel-dot:hover{ background:var(--ink-faint); }
.pain-carousel-dot.is-active{ background:var(--scene-blue); transform:scale(1.35); }
.pain-carousel-dot:focus-visible{ outline:2px solid var(--scene-blue); outline-offset:2px; }

/* ---------- dark cta band ---------- */
.band-dark{ background:var(--dark); color:#fff; }
.band-dark p{ color:#C1CCDE; }
.cta-band{ text-align:center; }
.cta-band h2{ color:#fff; max-width:18ch; margin:0 auto 16px; }
.cta-band p{ max-width:50ch; margin:0 auto 30px; }
.cta-band .hero-ctas{ justify-content:center; }

/* ---------- booking ---------- */
.form-card{ background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:32px; }
.form-row{ margin-bottom:16px; }
.form-row label{ display:block; font-family:var(--font-display); font-weight:600; font-size:0.88rem; text-transform:none; letter-spacing:0; color:var(--ink); margin-bottom:7px; }
.form-row input, .form-row select, .form-row textarea{ width:100%; border:1.5px solid var(--line); border-radius:6px; padding:12px 14px; font-family:var(--font-body); font-size:0.95rem; background:var(--bg-elevated); color:var(--ink); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form-note{ font-size:0.78rem; color:var(--ink-faint); margin-top:14px; }

/* ---------- footer ----------
   footer-grid-3 is an additive modifier (index.html, rezervacia.html,
   ochrana-udajov.html) for the simplified 3-column layout — the base
   4-column .footer-grid stays untouched since sluzby-*.html/obchodne-
   podmienky.html still use it for their own Produkty/Firma/Kontakt split. */
/* footer is always the inverted indigo band — its palette is fixed
   light-on-dark, never driven by the page --ink tokens (which now equal
   --dark and would vanish here). */
footer{ background:var(--dark); color:#9BABC4; padding:56px 0 24px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
.footer-grid.footer-grid-3{ grid-template-columns:1.4fr 1fr 1fr; }
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid p{ color:#9BABC4; }
.footer-grid h5{ font-family:var(--font-display); font-weight:700; font-size:0.9rem; text-transform:none; letter-spacing:0; color:#fff; margin:0 0 14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ text-decoration:none; color:#9BABC4; font-size:0.92rem; transition:color .15s ease; }
.footer-grid a:hover{ color:#fff; }
.footer-subhead{ font-family:var(--font-display); font-weight:700; font-size:0.8rem; text-transform:none; letter-spacing:0; color:#C1CCDE; margin:0 0 8px; }
.footer-sublist{ margin-bottom:16px; }
.footer-bottom a{ color:#9BABC4; text-decoration:none; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- legal content pages ---------- */
.legal-content{ max-width:760px; margin:0 auto; }
.legal-content .legal-meta{ color:var(--ink-faint); font-size:0.85rem; margin-bottom:40px; }
.legal-content h2{ font-size:1.5rem; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.legal-content h2:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.legal-content h3{ font-size:1.05rem; margin-top:24px; }
.legal-content p, .legal-content li{ color:var(--ink-soft); }
.legal-content ul, .legal-content ol{ padding-left:1.3em; margin:0 0 1em; }
.legal-content li{ margin-bottom:6px; }
.legal-content a{ color:var(--accent); }
.legal-table{ width:100%; border-collapse:collapse; margin:0 0 1.5em; font-size:0.92rem; }
.legal-table th, .legal-table td{ text-align:left; padding:10px 14px; border:1px solid var(--line); color:var(--ink-soft); }
.legal-table th{ background:var(--bg-elevated); color:var(--ink); font-weight:700; }
.footer-logo{ font-family:var(--font-mono); font-weight:700; font-size:0.95rem; letter-spacing:-0.01em; color:#fff; margin-bottom:12px; display:inline-flex; align-items:baseline; gap:0; }
.footer-logo .logo-punct{ color:#6E9BEC; }
.footer-bottom{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; border-top:1px solid rgba(255,255,255,0.12); padding-top:22px; font-size:0.78rem; color:#9BABC4; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

.center{ text-align:center; }

/* ---------- exit-intent / neaktivita popup (assets/exit-popup.js) ---------- */
.exit-popup-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.exit-popup-overlay.show{ opacity:1; pointer-events:auto; }

.exit-popup{
  position:relative;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:16px;
  max-width:440px; width:100%;
  padding:36px 32px;
  box-shadow:var(--shadow-pop);
  transform:scale(.94) translateY(8px);
  opacity:0;
  transition:transform .3s cubic-bezier(.2,.8,.3,1.1), opacity .3s ease;
}
.exit-popup-overlay.show .exit-popup{ transform:scale(1) translateY(0); opacity:1; }

.exit-popup-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
  font-size:1.3rem; line-height:1; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.exit-popup-close:hover{ border-color:var(--accent); color:var(--accent); }

.exit-popup-body h3{ margin:0 0 10px; padding-right:26px; font-size:1.3rem; }
.exit-popup-body p{ margin:0 0 22px; color:var(--ink-soft); font-size:0.92rem; }
.exit-popup-body .form-row{ margin-bottom:14px; }
.exit-popup-body .btn{ margin-top:6px; }

.exit-popup-thanks{ text-align:center; padding:14px 0; }
.exit-popup-thanks svg{ width:48px; height:48px; margin:0 auto 16px; display:block; }
.exit-popup-thanks h3{ margin:0; padding-right:0; }

@media (max-width:520px){
  .exit-popup{ padding:28px 22px; max-width:100%; }
}

/* ---------- planline — the "fixed plan" signature ----------
   Three plotted points on one drawn axis: the promise made visible.
   Used in the hero and reusable on service pages. Static; the accent
   axis draws itself once on load (one orchestrated moment), reduced
   to an instant snap under prefers-reduced-motion by the global rule. */
.planline{
  list-style:none; margin:38px auto 0; padding:0; max-width:660px;
  display:grid; grid-template-columns:repeat(3,1fr); position:relative;
}
.planline::before,
.planline::after{
  content:""; position:absolute; left:calc(100%/6); right:calc(100%/6); top:6px; height:2px;
}
.planline::before{ background:var(--line); }
.planline::after{
  background:var(--accent); transform-origin:left;
  animation:planline-draw 1.1s cubic-bezier(.16,1,.3,1) .35s both;
}
@keyframes planline-draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.planline li{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 10px;
}
.planline-dot{
  width:14px; height:14px; border-radius:50%; background:var(--bg);
  border:2px solid var(--accent); position:relative; z-index:1; margin-bottom:13px;
}
.planline-step{ font-family:var(--font-display); font-weight:700; font-size:0.92rem; color:var(--ink); line-height:1.25; }
.planline-note{ font-size:0.76rem; color:var(--ink-faint); margin-top:4px; max-width:18ch; line-height:1.4; }
.band-dark .planline-step{ color:#fff; }
.band-dark .planline-dot{ background:var(--dark); }
@media (max-width:560px){
  .planline{ grid-template-columns:1fr; gap:20px; max-width:300px; margin-top:30px; }
  .planline::before,.planline::after{ left:6px; right:auto; top:7px; bottom:7px; width:2px; height:auto; }
  .planline::after{ animation-name:planline-draw-v; transform-origin:top; }
  .planline li{ flex-direction:row; align-items:flex-start; text-align:left; gap:14px; padding:0; }
  .planline-dot{ margin-bottom:0; margin-top:3px; flex-shrink:0; }
  .planline-note{ max-width:none; }
}
@keyframes planline-draw-v{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* ============================================================
   v5 HOMEPAGE — "Precision, not decoration"
   Left-aligned single column. Hairline structure, generous
   whitespace, one cobalt accent, directional motion. The hero
   service-index is the signature; everything else stays quiet.
   Scoped .hx-* so it never collides with the older components.
   ============================================================ */

.hx-textlink{
  display:inline-block; font-weight:600; font-size:0.95rem; color:var(--accent);
  text-decoration:none; box-shadow:inset 0 -1px 0 rgba(var(--accent-rgb),0.35);
  transition:box-shadow .2s var(--ease), color .2s var(--ease);
}
.hx-textlink:hover{ color:var(--accent-dark); box-shadow:inset 0 -2px 0 var(--accent-dark); }

/* ---------- hero ---------- */
.hx-hero{
  position:relative; overflow:hidden;
  padding:clamp(48px,8vw,104px) 0 clamp(56px,7vw,88px);
  border-bottom:1px solid var(--line);
}
.hx-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(#D3DAE6 1px, transparent 1px),
    linear-gradient(90deg, #D3DAE6 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 12% -5%, #000, transparent 72%);
  mask-image:radial-gradient(ellipse 75% 75% at 12% -5%, #000, transparent 72%);
  opacity:0.7;
}
.hx-hero > .container{ position:relative; z-index:1; }
.hx-hero-lead{ max-width:820px; }
.hx-hero h1{
  margin:0 0 22px; font-family:var(--font-headline); font-weight:700;
  font-size:clamp(2.3rem,5vw,4rem); line-height:1.04; letter-spacing:-0.03em;
  color:var(--ink); text-wrap:balance;
}
.hx-hero-sub{
  margin:0; font-size:clamp(1.08rem,1.5vw,1.28rem); line-height:1.55;
  color:var(--ink-soft); max-width:52ch;
}
.hx-hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px; margin-top:34px; }

/* hero code terminal */
.hx-hero-terminal{
  margin-top:clamp(32px,4vw,44px); max-width:600px;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--dark); box-shadow:var(--shadow-card);
}
.hx-term-bar{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.08);
}
.hx-term-dot{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,0.22); }
.hx-term-dot:first-child{ background:#FF5F57; }
.hx-term-dot:nth-child(2){ background:#FEBC2E; }
.hx-term-dot:nth-child(3){ background:#28C840; }
.hx-term-title{
  margin-left:8px; font-family:var(--font-mono); font-size:0.74rem;
  letter-spacing:0.02em; color:rgba(255,255,255,0.4);
}
.hx-term-body{
  padding:18px 20px; min-height:154px;
  font-family:var(--font-mono); font-size:0.82rem; line-height:1.85;
}
.hx-hero-terminal .code-line{ white-space:pre; color:rgba(255,255,255,0.82); }
.hx-hero-terminal .code-cursor{
  display:inline-block; width:0.5em; height:1.05em; margin-left:2px;
  vertical-align:-0.18em; background:var(--accent);
  animation:cursor-blink 1s step-end infinite;
}
@media (max-width:480px){
  .hx-term-body{ font-size:0.74rem; padding:16px; }
}

/* the signature: full-width service index rows */
.hx-hero-index{ margin-top:clamp(36px,4.5vw,56px); border-bottom:1px solid var(--line); }
.hx-svc-row{
  display:grid; grid-template-columns:minmax(200px,270px) minmax(0,1fr);
  align-items:baseline; gap:16px 44px;
  padding:24px 16px 24px 12px; border-top:1px solid var(--line);
  text-decoration:none; color:inherit;
  box-shadow:inset 3px 0 0 transparent;
  transition:background .25s var(--ease), box-shadow .25s var(--ease), padding-left .25s var(--ease);
}
.hx-svc-row:hover{
  background:rgba(var(--accent-rgb),0.045);
  box-shadow:inset 3px 0 0 var(--accent); padding-left:22px;
}
.hx-svc-name{
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:-0.01em;
  color:var(--ink); transition:color .2s var(--ease);
}
.hx-svc-row:hover .hx-svc-name{ color:var(--accent); }
.hx-svc-desc{ font-size:0.98rem; color:var(--ink-soft); line-height:1.5; }
@media (max-width:760px){
  .hx-svc-row{ grid-template-columns:1fr; gap:6px; padding:20px 4px 20px 12px; }
  .hx-svc-name{ font-size:1.15rem; }
  .hx-svc-row:hover{ padding-left:16px; }
}

/* ---------- inline CTA strip (repeated through the page) ---------- */
.hx-cta-inline{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px 40px; margin:0 auto; max-width:var(--container);
  padding:28px clamp(22px,4vw,40px);
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius);
}
.hx-cta-inline p{ margin:0; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); }
.hx-cta-inline .btn{ flex-shrink:0; }

/* ---------- trust band — 4 mechanisms, no logos, no stats ---------- */
.hx-trust{ padding:clamp(36px,4.5vw,56px) 0; background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hx-trust-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.hx-trust-item{
  padding:8px clamp(20px,2.4vw,34px); border-left:1px solid var(--line);
}
.hx-trust-item:first-child{ border-left:none; padding-left:0; }
.hx-trust-icon{ display:flex; width:28px; height:28px; color:var(--accent); margin-bottom:16px; }
.hx-trust-icon svg{ width:100%; height:100%; }
.hx-trust-label{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:8px; }
.hx-trust-note{ display:block; font-size:0.9rem; line-height:1.5; color:var(--ink-soft); }
@media (max-width:900px){
  .hx-trust-grid{ grid-template-columns:1fr 1fr; gap:36px 0; }
  .hx-trust-item{ border-left:none; padding-left:0; padding-right:24px; }
  .hx-trust-item:nth-child(2n){ border-left:1px solid var(--line); padding-left:clamp(20px,4vw,34px); }
}
@media (max-width:520px){
  .hx-trust-grid{ grid-template-columns:1fr; gap:28px; }
  .hx-trust-item, .hx-trust-item:nth-child(2n){ border-left:none; padding-left:0; }
}

/* ---------- services — 4 persuasion cards, each its own thematic scene ---------- */
.hx-svc-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.hx-svc-card{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.hx-svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--scene-blue); }
.hx-svc-card > *{ position:relative; z-index:1; }
.hx-svc-card h3{
  margin:0; font-family:var(--font-headline); font-weight:700;
  font-size:clamp(1.3rem,1.9vw,1.6rem); line-height:1.15; letter-spacing:-0.02em;
  color:var(--ink); max-width:18ch;
}
.hx-svc-card-mech{ margin:0; flex:1; color:var(--ink-soft); font-size:0.97rem; line-height:1.6; max-width:44ch; }
.hx-svc-card-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:4px; }

/* per-card thematic scene: sits top-right, low-opacity, pure CSS transform/opacity */
.hx-svc-scene{
  position:absolute; top:-14px; right:-14px; z-index:0;
  width:clamp(128px,15vw,184px); height:auto;
  color:var(--accent); opacity:0.13; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.hx-svc-card:hover .hx-svc-scene{ opacity:0.24; }
.hx-svc-scene .s-edge{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.hx-svc-scene .s-node{ fill:currentColor; }
.hx-svc-scene .s-fill{ fill:currentColor; }

/* 1 · process map — signal propagates node to node */
.s-proc .s-node{ animation:s-ping 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.s-proc .s-node:nth-of-type(2){ animation-delay:.4s; }
.s-proc .s-node:nth-of-type(3){ animation-delay:.8s; }
.s-proc .s-node:nth-of-type(4){ animation-delay:1.2s; }
.s-proc .s-node:nth-of-type(5){ animation-delay:1.6s; }
@keyframes s-ping{ 0%,70%,100%{ opacity:.5; transform:scale(1); } 20%{ opacity:1; transform:scale(1.5); } }

/* 2 · decision flow — branches light up in turn */
.s-ai .s-edge{ opacity:.35; animation:s-branch 4s ease-in-out infinite; }
.s-ai .s-edge:nth-of-type(2){ animation-delay:.5s; }
.s-ai .s-edge:nth-of-type(3){ animation-delay:1s; }
.s-ai .s-edge:nth-of-type(4){ animation-delay:1.5s; }
.s-ai .s-edge:nth-of-type(5){ animation-delay:2s; }
@keyframes s-branch{ 0%,80%,100%{ opacity:.3; } 30%{ opacity:1; } }

/* 3 · wireframe — content blocks fill in */
.s-web .s-fill{ animation:s-blk 3s ease-in-out infinite; }
.s-web .s-fill:nth-of-type(2){ animation-delay:.35s; }
.s-web .s-fill:nth-of-type(3){ animation-delay:.7s; }
.s-web .s-fill:nth-of-type(4){ animation-delay:1.05s; }
@keyframes s-blk{ 0%,100%{ opacity:.3; } 50%{ opacity:.95; } }

/* 4 · data — bars rise, trend line draws */
.s-data .s-bar{ fill:currentColor; transform-box:fill-box; transform-origin:bottom; animation:s-bar 5s var(--ease) infinite; }
.s-data .s-bar:nth-of-type(2){ animation-delay:.3s; }
.s-data .s-bar:nth-of-type(3){ animation-delay:.6s; }
.s-data .s-bar:nth-of-type(4){ animation-delay:.9s; }
@keyframes s-bar{ 0%,12%{ transform:scaleY(.12); } 60%,100%{ transform:scaleY(1); } }
.s-data .s-trend{ fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:220; stroke-dashoffset:220; animation:s-draw 5s var(--ease) infinite; }
@keyframes s-draw{ 0%,10%{ stroke-dashoffset:220; } 65%,100%{ stroke-dashoffset:0; } }

@media (max-width:820px){ .hx-svc-cards{ grid-template-columns:1fr; } }

/* ---------- free-offer sections (replaces the old "pain" pattern) ---------- */
/* index: overview of the four free offers */
.hx-free-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.hx-free-grid li{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius);
  border-top:3px solid var(--money); padding:22px 20px;
}
/* ktorej služby sa bezplatný krok týka — malý vecný štítok / odkaz,
   sentence-case, bez verzálok a bez trackingu (žiadny generický eyebrow) */
.hx-free-grid li .hx-free-tag{
  display:inline-block; margin-bottom:11px;
  font-family:var(--font-body); font-size:0.72rem; font-weight:600; letter-spacing:0;
  color:var(--ink-faint); text-decoration:none;
  border:1px solid var(--line); border-radius:5px; padding:2px 8px;
  transition:color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.hx-free-grid li .hx-free-tag:hover{
  color:var(--accent); border-color:rgba(var(--accent-rgb),0.4); background:rgba(var(--accent-rgb),0.05);
}
.hx-free-grid h3{ margin:0 0 8px; font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink); }
.hx-free-grid p{ margin:0; font-size:0.9rem; line-height:1.5; color:var(--ink-soft); }
@media (max-width:900px){ .hx-free-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .hx-free-grid{ grid-template-columns:1fr; } }

/* product pages: one focused free-offer card */
.hx-free-card{
  max-width:720px; margin:0 auto; text-align:center;
  background:var(--bg-elevated); border:1px solid var(--line); border-top:3px solid var(--money);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:clamp(32px,5vw,52px);
}
.hx-free-card h2{ margin:0 0 16px; }
.hx-free-card p{ margin:0 auto 14px; max-width:58ch; color:var(--ink-soft); }
.hx-free-card p:last-of-type{ font-size:0.92rem; color:var(--ink-faint); }
.hx-free-card .btn{ margin-top:16px; }

/* ---------- case studies ---------- */
.hx-case-grid{ display:grid; gap:28px; }
.hx-case{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--bg-elevated); cursor:pointer;
  transition:box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.hx-case:hover{ box-shadow:var(--shadow-card); border-color:rgba(var(--accent-rgb),0.35); transform:translateY(-2px); }

.hx-case-media{
  --tint:var(--accent-rgb);
  position:relative; overflow:hidden; min-height:340px; padding:56px 28px 44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; border:0; border-right:1px solid var(--line); border-radius:0;
  font:inherit; text-align:left; cursor:pointer;
  background:
    radial-gradient(90% 70% at 50% 60%, rgba(var(--tint),0.14), transparent 70%),
    linear-gradient(180deg, #FAFBFC 0%, #EEF1F5 100%);
}
.hx-case-media::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(20,32,58,0.16) 1px, transparent 1.3px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, #000 20%, transparent 80%);
          mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, #000 20%, transparent 80%);
}
@media (min-width:761px){
  .hx-case:nth-child(even){ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .hx-case:nth-child(even) .hx-case-media{ order:2; border-right:0; border-left:1px solid var(--line); }
}
.hx-case-media--phone{ --tint:155,28,20; }
.hx-case-media--laptop{ --tint:47,122,98; }

.hx-case-status{
  position:absolute; top:16px; left:16px; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 11px 6px 10px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,0.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--font-mono); font-size:0.7rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink);
  box-shadow:0 4px 12px -6px rgba(20,32,58,0.18);
}
.hx-case-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:#E0A526; box-shadow:0 0 0 3px rgba(224,165,38,0.2); }
.hx-case-cta{
  position:absolute; right:16px; bottom:14px; z-index:1;
  font-size:0.8rem; font-weight:600; color:var(--accent);
  transition:transform .3s var(--ease);
}
.hx-case:hover .hx-case-cta{ transform:translateX(3px); }

/* Medi Ready — mobil s logom */
.hx-case-phone{
  position:relative; display:grid; place-items:center;
  width:clamp(128px,14vw,164px); aspect-ratio:9/19.5; padding:0 10px;
  background:#000; border:6px solid #15181E; border-radius:30px;
  box-shadow:0 0 0 1px rgba(20,32,58,0.12), 0 28px 44px -20px rgba(20,32,58,0.5);
  transition:transform .4s var(--ease);
}
.hx-case-phone::before{ content:""; position:absolute; top:8px; left:50%; width:30%; height:10px; border-radius:6px; background:#15181E; transform:translateX(-50%); }
.hx-case-phone img{ width:100%; }
.hx-case:hover .hx-case-phone{ transform:translateY(-6px) rotate(-2deg); }

/* LeadEngine — notebook s bielou obrazovkou a logom */
.hx-case-laptop{ position:relative; width:clamp(230px,28vw,340px); transition:transform .4s var(--ease); }
.hx-case-laptop-screen{
  display:flex; align-items:center; justify-content:center; gap:10px;
  aspect-ratio:16/10; background:#fff;
  border:8px solid #15181E; border-top-width:12px; border-radius:12px 12px 3px 3px;
  font-family:var(--font-headline); font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:700; letter-spacing:-0.01em; color:#1C1D1B;
}
.hx-case-laptop-screen i{ display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#2F7A62; }
.hx-case-laptop::after{
  content:""; display:block; height:11px; margin:0 -9%;
  background:linear-gradient(180deg, #DDE1E7, #AEB4BE); border-radius:0 0 14px 14px;
  box-shadow:0 26px 40px -20px rgba(20,32,58,0.5);
}
.hx-case:hover .hx-case-laptop{ transform:translateY(-6px); }

.hx-case-body{ padding:clamp(28px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.hx-case-body h3{ margin:0 0 12px; font-family:var(--font-headline); font-weight:700; font-size:clamp(1.5rem,2.2vw,1.85rem); letter-spacing:-0.02em; }
.hx-case-body > p{ margin:0 0 26px; color:var(--ink-soft); line-height:1.65; max-width:58ch; }
.hx-case-result{ margin:0 0 26px; padding:18px 0 0; border-top:1px solid var(--line); }
.hx-case-result dt{ font-family:var(--font-mono); font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.hx-case-result dd{ margin:0; color:var(--ink); font-size:0.95rem; line-height:1.55; }
.hx-case-body .hx-textlink{ align-self:flex-start; }
@media (max-width:760px){
  .hx-case{ grid-template-columns:1fr; }
  .hx-case-media{ min-height:280px; border-right:0; border-bottom:1px solid var(--line); }
}

/* ukážka po rozkliknutí case study */
.hx-case-dialog{ width:min(1100px,94vw); max-height:94vh; padding:0; border:0; border-radius:var(--radius); background:var(--bg-elevated); overflow:hidden; box-shadow:var(--shadow-pop); }
.hx-case-dialog::backdrop{ background:rgba(0,0,0,.6); }
.hx-case-dialog[open]{ animation:case-pop .35s cubic-bezier(.2,.8,.3,1.1); }
@keyframes case-pop{ from{ opacity:0; transform:scale(.94) translateY(8px); } }
.hx-case-dialog-head{ padding:18px 64px 16px 24px; border-bottom:1px solid var(--line); }
.hx-case-dialog-head h3{ margin:0 0 4px; font-size:1.2rem; }
.hx-case-dialog-head p{ margin:0; font-size:0.9rem; color:var(--ink-soft); }
.hx-case-dialog iframe{ display:block; width:100%; aspect-ratio:12/7; max-height:calc(94vh - 90px); border:0; background:#F6F7F4; }

/* ---------- section head, left-aligned variant ---------- */
.hx-head{ max-width:640px; margin:0 0 clamp(36px,5vw,56px); }
.hx-head h2{ margin:0 0 14px; }
.hx-head p{ margin:0; font-size:1.05rem; color:var(--ink-soft); line-height:1.55; }

/* narrow reading column, left-aligned to the section margin (not centered) */
.hx-narrow{ max-width:760px; }

/* footer mark must read on the dark ground */
footer .footer-logo{ color:#EAF0FF; }
footer .footer-logo .logo-punct{ color:var(--accent); }

@media (max-width:560px){
  .hx-hero h1{ font-size:clamp(1.95rem,7.5vw,2.5rem); }
  .hx-cta-inline{ flex-direction:column; align-items:stretch; text-align:left; }
  .hx-cta-inline p{ text-align:left; }
  .hx-cta-inline .btn{ width:100%; }
  .hx-service-actions{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hx-service-actions .btn{ width:100%; }
}

/* ============================================================
   PRODUCT PAGES — simplified Grand-Slam flow
   problem->value pairs · value stack · compact timeline
   ============================================================ */

/* 2 · problem -> value */
.hx-pv{ max-width:900px; margin:0 auto; display:grid; gap:14px; }
.hx-pv-row{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.hx-pv-pain{ margin:0; padding:22px 24px; background:var(--bg-soft); color:var(--ink-soft); font-size:0.98rem; line-height:1.55; }
.hx-pv-gain{
  margin:0; padding:22px 24px; background:var(--bg-elevated); color:var(--ink);
  font-weight:600; font-size:0.98rem; line-height:1.55; box-shadow:inset 3px 0 0 var(--accent);
}
@media (max-width:640px){
  .hx-pv-row{ grid-template-columns:1fr; }
  .hx-pv-gain{ box-shadow:inset 0 3px 0 var(--accent); }
}

/* 3 · value stack */
.hx-stack{
  list-style:none; margin:0 auto; padding:0; max-width:720px;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-elevated);
}
.hx-stack li{
  display:flex; gap:16px; align-items:flex-start;
  padding:18px 24px; border-top:1px solid var(--line);
}
.hx-stack li:first-child{ border-top:none; }
.hx-stack li::before{
  content:""; flex:0 0 22px; margin-top:2px; width:22px; height:22px; border-radius:50%;
  background:rgba(var(--money-rgb),0.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C5A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:14px; background-position:center; background-repeat:no-repeat;
}
.hx-stack li > div{ min-width:0; }
.hx-stack b{ display:block; color:var(--ink); font-size:1rem; font-weight:700; }
.hx-stack span{ display:block; margin-top:3px; font-size:0.92rem; color:var(--ink-soft); line-height:1.5; }
.hx-stack li.is-free{ background:rgba(var(--money-rgb),0.06); box-shadow:inset 3px 0 0 var(--money); }
.hx-stack-cta{
  max-width:720px; margin:28px auto 0; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:16px 32px;
}
.hx-stack-cta p{ margin:0; font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--ink); max-width:36ch; }
@media (max-width:560px){
  .hx-stack-cta{ flex-direction:column; align-items:stretch; }
  .hx-stack-cta .btn{ width:100%; }
}

/* 4 · compact horizontal timeline */
.hx-timeline{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr);
}
.hx-timeline li{ position:relative; padding:0 14px; }
.hx-timeline li::before{
  content:""; position:absolute; top:15px; left:0; right:0; height:2px; background:var(--line); z-index:0;
}
.hx-timeline li:first-child::before{ left:50%; }
.hx-timeline li:last-child::before{ right:50%; }
.hx-tl-num{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; margin-bottom:16px;
  background:var(--bg); border:2px solid var(--accent);
  font-family:var(--font-mono); font-size:0.78rem; font-weight:700; color:var(--accent);
}
.hx-timeline h4{ margin:0 0 6px; font-family:var(--font-body); font-weight:800; font-size:0.92rem; color:var(--ink); }
.hx-timeline p{ margin:0; font-size:0.82rem; line-height:1.45; color:var(--ink-soft); }
@media (max-width:860px){
  .hx-timeline{ grid-template-columns:1fr 1fr 1fr; row-gap:34px; }
  .hx-timeline li:nth-child(3)::before,
  .hx-timeline li:last-child::before{ right:50%; }
  .hx-timeline li:nth-child(4)::before,
  .hx-timeline li:first-child::before{ left:50%; }
}
@media (max-width:520px){
  .hx-timeline{ grid-template-columns:1fr; row-gap:0; }
  .hx-timeline li{ display:grid; grid-template-columns:32px 1fr; gap:0 16px; padding:0 0 26px 0; }
  .hx-timeline li::before{ top:0; bottom:0; left:15px; right:auto; width:2px; height:auto; }
  .hx-timeline li:first-child::before,.hx-timeline li:last-child::before,
  .hx-timeline li:nth-child(3)::before,.hx-timeline li:nth-child(4)::before{ left:15px; right:auto; }
  .hx-timeline li:last-child::before{ bottom:auto; height:16px; }
  .hx-tl-num{ margin-bottom:0; }
  .hx-timeline h4{ margin-top:5px; }
  .hx-timeline h4, .hx-timeline p{ grid-column:2; }
}