/* ===== Sklyvo, the static build ===== */
:root {
  --blue: #02a7ff;
  --blue-dark: #0271b8;
  --blue-deep: #0a3670;
  --blue-night: #07182b;
  --grad: linear-gradient(90deg, #02a7ff, #0271b8);
  --line: #1f1f1f;
  --line2: rgba(255, 255, 255, 0.2);
  --txt: #ffffff;
  --txt70: rgba(255, 255, 255, 0.7);
  --txt50: rgba(255, 255, 255, 0.5);
  --txt40: rgba(255, 255, 255, 0.4);
  --dim: #4d4d4d;
  --panel: #0d0d0d;
  /* --sans/--body/--ui/--mono definuje shared/typography.css, který
     načítá landing i workspace. Tady schválně NEJSOU, aby se to nerozešlo. */
}

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

/* Označení textu. Bez tohohle svítí na černém podkladu systémová modrá,
   která s paletou nesouvisí a mezi prohlížeči se liší. Hodnota je stejná
   jako `.sklyvo-app ::selection` v app-ui.css, ať výběr vypadá všude
   stejně — na landingu, na přihlášení i uvnitř aplikace. */
::selection {
  background: color-mix(in oklab, var(--blue) 55%, transparent);
  color: #fff;
}
::-moz-selection {
  background: color-mix(in oklab, var(--blue) 55%, transparent);
  color: #fff;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overscroll-behavior: none;
}
body {
  background: #000;
  color: var(--txt);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
}
img { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }

.frame {
  max-width: 1200px;
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  position: relative;
}

/* corner ticks — centered on the line crossings, outlined in the same color as the lines */
.tk {
  position: absolute;
  width: 12px; height: 12px;
  background: #000;
  border: 1px solid var(--line);
  z-index: 5;
  /* own compositing layer, so nothing underneath can repaint it */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.tk.tl { left: -6.5px; top: -6.5px; }
.tk.tr { right: -6.5px; top: -6.5px; }
.tk.bl { left: -6.5px; bottom: -6.5px; }
.tk.br { right: -6.5px; bottom: -6.5px; }
.nav-line-in .tk.tl { left: -5.5px; }
.nav-line-in .tk.tr { right: -5.5px; }

/* a rule drawn as someone's border-top cannot always host its own ticks: the
   footer wordmark clips its box, and a tick hangs 6.5px outside it. This is a
   zero-height row placed directly above such a rule, so its own top edge falls
   exactly on it — the same trick .nav-line-in uses under the header. */
.tk-rule { position: relative; height: 0; }

/* The problem cards, rebuilt to the Framer "Progress" recipe. Card 1 is dots
   only. Card 2 traces the square, card 3 the X-with-square plus a diamond on
   its own beat. Dash and gap both equal the whole path and the offset runs a
   full two lengths per 1.6 s cycle, so each shape is wiped away and redrawn in
   one continuous forward sweep — never a back-and-forth. The stroke is 40 %
   white inside a half-opacity group, which is why it sits so quietly. */
.pgfx .trace path {
  fill: none;
  stroke: rgba(255, 255, 255, .4);
  stroke-width: .8;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.pgfx .tr-sq {
  stroke-dasharray: 448.0 448.0;
  animation: hiw-sweep-sq 3.2s cubic-bezier(.44, 0, .56, 1) infinite;
}
@keyframes hiw-sweep-sq {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -896.0; }
}
/* Card 3 is four separate strokes — two diagonals, the square, the diamond —
   each carrying its own length in --l and all sweeping in parallel on one
   clock. As one path they were swept in sequence, and the jump from the end
   of one stroke to the start of the next is what felt clumsy. */
.pgfx .t3 {
  stroke-dasharray: var(--l) var(--l);
  animation: hiw-sweep3 4.8s cubic-bezier(.44, 0, .56, 1) infinite;
}
@keyframes hiw-sweep3 {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: calc(var(--l) * -2); }
}
@media (prefers-reduced-motion: reduce) {
  .pgfx .trace path { animation: none; stroke-dashoffset: 0; }
}

/* the heading's line break lives exactly as long as the stats above it sit
   four in a row; the moment they fold to two per row (1000px), it goes */
.br-xl { display: none; }
@media (min-width: 1001px) { .br-xl { display: inline; } }

/* the label lays its children out as flex items with a 10px gap; the counter
   span must dissolve into the text run, or the gap lands around the number */
#seatsLeft { display: contents; }

/* stripes divider */
.stripes {
  height: 60px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* the moving stripes live in their own clipped layer and are animated with
   transform, so they are composited and never repaint the ticks on top */
.stripes-fill {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.stripes-fill::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(100% + 22px);
  background-image: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.05) 0 8px, transparent 8px 18px);
  animation: stripes-move 1s linear infinite;
  will-change: transform;
}
@keyframes stripes-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-21.973px); }
}
@media (prefers-reduced-motion: reduce) {
  .stripes-fill::before { animation: none; }
}

/* reveal-on-scroll animation removed: content is simply always visible */

/* ===== shared bits ===== */
.label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  background-image:
    linear-gradient(100deg, rgba(110, 203, 255, 0) 38%, #6ecbff 50%, rgba(110, 203, 255, 0) 62%),
    linear-gradient(90deg, #0271b8, #02a7ff);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 100% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: labelShine 9s ease-in-out infinite;
}
/* the hero label holds its shine back until the seats counter lands on 27;
   dropping the class starts the cycle from zero, so the first pass sweeps
   right after the landing and then loops as everywhere else */
.label.shine-wait { animation: none; }
@keyframes labelShine {
  0%, 6%    { background-position: 100% 0, 0 0; }
  56%, 100% { background-position: 0% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .label { animation: none; }
}
.label .pixgl { flex: none; }
h1 { font-family: var(--sans); font-size: 54px; font-weight: 400; line-height: 1.1; }
h2 { font-family: var(--sans); font-size: 44px; font-weight: 400; line-height: 1.2; }
.sec-head { padding: 96px 40px 72px; }
.sec-head h2 { margin-top: 28px; max-width: 980px; }
.sec-head .dim { color: rgba(255, 255, 255, 0.4); }

/* Jediné, co má .btn-white navíc oproti sdílené definici. */
.btn-white img { width: 24px; height: 24px; }

.btn-outline {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 12px;
  min-height: 38px;
  border: 0;
  border-radius: var(--sk-radius);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: var(--mono); font-size: 14px; font-weight: 500; line-height: 1;
  letter-spacing: normal; text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  overflow: clip;
  transition: background .2s;
}

/* the header button's chevron slides a touch right under the pointer */
.btn-outline .btn-arrow { transition: transform .2s ease; }
.btn-outline:hover .btn-arrow { transform: translateX(3px); }

/* arrow: 14x12 white shape masked inside a 20x20 box */
.btn-arrow {
  width: 20px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.btn-arrow::before {
  content: "";
  width: 14px; height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12' fill='none'><path d='M1 6h10M7.2 2.2 11 6l-3.8 3.8' stroke='white' stroke-width='1.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12' fill='none'><path d='M1 6h10M7.2 2.2 11 6l-3.8 3.8' stroke='white' stroke-width='1.5'/></svg>") center / contain no-repeat;
}

.btn-dark {
  display: flex; align-items: center; justify-content: center;
  height: 48px;
  background: #161616;
  border: 1px solid var(--line);
  border-radius: var(--sk-radius);
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s;
}

.btn-blue {
  display: flex; align-items: center; justify-content: space-between;
  height: 47px;
  /* a shade deeper at the right hand end, so the arrow sits on slightly
     darker blue than the label does */
  background: linear-gradient(90deg, #02a7ff 0%, #0271b8 70%, #0264a3 100%);
  color: #000;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: normal; text-transform: uppercase;
  padding: 6px 6px 6px 24px;
  border-radius: var(--sk-radius);
}
.btn-blue img { width: 35px; height: 35px; }
.btn-blue:hover { filter: brightness(1.06); }

/* ===== the arrow marches across its field, a pixel at a time =====
   The glyph is a nine by nine field of dots with the arrow picked out in white.
   Nothing here moves the shape; script.js does that, by taking .on off the
   column the arrow is leaving and putting it on the one it is entering. All the
   CSS owes it is the two states and a short fade between them, short enough
   that the step still reads as a step and not as a slide. */

.sq { display: inline-block; width: 8px; height: 8px; background: var(--blue); flex: none; }

/* ===== NAV ===== */
.nav {
  position: fixed; inset: 0 0 auto 0;
  height: 66px;
  background: #000;
  z-index: 100;
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  height: 100%;
  display: flex; align-items: center;
}
.nav-slash { height: 14px; margin: 0 22px 0 20px; opacity: .6; }
.nav-links { display: flex; gap: 34px; }
.nav-links a {
  font-family: var(--mono); font-size: 13px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase;
  color: #cfd0d0;
  transition: color .2s;
}
.nav-links a:hover { color: #fff; }
.nav-inner .btn-outline { margin-left: auto; }

/* fixed rule under the header, edge to edge, with connectors on the frame corners */
.nav-line {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--line);
  /* the mobile menu is a sibling inside this same header at z-index 99; the
     line and its corner ticks must stay above it, or the menu's black panel
     covers the line and slices the ticks in half */
  z-index: 100;
}
.nav-line-in {
  position: relative;
  margin: 0 auto;
  width: min(1200px, calc(100% - 24px));
  height: 0;
}

/* ===== HERO ===== */
.hero {
  display: grid; grid-template-columns: 1fr 1fr;
  padding-top: 66px;
  min-height: 715px;
}
.hero-left {
  padding: 84px 40px 64px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero-left h1 { margin-top: 26px; }
.hero-p { margin-top: auto; padding-top: 48px; max-width: 470px; font-size: 16px; line-height: 26px; color: var(--txt70); }
.hero-left .btn-white { margin-top: 26px; }
.hero-right {
  position: relative;
  border-left: 1px solid var(--line);
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.hero-right::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(45% 35% at 88% 12%, rgba(2, 120, 200, 0.95), transparent 70%),
    radial-gradient(55% 40% at 15% 55%, rgba(2, 120, 200, 0.8), transparent 70%),
    radial-gradient(60% 35% at 70% 96%, rgba(2, 120, 200, 0.85), transparent 70%);
  mix-blend-mode: multiply;
}
.workflow-card {
  position: relative;
  width: 397px;
  margin: 0;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 0;
}
.wf-head {
  height: 52px;
  padding: 16px 24px;
  font-family: var(--ui); font-size: 13px; font-weight: 500; line-height: 20px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--line);
}
.wf-steps { padding: 14px 24px; position: relative; }
.wf-steps li {
  display: flex; align-items: center; gap: 12px;
  height: 46px;
  font-family: var(--ui); font-size: 14px; line-height: 22px;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  transition: color .4s;
}
/* The sequence, plainly: the small white dot swells until it fills its ring,
   the tick fades in on the white disc, the text lifts to white; then the
   white line runs down the connector to the next step and it all repeats.
   The dim connector is ::before, the travelled white part is ::after growing
   from the top. The tick is its own layer (::before of the icon), so nothing
   is ever swapped mid-air — no flash, no stray square. */
.wf-steps li + li::before {
  content: ""; position: absolute;
  left: 9px; top: -13px; width: 2px; height: 26px;
  background: rgba(255, 255, 255, 0.15);
}
.wf-steps li + li::after {
  content: ""; position: absolute;
  left: 9px; top: -13px; width: 2px; height: 26px;
  background: #fff;
  transform: scaleY(0);
  transform-origin: top;
}
.wf-steps li.link::after {
  transform: scaleY(1);
  transition: transform 1.1s linear;
}
.wf-ic {
  width: 20px; height: 20px; flex: none;
  border-radius: 99px;
  background: #1f1f1f;
  position: relative;
}
.wf-ic::after {
  content: ""; position: absolute; inset: 6px;
  border-radius: 50%; background: #d5d5d5;
  transition: inset .28s cubic-bezier(.3, .7, .4, 1), background .28s;
}
.wf-ic::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5.4 10.3l3.1 3.2 6.2-6.8" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 15px no-repeat;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .22s ease .16s, transform .22s cubic-bezier(.22, 1, .36, 1) .16s;
}
.wf-steps li.done { color: #fff; }
.wf-steps li.done .wf-ic::after { inset: 0; background: #fff; }
.wf-steps li.done .wf-ic::before { opacity: 1; transform: scale(1); }
.wf-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 16px 24px 21px;
  border-top: 1px solid var(--line);
  font-family: var(--ui); font-size: 11px; line-height: 16.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* ===== STATS ===== */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  position: relative;
}
.stat { padding: 20px 40px 24px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-num { font-family: var(--sans); font-size: 32px; line-height: 40px; }
.stat-lab { margin-top: 10px; font-family: var(--ui); font-size: 14px; color: var(--txt70); }

/* ===== PROBLEM ===== */
.problem .sec-head { padding-bottom: 88px; }
.problem-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.pcard { padding: 40px; min-height: 430px; display: flex; flex-direction: column; }
.pcard + .pcard { border-left: 1px solid var(--line); }
.pgfx { width: 170px; height: 200px; margin-bottom: auto; }
.pcard h3 { font-family: var(--body); font-size: 16px; font-weight: 600; margin-top: 46px; }
.pcard p { font-family: var(--ui); font-size: 14px; line-height: 22px; color: var(--txt70); margin-top: 8px; max-width: 330px; }

/* ===== SOLUTION ===== */
.solution { display: grid; grid-template-columns: 1fr 1fr; }
.sol-left { padding: 100px 60px 100px 40px; }
.sol-left h2 { margin-top: 28px; }
.sol-p { margin-top: 22px; font-size: 16px; line-height: 26px; color: var(--txt70); max-width: 500px; }
.sol-list { margin-top: 44px; }
.sol-list li {
  display: flex; align-items: center; gap: 16px;
  font-size: 16px; padding: 10px 0;
}
.sol-list li::before { content: ""; width: 9px; height: 9px; background: linear-gradient(180deg, #4cc4ff, #0271b8); flex: none; }
/* interactive dash field behind the terminal */
.dash-field {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.sol-right .terminal { position: relative; z-index: 1; }

.sol-right {
  border-left: 1px solid var(--line);
  position: relative;
  z-index: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  min-height: 640px;
}
.terminal {
  width: 456px; min-height: 326px;
  background: #000;
  border: 1px solid var(--line);
  padding: 36px 42px;
  font-family: "Fragment Mono", var(--mono); font-size: 14px; line-height: 21px;
}
.t-line { min-height: 21px; margin-bottom: 9px; }
.t-dim, .t-arr { color: var(--txt50); }
.t-key { color: #fff; }
.t-val { color: var(--blue); }
.t-cursor { color: #cfd6cf; animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

/* ── Podlaha šířky ────────────────────────────────────────────────────
   Pod 360 px se landing přestane zmenšovat a začne se scrollovat do
   strany. Stejná logika jako ve workspace: dva stavy, mezi nimi scroll,
   ne mačkání. */
body {
  min-width: 360px;
}

/* ===== WHAT WE BUILD ===== */
.build-grid {
  display: grid; grid-template-columns: 340px 1fr;
  border-top: 1px solid var(--line);
  align-items: start;
}
.build-menu { padding: 46px 40px; position: sticky; top: 106px; }
/* the menu items are boxes now, and the blue line under the active one is a
   scroll progress bar: script.js feeds it --bmp as you move through the
   panel, so it fills with the scroll and hands over to the next item */
.bm-list { border: 1px solid var(--line); }
.bm-item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--txt40);
  transition: color .25s;
}
.bm-item:last-child { border-bottom: 0; }
.bm-item .sq { width: 7px; height: 7px; background: #3c3c3c; }
.bm-item { position: relative; }
.bm-item.is-active { color: #fff; }
.bm-item.is-active .sq { background: linear-gradient(180deg, #4cc4ff, #0271b8); }
.bm-item::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: var(--blue);
  transform: scaleX(var(--bmp, 0)); transform-origin: left;
}
.build-menu .btn-white { margin-top: 44px; }
.build-panels { border-left: 1px solid var(--line); }
.panel {
  position: relative;
  z-index: 0;
  min-height: 530px;
  padding: 52px 40px;
  overflow: hidden;
  background: #000;
}
/* The wash belongs behind the visual on the right, not under the copy. The
   image carries its pattern on its own left and fades out to the right, so
   right aligning it inside a band of the visual's width crops the densest part
   away; the mask fades that cut edge out instead of leaving a seam. */
.panel::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  /* the visual is 430 wide and sits 30 from the right */
  width: 490px;
  background-image:
    radial-gradient(circle, #161616 1.1px, transparent 1.6px),
    radial-gradient(circle, #101010 1.1px, transparent 1.6px);
  background-size: 9px 9px, 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 22%),
    repeating-linear-gradient(-55deg, rgba(0, 0, 0, .1) 0 70px, #000 140px 210px, rgba(0, 0, 0, .1) 280px);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 22%),
    repeating-linear-gradient(-55deg, rgba(0, 0, 0, .1) 0 70px, #000 140px 210px, rgba(0, 0, 0, .1) 280px);
  mask-composite: intersect;
  /* below every child, above the panel's own black. At z-index 0 the wash is a
     positioned element, so once the layout stacks and the cards turn static
     they paint underneath it and read as transparent; -1 puts the wash where
     it belongs at every width, with the cards' own black on top of it. */
  z-index: -1;
  pointer-events: none;
}
.stripes-in { border-left: none; }
.panel-txt { position: relative; z-index: 2; }
.panel h3 { font-family: var(--sans); font-size: 24px; font-weight: 400; line-height: 32px; }
.panel h3 span { color: rgba(255, 255, 255, 0.6); }
.panel p { margin-top: 14px; font-family: var(--ui); font-size: 14px; line-height: 22px; color: var(--txt70); max-width: 300px; }
.chips { position: absolute; left: 40px; bottom: 48px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 320px; z-index: 2; }
.chips span {
  border: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.8);
  font-family: var(--ui); font-size: 14px; color: var(--txt70);
  padding: 9px 15px;
  border-radius: var(--sk-radius);
}

.tile {
  width: 56px; height: 56px; flex: none;
  background: #101010;
  border: 1px solid #2c2c2c;
  border-radius: var(--sk-radius);
  display: flex; align-items: center; justify-content: center;
}
.tile svg, .tile img { width: 24px; height: 24px; }
.tile-lg { width: 66px; height: 66px; }
.tile-lg svg { width: 28px; height: 28px; }

/* panel 1 visual */
.p1-visual { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 430px; height: 300px; }
.p1-icons { position: absolute; left: 58px; top: 28px; height: calc(100% - 56px); display: flex; flex-direction: column; justify-content: space-between; }
.p1-bolt { position: absolute; left: 165px; top: 50%; transform: translateY(-50%); }
/* the boxes wear the same coat as the mail tiles: top-lit gradient, sharp
   corners, a border that fades the same way */
.p1-visual .tile {
  background: linear-gradient(180deg, #191919 0%, #000 100%);
  border: 1px solid #1f1f1f;
  border-image: linear-gradient(180deg, #333 0%, #1f1f1f 100%) 1;
  border-radius: 0;
}
.p1-check {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: linear-gradient(180deg, #191919 0%, #000 100%);
  border: 1px solid #1f1f1f;
  border-image: linear-gradient(180deg, #333 0%, #1f1f1f 100%) 1;
  padding: 10px 18px;
  width: 148px;
}
.c-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ui); font-size: 14px;
  padding: 10px 0;
}
.chk {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: #4d4d4d url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><path d="M4 7.7l2.3 2.3 4.7-5" fill="none" stroke="black" stroke-width="1.6"/></svg>') center / 10px no-repeat;
}
.p1-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* a sub-pixel stroke can never be opaque: the anti-aliaser paints it at part
   strength and smears it across two rows, which reads as a transparent wire.
   Whole-pixel width plus crispEdges snaps every run to one solid row, so the
   colour lands at full force and the wire still looks hairline-thin. */
.p1-wires .wire-base path, .p1-wires .wire-pulse path { shape-rendering: crispEdges; }
/* the wires pulse the way the reference does: a dark base layer underneath,
   and over it the blue copy whose dash and gap both equal the wire's length,
   with the offset running two lengths per cycle — a continuous forward pulse.
   The three mains cycle at .6s, the short wire to the checklist at .55s, so
   they slowly drift out of phase and the board feels alive. */
.p1-wires .wire-pulse path {
  stroke-dasharray: var(--l) var(--l);
  animation: p1pulse var(--t, 1.8s) cubic-bezier(.44, 0, .56, 1) infinite;
}
@keyframes p1pulse {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: calc(var(--l) * -2); }
}
@media (prefers-reduced-motion: reduce) {
  .p1-wires .wire-pulse path { animation: none; }
}

/* panel 2 agent card */
.agent-card {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  width: 384px;
  border: 1px solid var(--line);
  background: #000;
}
.a-row {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  font-family: var(--ui); font-size: 13px; line-height: 18px;
}
.a-row + .a-row { border-top: 1px solid var(--line); }
.a-row em { font-style: normal; color: #fff; }
.a-row i { font-style: normal; margin-left: auto; font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, 0.25); }
.a-row.done em { text-decoration: line-through; color: var(--txt50); }
.a-row.active em { color: #fff; }
.a-row .sq { background: linear-gradient(180deg, #4cc4ff, #0271b8); }
/* Running… carries the passing blue shine for as long as it runs */
.a-row.active .run {
  color: var(--blue);
  background-image:
    linear-gradient(100deg, rgba(110, 203, 255, 0) 38%, #6ecbff 50%, rgba(110, 203, 255, 0) 62%),
    linear-gradient(90deg, #0271b8, #02a7ff);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 100% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: labelShine 1.8s linear infinite;
}
.a-row.next em { color: rgba(255, 255, 255, 0.28); }
.a-row.next i { color: rgba(255, 255, 255, 0.16); }
.a-row .dot { width: 6px; height: 6px; border-radius: 50%; background: #333; flex: none; }

/* panel 3 meters */
.meter-card {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  width: 384px;
  border: 1px solid var(--line);
  background: #000;
}
.m-row {
  display: flex; align-items: center;
  padding: 17px 16px;
}
.m-row + .m-row { border-top: 1px solid var(--line); }
.m-lab { font-family: var(--ui); font-size: 14px; width: 118px; flex: none; }
.m-bar { display: flex; gap: 3px; margin-left: auto; }
.m-bar b {
  width: 5px; height: 16px;
  background: #2a2a2a;
  border-radius: 1px;
}
.m-bar b.on { background: linear-gradient(180deg, #4cc4ff, #0271b8); }
.m-val { font-family: var(--mono); font-size: 11px; color: var(--txt50); width: 40px; text-align: right; flex: none; }

/* panel 4 logo grid */
.logo-grid { position: absolute; right: 55px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 24px; }
.lg-row { display: flex; gap: 22px; justify-content: center; }
.lg-row .tile {
  width: 60px; height: 60px;
  background: linear-gradient(180deg, #191919 0%, #000 100%);
  border: 1px solid #1f1f1f;
  border-image: linear-gradient(180deg, #333 0%, #1f1f1f 100%) 1;
  border-radius: 0;
}
.lg-row .tile img { width: 26px; height: 26px; }
/* the Seznam app icon ships square; round it like an app icon */
.lg-row img[alt="Seznam Email"] { border-radius: var(--sk-radius); }

/* ===== TESTIMONIAL ===== */
.testimonial { padding: 104px 40px; }
.tst-inner { position: relative; max-width: 700px; margin: 0 auto; }
.tst-slides { position: relative; }
/* every slide sits in the same grid cell, so the block is always as tall as
   the tallest quote and nothing below ever shifts when they switch */
.tst-slides { display: grid; }
.tst-slide { grid-area: 1 / 1; visibility: hidden; display: flex; flex-direction: column; }
.tst-slide.is-active { visibility: visible; animation: fadein .5s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
blockquote { font-family: var(--sans); font-size: 28px; line-height: 1.4; font-weight: 400; }
/* pushed to the floor of the stack: a longer quote can no longer shove the
   person and the arrows down the page */
.tst-meta { margin-top: auto; padding-top: 36px; }
.tst-person { display: flex; align-items: center; gap: 14px; }
.tst-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tst-person strong { display: block; font-size: 15px; font-weight: 600; }
.tst-person span { font-family: var(--ui); font-size: 13px; color: var(--txt50); }
.tst-arrows { display: flex; gap: 10px; }
/* the arrows share the slide stack's one grid cell and sit at its bottom
   right, which is exactly the person row: no hand-tuned offset to drift */
.tst-slides .tst-arrows { grid-area: 1 / 1; align-self: end; justify-self: end; }
.arr {
  width: 40px; height: 40px;
  background: #161616;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.arr:hover { background: #242424; }
.arr img { width: 23px; height: 23px; }
/* the use-case arrows are bare chevrons, the way the reference drew them */
.usecases .arr { background: none; border: 0; opacity: .65; transition: opacity .2s; }
.usecases .arr:hover { background: none; opacity: 1; }
.usecases .arr { width: 52px; height: 52px; }
.usecases .arr img { width: 42px; height: 42px; }
.tst-stats {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
}
.ts { padding: 22px 26px; }
.ts + .ts { border-left: 1px solid var(--line); }
.ts b { font-family: var(--sans); font-size: 28px; font-weight: 400; display: block; }
.ts span { font-family: var(--ui); font-size: 14px; color: var(--txt70); margin-top: 4px; display: block; }

/* ===== USE CASES ===== */
.uc-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 96px 40px 64px;
}
.uc-head h2 { margin-top: 28px; }
/* the browser keeps vertical panning; horizontal gestures reach the drag
   handler instead of being swallowed as a page scroll */
.uc-viewport { overflow: hidden; border-top: 1px solid var(--line); touch-action: pan-y; }
.uc-track { display: flex; will-change: transform; }
.uc-card {
  flex: none; width: 400px;
  padding: 24px;
  min-height: 360px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
/* the same passing shine the section labels have, on the same clock */
.uc-tag {
  font-family: var(--mono); font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue);
  background-image:
    linear-gradient(100deg, rgba(110, 203, 255, 0) 38%, #6ecbff 50%, rgba(110, 203, 255, 0) 62%),
    linear-gradient(90deg, #0271b8, #02a7ff);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 100% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: labelShine 9s ease-in-out infinite;
}
.uc-card h4 { font-family: var(--body); font-size: 16px; font-weight: 600; margin-top: 18px; }
.uc-card p { font-family: var(--ui); font-size: 14px; line-height: 22px; color: var(--txt50); margin-top: 8px; max-width: 320px; }
.uc-icons { margin-top: auto; display: flex; gap: 12px; }
.tile-s {
  width: 50px; height: 50px;
  background: linear-gradient(180deg, #191919 0%, #000 100%);
  border: 1px solid #1f1f1f;
  border-image: linear-gradient(180deg, #333 0%, #1f1f1f 100%) 1;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
}
.tile-s img { width: 22px; height: 22px; }

/* ===== HOW IT WORKS ===== */
.how { display: grid; grid-template-columns: 1fr 1fr; }
.how-left { padding: 100px 60px 100px 40px; }
.how-left h2 { margin-top: 28px; max-width: 440px; }
.how-right { border-left: 1px solid var(--line); }
.how-item { padding: 46px 40px; }
.how-item + .how-item { border-top: 1px solid var(--line); }

/* ===== each step box wakes its icon its own way =====
   All three at the arrow buttons' pace, all moving by whole cells between
   held keyframes. Every icon sits on a complete dim field, so a cell an
   animation vacates shows the grey square underneath, never a hole.
   Target: the eye looks around at random — that one lives in script.js,
   because CSS keyframes cannot roll dice. Cloud: a gust runs through it —
   each of its seven columns lifts one cell as the wave passes and settles
   again, left to right, so the silhouette rolls like wind through a cloud.
   Dollar: the glyph rolls upward a cell per step and wraps. */
.how-item .pix { display: block; }
.how-item .pix rect { fill: #2b2b2b; }
.how-item .pix rect.on { fill: url(#sgrad); }

.how-item:hover .pix-cloud .col {
  animation: hiw-gust 1.3s linear infinite;
  animation-delay: calc(var(--i) * .12s);
}
@keyframes hiw-gust {
  0%, 8% { transform: translateY(0); }
  8.1%, 26% { transform: translateY(-3.6px); }
  26.1%, 100% { transform: translateY(0); }
}

.how-item:hover .pix-dollar .roll {
  animation: hiw-rise 1s steps(9) infinite;
}
@keyframes hiw-rise {
  0% { transform: translateY(0); }
  100% { transform: translateY(-32.4px); }
}

@media (prefers-reduced-motion: reduce) {
  .how-item:hover .pix .roll,
  .how-item:hover .pix .col { animation: none; }
}

.how-item h4 { font-family: var(--body); font-size: 18px; font-weight: 500; margin-top: 26px; }
.how-item p { font-family: var(--ui); font-size: 14px; line-height: 22px; color: var(--txt70); margin-top: 8px; max-width: 520px; }

/* ===== FOUNDER ===== */
.founder { display: grid; grid-template-columns: 1fr 1fr; }
.fnd-photo { position: relative; }
.fnd-photo > img { width: 100%; height: 100%; min-height: 640px; object-fit: cover; object-position: center top; }
.fnd-name {
  position: absolute; left: 40px; bottom: 36px;
}
.fnd-name strong { display: block; font-size: 15px; font-weight: 600; }
.fnd-name span { font-family: var(--ui); font-size: 13px; color: var(--txt70); }
.fnd-txt { border-left: 1px solid var(--line); padding: 110px 70px; }
.fnd-txt h2 { margin-top: 28px; max-width: 420px; }
.fnd-p { margin-top: 26px; font-size: 16px; line-height: 26px; color: var(--txt70); max-width: 470px; }
.fnd-stats { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.fnd-stats b { font-family: var(--body); font-size: 18px; font-weight: 500; display: block; }
.fnd-stats span { font-family: var(--ui); font-size: 14px; line-height: 22px; color: var(--txt70); margin-top: 8px; display: block; max-width: 210px; }

/* ===== PRICING ===== */
.price-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.price-card { padding: 44px 40px; }
.price-card + .price-card { border-left: 1px solid var(--line); }
.price-card h4, .enterprise h4 { font-family: var(--body); font-size: 18px; font-weight: 500; }
.pc-desc { font-family: var(--ui); font-size: 14px; line-height: 22px; color: var(--txt70); margin-top: 8px; max-width: 320px; }
.pc-price { margin-top: 40px; display: flex; align-items: baseline; gap: 12px; }
.pc-price b { font-family: var(--sans); font-size: 28px; font-weight: 400; }
.pc-price span { font-family: var(--ui); font-size: 14px; color: var(--txt70); }
.pc-feats { margin-top: 34px; }
.pc-feats li {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--body); font-size: 16px; color: var(--txt70);
  padding: 8px 0;
}
/* the same gradient as the square by "Running 24/7" in the workflow card */
.pc-feats li::before { content: ""; width: 8px; height: 8px; background: linear-gradient(180deg, #4cc4ff, #0271b8); flex: none; }
.price-card .btn-dark { margin-top: 40px; }
.enterprise {
  border-top: 1px solid var(--line);
  padding: 40px;
  display: flex; align-items: center; justify-content: space-between;
}
/* sized by the label, not a fixed width the text barely fit inside; the arrow
   takes the tighter right padding every arrowed button on the page has */
.btn-ent { padding: 0 16px 0 26px; height: 50px; gap: 14px; }
.btn-ent .pixarrow { width: 24px; height: 24px; }

/* ===== FAQ ===== */
.faq-list details { border-top: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 40px;
  cursor: pointer;
  font-size: 18px; font-weight: 500;
}
.faq-list summary::-webkit-details-marker { display: none; }
.fx { position: relative; width: 16px; height: 16px; flex: none; }
.fx::before, .fx::after {
  content: ""; position: absolute; background: #fff;
  transition: transform .25s;
}
.fx::before { left: 0; top: 7px; width: 16px; height: 1.6px; }
.fx::after { left: 7px; top: 0; width: 1.6px; height: 16px; }
details[open] .fx::after { transform: scaleY(0); }
/* No script drives this. The list is a native exclusive accordion: every
   <details> shares name="faq", so the browser itself closes one as it opens
   the next, and both moves ride the same transition on ::details-content.
   interpolate-size lets block-size travel to auto without being measured, and
   content-visibility held through the transition keeps the closing answer
   rendered while it shrinks. Interrupt it anywhere and the browser carries on
   from the height on screen. Where ::details-content is not supported the
   answers simply open and close instantly. */
.faq-list details { interpolate-size: allow-keywords; }
.faq-list details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .34s cubic-bezier(.4, 0, .2, 1), content-visibility .34s allow-discrete;
}
.faq-list details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .faq-list details::details-content { transition: none; }
}
.faq-list p {
  padding: 0 40px 30px;
  font-family: var(--ui); font-size: 14px; line-height: 22px;
  color: var(--txt70);
  max-width: 900px;
}

/* ===== CTA ===== */
.cta {
  min-height: 577px;
  background: url("/landing/assets/halftone.png") center / 130% no-repeat;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 45% at 8% 30%, rgba(2, 120, 200, 0.95), transparent 72%),
    radial-gradient(45% 40% at 22% 85%, rgba(2, 120, 200, 0.85), transparent 70%),
    radial-gradient(40% 35% at 78% 70%, rgba(2, 120, 200, 0.65), transparent 70%);
  mix-blend-mode: multiply;
}
.cta-frame {
  position: relative;
  width: 369px;
  padding: 10px;
  border-radius: var(--sk-radius);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.cta-card {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; gap: 136px;
  padding: 22px;
  border-radius: var(--sk-radius);
  background: #000;
}
.cta-card h3 {
  font-family: var(--sans); font-size: 32px; font-weight: 400; line-height: 44.8px;
  margin-bottom: 0;
}
.cta-card .btn-blue { width: 100%; }

/* ===== FOOTER ===== */
.footer { border-top: 1px solid var(--line); }
.ft-cols {
  display: grid; grid-template-columns: 1.2fr 0.93fr 0.93fr 0.93fr;
}
.ft-brand { padding: 44px 40px 120px; }
/* One lockup, worn by the header and the footer alike: the mark, then the name
   set in the page's own face rather than in the dotted wordmark. The giant LED
   SKLYVO sits a few rows below the footer one and would otherwise say the same
   word twice in the same letters. */
.ft-brandmark { display: flex; align-items: center; gap: 12px; }
/* The name is set the way the page sets its headlines: Schibsted Grotesk in the
   regular weight, no tracking. Every h1 and h2 here is weight 400, which is
   what gives the page its quiet tone, and the wordmark joins that voice rather
   than shouting in bold. Header and footer wear it identically. */
.wordmark {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}
.ft-brand p { margin-top: 14px; font-size: 16px; line-height: 26px; color: var(--txt50); max-width: 250px; }
.ft-col { border-left: 1px solid var(--line); padding: 44px 40px; display: flex; flex-direction: column; align-items: flex-start; }
/* headings and links sit at the weight of the claim under the logo, so the
   whole footer reads as one block of text until something is hovered */
.ft-col h5 {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--txt50);
  margin-bottom: 14px;
}
.ft-col a { font-size: 16px; line-height: 26px; color: var(--txt50); padding: 5px 0; transition: color .2s; }
.ft-col a:hover { color: #fff; }
.ft-bar {
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
}
/* the whole credit line sits at the weight the year already had */
.ft-bar p { font-size: 16px; color: var(--txt50); }
.ft-credit { transition: color .2s; }
.ft-credit:hover { color: #fff; }
.ft-social { display: flex; gap: 18px; }
.ft-social a { color: var(--txt50); transition: color .2s; }
.ft-social a:hover { color: #fff; }
.ft-social svg { width: 18px; height: 18px; }

/* giant wordmark: an LED matrix drawn into a canvas, full bleed. Every pixel
   of it is painted in script.js; there is deliberately no CSS animation here. */
.giant-wrap {
  border-top: 1px solid var(--line);
  height: 240px;
  overflow: hidden;
  position: relative;
  background-color: #000;
}
.giant-wrap > .led {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ===== RESPONSIVE ===== */
/* a desktop window narrower than the frame keeps 60px of air on each side —
   header included — instead of gluing content to the window edges; phones
   keep the tighter 12px margins they always had */
@media (min-width: 701px) {
  .frame, .nav-inner, .nav-line-in { width: min(1200px, calc(100% - 120px)); }
}
@media (max-width: 700px) {
  .frame { margin: 0 12px; }
}
@media (max-width: 1220px) {
  .workflow-card { margin-right: 30px; }
}
@media (max-width: 1000px) {
  h1 { font-size: 44px; }
  h2 { font-size: 36px; }
  .hero { grid-template-columns: 1fr; }
  .hero-right { border-left: 0; border-top: 1px solid var(--line); min-height: 560px; justify-content: center; }
  .workflow-card { margin: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .problem-cards { grid-template-columns: 1fr; }
  .pcard { min-height: 0; }
  .pcard + .pcard { border-left: 0; border-top: 1px solid var(--line); }
  .pgfx { margin-bottom: 46px; }
  .pcard h3 { margin-top: 0; }
  .solution, .how, .founder { grid-template-columns: minmax(0, 1fr); }
  .sol-right, .how-right, .fnd-txt { border-left: 0; border-top: 1px solid var(--line); }
  /* `minmax(0, 1fr)`, ne `1fr`: samotné `1fr` neklesne pod min-content
     obsahu, takže na úzkém telefonu držela kolej 346 px a stránka lezla
     do strany. */
  .build-grid { grid-template-columns: minmax(0, 1fr); }
  .build-menu { position: static; border-bottom: 1px solid var(--line); }
  .build-panels { border-left: 0; }
  .panel { min-height: 0; padding-bottom: 40px; }
  /* stacked, the visual no longer sits in a band on the right, so the wash
     drops its right-hand crop and covers the whole panel */
  .panel::before {
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .p1-visual, .agent-card, .meter-card, .logo-grid {
    position: static; transform: none; margin: 44px 0 0;
  }
  .p1-visual { height: 300px; position: relative; width: 100%; max-width: 430px; }
  .chips { position: static; margin-top: 32px; max-width: none; }
  .price-grid { grid-template-columns: minmax(0, 1fr); }
  .price-card + .price-card { border-left: 0; border-top: 1px solid var(--line); }
  .fnd-txt { padding: 70px 40px; }

}
@media (max-width: 700px) {
  .nav-links { display: none; }
  .nav-inner, .hero-left, .sec-head, .sol-left, .how-left,
  .pcard, .how-item, .price-card, .enterprise, .ft-brand, .ft-col, .ft-bar,
  .uc-head, .testimonial { padding-left: 20px; padding-right: 20px; }
  /* Tyhle si držely desktopových 40 px, takže na 320px displeji zbylo na
     text 240 px a rozbíjely mřížku zevnitř. */
  .build-menu, .panel { padding-left: 20px; padding-right: 20px; }
  .fnd-txt { padding-left: 20px; padding-right: 20px; }
  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  .faq-list summary { padding: 22px 20px; }
  .faq-list p { padding: 0 20px 24px; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .uc-card { width: 320px; }
  /* on a phone the two short lists pair up in one box and Others takes the
     row under them; the desktop keeps its four columns untouched */
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .ft-brand, .ft-others { grid-column: 1 / -1; }
  .ft-col { border-left: 0; border-top: 1px solid var(--line); }
  .ft-brand { padding-bottom: 44px; }
  .ft-bar { flex-direction: column; gap: 16px; }
  .enterprise { flex-direction: column; align-items: flex-start; gap: 24px; }
  .terminal { width: calc(100% - 40px); padding: 26px; }
  .cta { min-height: 620px; padding: 0 20px; }
  blockquote { font-size: 22px; }
  .tst-stats { grid-template-columns: 1fr; }
  .ts + .ts { border-left: 0; border-top: 1px solid var(--line); }
}

/* ===== LIVE ELEMENTS ===== */

/* drifting halftone backgrounds (hero + cta) */
.hero-right { overflow: hidden; background: none; }
.hero-right .bgdrift, .cta .bgdrift {
  position: absolute; inset: 0;
  overflow: hidden;
  /* own compositor layer so FAQ height animation is not coupled to canvas paint */
  contain: paint;
  transform: translateZ(0);
}
.cta { background: none; }
.hero-right::before, .cta::before { z-index: 1; }
.workflow-card { z-index: 2; }
.cta-frame { z-index: 2; }
@keyframes bgdrift {
  from { transform: translate3d(-2.6%, -2%, 0) scale(1.04); }
  to { transform: translate3d(2.6%, 2.2%, 0) scale(1.14); }
}

/* letter-roll hover on buttons */
/* Vzhled tlačítka, rolování písmen i pixelová šipka žijí ve
   `shared/pix-button.css`, který načítá i workspace. Jeden zdroj pravdy pro
   obě strany produktu — nepřidávat sem kopie. */

/* label pixel glyph shimmer */
/* 4x2 grid: grey base, one lit cell per row fading across it.
   top row runs left -> right, bottom row runs right -> left. */
.pix-lit rect { opacity: 0; animation: pixlit 1.6s linear infinite; }
@keyframes pixlit {
  0%   { opacity: 0; }
  9%   { opacity: 1; }
  25%  { opacity: 1; }
  42%  { opacity: 0; }
  100% { opacity: 0; }
}
/* top row: 1st, 2nd, 3rd, 4th from the left */
.pix-lit rect:nth-child(1) { animation-delay: 0s; }
.pix-lit rect:nth-child(2) { animation-delay: .4s; }
.pix-lit rect:nth-child(3) { animation-delay: .8s; }
.pix-lit rect:nth-child(4) { animation-delay: 1.2s; }
/* bottom row: 1st, 2nd, 3rd, 4th from the right */
.pix-lit rect:nth-child(5) { animation-delay: 1.2s; }
.pix-lit rect:nth-child(6) { animation-delay: .8s; }
.pix-lit rect:nth-child(7) { animation-delay: .4s; }
.pix-lit rect:nth-child(8) { animation-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .pix-lit rect { animation: none; }
}

/* the little square next to "Running 24/7" carries the same blue gradient */
.wf-foot .sq { background: linear-gradient(180deg, #4cc4ff, #0271b8); }
}

/* agent card row transitions */
.a-row em, .a-row i, .a-row .sq, .a-row .dot { transition: all .35s ease; }

/* hover states */
.bm-item:hover { color: #fff; }

/* static painted backgrounds (drawn by code once) */
.bg-paint { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.terminal { position: relative; z-index: 1; }

/* live backgrounds */
.bgdrift canvas, .bgdrift video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.has-live .bgdrift { animation: none; background: none; inset: 0; }
.hero-right.has-live::before, .cta.has-live::before { display: none; }
.terminal { min-height: 336px; }
.t-line .t-ok { color: var(--blue); }
.t-dim2 { color: var(--txt50); }

/* text entrance animations removed */

/* ===== burger + mobile menu ===== */
.burger { display: none; margin-left: auto; padding: 8px; }
.burger svg { display: block; }
.burger .ic-close { display: none; }
body.menu-open .burger .ic-menu { display: none; }
body.menu-open .burger .ic-close { display: block; }
.mnav {
  display: none;
  position: fixed; inset: 66px 0 0 0;
  background: #000;
  z-index: 99;
}
body.menu-open .mnav { display: block; }
/* the page cannot scroll under an open menu — the html element is the one
   actually scrolling, so it is the one that gets locked. Both the lock and
   the panel live strictly below the burger breakpoint, so a menu-open class
   left behind by a window resize can never trap a full-width page */
@media (max-width: 1040px) {
  body.menu-open { overflow: hidden; }
  html:has(body.menu-open) { overflow: hidden; }
}
@media (min-width: 1041px) {
  .mnav { display: none !important; }
}
/* the menu content lives INSIDE the frame's side rails: the inner column has
   the same width formula as the page frame, carries the two lines itself, and
   everything — button included — stays between them */
.mnav-in {
  width: min(1200px, calc(100% - 120px));
  height: 100%;
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 24px 0;
  gap: 34px;
}
@media (max-width: 700px) {
  .mnav-in { width: calc(100% - 24px); }
}
.mnav a {
  font-family: var(--mono); font-size: 16px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: #d5d5d5;
  transition: color .2s;
}
/* the menu lights up under the mouse the way the desktop links do; :active
   gives a finger on a phone the same flash */
.mnav a:hover, .mnav a:active { color: #fff; }
.mnav-btn .btn-arrow { transition: transform .2s ease; }
.mnav-btn:hover .btn-arrow, .mnav-btn:active .btn-arrow { transform: translateX(3px); }
.mnav .mnav-btn {
  width: 100%; height: 58px; margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: #0d0d0d;
  border: 1px solid var(--line2);
  border-radius: var(--sk-radius);
  color: #fff;
}

/* uc mobile arrows row */
.uc-arrows-m { display: none; }

/* the header trades its links for the burger the moment they would start
   fighting the button for room (content needs ~912px + 60px air per side),
   never letting anything wrap to a second line */
@media (max-width: 1040px) {
  .nav-links, .nav-inner .btn-outline, .nav-slash { display: none; }
  .burger { display: block; }
}

/* ===== MOBILE (matching original 390px layout) ===== */
@media (max-width: 700px) {

  /* the live halftone runs on phones too: hiding it left the hero and the CTA
     on plain black, because the script still marks them has-live and that
     hides the static fallback wash underneath. A phone-sized panel is also
     fewer dots per frame than a desktop one, so it is the cheaper canvas. */
  .hero { min-height: 0; }
  .hero-left { padding: 64px 20px 56px; }
  h1 { font-size: 38px; }
  h2 { font-size: 36px; }
  .label { font-size: 13px; letter-spacing: .02em; }
  .hero-p { margin-top: 0; padding-top: 56px; }
  .hero-right { min-height: 0; padding: 44px 20px; justify-content: center; }
  .workflow-card { width: 100%; margin: 0; }
  .wf-foot { font-size: 12px; line-height: 18px; }

  /* stats stay 2x2 like the original */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 30px 20px 34px; }
  .stat:nth-child(2n+1) { border-left: 0; }
  /* the top-right cell must also drop the generic sibling border-top, or it
     doubles the strip's own top hairline */
  .stat:nth-child(2) { border-left: 1px solid var(--line); border-top: 0; }
  .stat:nth-child(4) { border-left: 1px solid var(--line); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }

  .sol-list li { align-items: flex-start; }
  .sol-list li::before { margin-top: 9px; }
  .sol-right { padding: 36px 20px; min-height: 0; }
  .terminal { width: 100%; min-height: 250px; padding: 28px; }

  /* panels: copy -> visual -> chips, the desktop's own order */
  .panel { display: flex; flex-direction: column; padding: 48px 20px 44px; }
  .p1-visual, .agent-card, .meter-card, .logo-grid {
    margin: 40px -20px 0;
    width: auto;
  }
  .agent-card, .meter-card { margin: 40px 0 0; width: 100%; }
  .logo-grid { margin: 44px 0 0; }
  .p1-visual { position: relative; height: 300px; margin: 36px 0 0; width: 100%; max-width: 430px; align-self: center; }
  .chips { margin-top: 34px; }
  .m-bar b { width: 8px; height: 20px; }
  .a-row i { font-size: 10px; }

  .uc-head { display: block; padding: 72px 20px 52px; }
  .uc-head .tst-arrows { display: none; }
  .uc-card { width: calc(100vw - 26px); max-width: 400px; min-height: 430px; }
  /* the row is dragged with a thumb here, so it needs no arrows */
  .arr { width: 48px; height: 48px; }


  .fnd-photo > img { min-height: 0; height: auto; }
  .fnd-txt { padding: 60px 20px; }
  .fnd-stats { grid-template-columns: 1fr; gap: 26px; margin-top: 48px; }
  .fnd-stats span { max-width: none; }

  .sec-head { padding: 72px 20px 56px; }
  .how-left { padding: 72px 20px 40px; }
  .how-item { padding: 40px 20px; }


  .cta { min-height: 640px; padding: 0 20px; background: none; }
  .cta-card { width: 100%; padding: 24px; }
  .cta-card h3 { font-size: 30px; line-height: 1.35; margin-bottom: 82px; }


}

/* ===== Sklyvo mark: blue tile, glowing dome, live eyes (ported from sklyvo-mark.tsx) ===== */
.nav-logo { display: flex; align-items: center; gap: 12px; }
.sk-mark {
  position: relative; display: block;
  width: 30px; height: 30px; flex: none;
  overflow: hidden; border-radius: 6.7px;
  box-shadow: 0 2.7px 4.8px -2.1px rgba(0, 110, 190, 0.5);
}
.sk-plate {
  position: absolute; inset: 0;
  border-radius: 6.7px;
  background: #02a7ff;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 80%, transparent 100%);
}
.sk-orb {
  position: absolute; left: -0.9px; top: 7.2px;
  width: 31.8px; height: 24px;
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
  transform-origin: 50% 100%;
  background: radial-gradient(54% 64% at 50% 74%, #00B0FB 14%, #61BBF8 51%, #8BCDFA 65%, #BEE3FC 82%, #FFFFFF 100%);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.10), 0 0 3px rgba(255, 255, 255, 1), inset 0 0 1.5px rgba(0, 0, 0, 0.05);
  pointer-events: none;
}
.sk-eye {
  position: absolute;
  width: 5.12px; height: 6.77px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF 0%, #BBE2FC 100%);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.10), 0 0.53px 1px rgba(0, 0, 0, 0.10), inset 0 0 1px rgba(0, 0, 0, 0.30);
  transform: translate(-50%, -50%) rotate(-11.05deg);
  will-change: transform;
  pointer-events: none;
}
.sk-eye-l { left: 42.4%; top: 60.5%; }
.sk-eye-r { left: 68.4%; top: 54.8%; }

/* the matrix shrinks its dot grid with the strip: 6px dots at full size,
   4px on tablet, 2px on phones. script.js reads the same two widths. */
@media (max-width: 1199px) { .giant-wrap { height: 185px; } }
@media (max-width: 809px)  { .giant-wrap { height: 115px; } }