/* ==========================================================================
   EnterIT beta2 — the keycap board.

   Tiles are physical keys: a solid side under the cap, which collapses as the
   key travels into it on press. The ground is white; colour lives in the caps.

   Every colour on this board is a literal value from the brand manual. Nothing
   is tinted, lightened or mixed — there are no in-between shades, because the
   manual does not have any.

   Colour fills surfaces. The manual defines colour triples for web and areas
   (p. 37) and puts turquoise down as the largest colour field on the page
   (p. 35), so caps are painted, not merely trimmed.

   Turquoise is the primary and always holds the biggest share. Each chapter also
   draws one accent — blue, violet, red or yellow — and that accent paints a
   couple of caps and marks the rest: the chapter number, the hairline along the
   top of a white cap, the list marks, the flow arrow. The set of chapter accents
   is offset one step on each visit, so the board turns over.

   No colour here is tinted, lightened or mixed. Every value is the manual's own.
   ========================================================================== */

@font-face{font-family:'Greycliff CF';src:url('/assets/fonts/GreycliffCF-Heavy.woff2') format('woff2'),url('/assets/fonts/GreycliffCF-Heavy.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Greycliff CF';src:url('/assets/fonts/GreycliffCF-Bold.woff2') format('woff2'),url('/assets/fonts/GreycliffCF-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Mono';src:url('/assets/fonts/FiraMono-Medium.woff2') format('woff2'),url('/assets/fonts/FiraMono-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

:root{
  --floor:#FBFBFB;          /* board ground — Jednoduchá bílá */
  --key-side:#17202E;       /* Stabilní černá — the solid edge under every cap */

  --navy:#17202E;
  --white:#FBFBFB;
  --turquoise:#41E39E;
  --blue:#6ECEFF;
  --violet:#B790FF;
  --yellow:#F8E354;
  --red:#FF848C;
  /* Dynamická růžová #E399FF is defined by the manual as a secondary accent and
     is the upper stop of the "Empatická vlna" gradient. It is deliberately not
     used on this board — brand owner's call — which is also why there is no
     gradient here: the manual's only sanctioned one starts in that pink. */

  --navy-soft:#222D3D;      /* the manual's second dark step */

  /* The chapter accent. It never fills a cap — it lands on the chapter number,
     the hairline above a white cap, the list marks and the flow arrow. */
  --accent:var(--turquoise);
  --hair:var(--accent);

  --font-head:'Greycliff CF','Plus Jakarta Sans',system-ui,Arial,sans-serif;
  --font-mono:'Fira Mono',ui-monospace,Menlo,monospace;

  --travel:9px;             /* how far a big key falls */
  --gap:26px;               /* air between caps — they are separate objects */
  --r-key:22px;
  --board-max:1512px;
  --gutter:36px;
  --press:90ms cubic-bezier(.3,.7,.3,1);
}

/* The chapter accents, at the manual's exact values. `--hair` is the same
   colour except where it would be invisible on a white cap: Zářivá žlutá on
   Jednoduchá bílá is a line nobody can see, so it borrows Odvážná červená. */
.ch--turquoise{--accent:#41E39E;--hair:#41E39E}
.ch--blue     {--accent:#6ECEFF;--hair:#6ECEFF}
.ch--violet   {--accent:#B790FF;--hair:#B790FF}
.ch--yellow   {--accent:#F8E354;--hair:#FF848C}
.ch--red      {--accent:#FF848C;--hair:#FF848C}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--floor);color:var(--navy);
  font-family:var(--font-mono);font-weight:500;text-wrap:pretty;
  -webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--navy);text-decoration:none}
::selection{background:var(--turquoise);color:var(--navy)}

/* ---------- Board ---------- */
.board{max-width:var(--board-max);margin:0 auto;padding:8px var(--gutter) 0}

/* ---------- Chapter ----------
   Chapters are the reader's staircase: a number, the question this stop
   answers, and the keys that answer it. */
.chap{margin-top:96px;scroll-margin-top:24px}
.chap-head{display:flex;gap:22px;align-items:flex-start;
  margin:0 0 30px;padding-bottom:24px;
  border-bottom:1.5px solid rgba(23,32,46,.12)}
.chap-no{flex:none;width:52px;height:52px;border-radius:14px;
  background:var(--accent);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:900;font-size:19px;
  box-shadow:5px 5px 0 var(--key-side)}
.chap-kicker{display:inline-block;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.55}
.chap-head h2{margin:8px 0 0;font-family:var(--font-head);font-weight:900;
  font-size:clamp(30px,3.4vw,54px);line-height:.96;letter-spacing:-.025em;
  max-width:30ch;text-wrap:balance}
.chap-head p{margin:14px 0 0;font-size:13.5px;line-height:1.65;opacity:.68;
  max-width:70ch}

.keys{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  align-items:stretch}

/* ---------- Key ---------- */
.key{
  position:relative;display:flex;flex-direction:column;text-align:left;
  padding:26px;border:none;border-radius:var(--r-key);
  font-family:var(--font-mono);background:var(--white);color:var(--navy);
  /* The cap rests above its own solid edge, offset diagonally. */
  box-shadow:
    inset 0 0 0 1.5px rgba(23,32,46,.12),
    var(--travel) var(--travel) 0 var(--key-side);
  transition:transform var(--press),box-shadow var(--press);
}
a.key{cursor:pointer}
/* Pressing collapses the side and drops the cap onto the board. */
a.key:hover,a.key:focus-visible,a.key:active{
  transform:translate(var(--travel),var(--travel));
  box-shadow:
    inset 0 0 0 1.5px rgba(23,32,46,.12),
    0 0 0 var(--key-side);
}
.key:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

/* A white cap wears its chapter's accent as a hairline along the top edge — the
   only place the accent touches a large surface. */
.key--white{background:var(--white);
  box-shadow:inset 0 4px 0 var(--hair),
             inset 0 0 0 1.5px rgba(23,32,46,.12),
             var(--travel) var(--travel) 0 var(--key-side)}
a.key--white:hover,a.key--white:focus-visible,a.key--white:active{
  box-shadow:inset 0 4px 0 var(--hair),
             inset 0 0 0 1.5px rgba(23,32,46,.12),
             0 0 0 var(--key-side)}
/* The chapter's accent, painted across the whole cap. Every accent in the
   palette is light enough to carry Stabilní černá, so type stays navy. */
.key--accent{background:var(--accent);color:var(--navy)}
.key--turquoise{background:var(--turquoise);color:var(--navy)}
/* A cap can also be given a named colour outright, independent of its chapter.
   Used where the tiles are equal peers — the routine grid — so the set reads as
   a full palette rather than as one accent repeated. */
.key--blue  {background:var(--blue);color:var(--navy)}
.key--violet{background:var(--violet);color:var(--navy)}
.key--red   {background:var(--red);color:var(--navy)}
.key--yellow{background:var(--yellow);color:var(--navy)}
.key--soft{background:var(--navy-soft);color:var(--white)}
.key--navy,.key--photo-hire{background:var(--navy);color:var(--white)}

/* Letter stamped in the corner, like a keycap legend. */
.key-legend{position:absolute;top:14px;right:16px;width:24px;height:24px;
  border-radius:7px;border:1.5px solid currentColor;opacity:.5;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;pointer-events:none}

.key-eyebrow{align-self:flex-start;padding:6px 14px;border-radius:999px;
  background:var(--navy);color:var(--white);max-width:100%;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.key--navy .key-eyebrow,.key--photo-hire .key-eyebrow{background:var(--white);color:var(--navy)}

.key-tag{align-self:flex-start;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.6}

/* The headline owns the cap. It is the first thing read and it should carry the
   point on its own, so it runs large and tight across the full tile. */
/* On a tall cap the headline is pushed to the foot, so it reads as the
   conclusion of the tile. A cap that carries a list is the exception: there the
   headline introduces the list and has to sit above it. */
.key:has(.key-list) .key-title{margin-top:0;padding-top:6px}
/* A cap with both a label above and body copy below is part of a row, so its
   headline sits under the label rather than floating to the foot. */
.key:not(.key--photo):has(.key-eyebrow):has(.key-sub) .key-title{
  margin-top:20px;padding-top:0}
.key-title{margin-top:auto;padding-top:18px;font-family:var(--font-head);
  font-weight:900;font-size:clamp(24px,2.4vw,36px);line-height:.96;
  letter-spacing:-.02em;text-wrap:balance}
.key-title--sm{font-size:clamp(19px,1.7vw,26px);line-height:1.02}
.key-title--big{font-size:clamp(30px,3.6vw,54px)}
.key-title--xl{font-size:clamp(40px,5.4vw,86px);line-height:.9}

/* One explaining line under the headline — the "why it matters". */
.key-sub{margin-top:13px;font-size:12.5px;line-height:1.6;opacity:.78;max-width:46ch}
.key-meta{margin-top:12px;font-size:10px;line-height:1.5;opacity:.6;
  letter-spacing:.04em}
.key-go{margin-top:16px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.72;display:inline-flex;align-items:center;gap:7px}
a.key:hover .key-go{opacity:1}

/* Three claims under a headline, when the tile is a discipline rather than a
   single point. Kept to one line each so the cap does not become a paragraph. */
.key-list{margin:14px 0 0;padding:0;list-style:none;
  font-size:11.5px;line-height:1.5}
.key-list li{position:relative;padding-left:16px;margin-top:7px;opacity:.8}
.key-list li::before{content:"";position:absolute;left:0;top:.46em;
  width:8px;height:3px;border-radius:2px;background:var(--accent)}
.key--turquoise .key-list li::before,.key--accent .key-list li::before,
.key--blue .key-list li::before,.key--violet .key-list li::before,
.key--red .key-list li::before,.key--yellow .key-list li::before{
  background:var(--navy);opacity:.55}

/* What goes in, what comes out — the whole promise of a routine in one row. */
.key-flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1.5px solid rgba(23,32,46,.14);
  font-size:10px;letter-spacing:.03em}
.key-flow b{font-weight:500;opacity:.85}
.key-flow i{font-style:normal;color:var(--accent)}
.key--turquoise .key-flow i,.key--accent .key-flow i,
.key--blue .key-flow i,.key--violet .key-flow i,
.key--red .key-flow i,.key--yellow .key-flow i{color:var(--navy);opacity:.5}
.key--navy .key-flow{border-top-color:rgba(251,251,251,.22)}

/* A number that leads instead of a sentence. */
.key-stat{font-family:var(--font-head);font-weight:900;
  font-size:clamp(36px,4.4vw,68px);line-height:.88;letter-spacing:-.03em;
  margin-top:auto;padding-top:18px}
.key-stat--sm{font-size:clamp(24px,2.3vw,34px);line-height:1;letter-spacing:-.02em}
.key-stat small{display:block;font-family:var(--font-mono);font-weight:500;
  font-size:10.5px;line-height:1.5;letter-spacing:.02em;
  margin-top:14px;opacity:.72;text-transform:none}

/* ---------- Brand mark on the cap ----------
   A small signature in the corner, the way a printed card carries its maker's
   mark. Quiet enough to ignore, present enough to tie the board together. */
.key-mark{position:absolute;bottom:20px;right:22px;width:22px;height:auto;
  opacity:.26;pointer-events:none;transition:opacity .2s}
a.key:hover .key-mark{opacity:.5}
.key--photo .key-mark,.key--navy .key-mark{filter:brightness(0) invert(1);opacity:.35}

/* ---------- Mascot ----------
   Enty leans into the corner of a handful of caps. It is the brand's own
   character, so it appears where the tile is speaking rather than reporting —
   and never often enough to become wallpaper. */
/* Enty stands on the bottom edge of the cap rather than hanging off the corner.
   Outside the cap it drifted over the neighbour on press and never looked
   seated; inside, it travels with the key. */
.key-mascot{position:absolute;right:14px;bottom:0;width:104px;height:auto;
  opacity:.95;pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
a.key:hover .key-mascot{transform:translateY(-6px) rotate(-3deg)}
.key--navy .key-mascot{opacity:.85}
.key-mascot + .key-mark{display:none}

/* ---------- Circle affordance ----------
   Reads as "there is more behind this" without spending a line of copy on it. */
.key-arrow{position:absolute;top:16px;right:52px;width:34px;height:34px;
  border-radius:50%;border:1.5px solid currentColor;opacity:.42;
  display:inline-flex;align-items:center;justify-content:center;
  transition:opacity .2s,transform .2s;pointer-events:none}
.key-arrow svg{width:15px;height:15px}
a.key:hover .key-arrow{opacity:1;transform:translate(2px,-2px)}

/* ---------- Speech bubble cap ----------
   The manual approves the avatar with a bubble, and the avatar speaks in the
   first person — so this cap is the one place the product talks directly.
   The tail is a rotated square, which keeps it crisp at any size. */
.key--bubble{background:var(--turquoise);color:var(--navy);overflow:visible;
  padding:30px 30px 26px;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(23,32,46,.12),
             var(--travel) var(--travel) 0 var(--key-side);
  transition:transform var(--press),box-shadow var(--press)}
.key--bubble:hover,.key--bubble:focus-visible,.key--bubble:active{
  transform:translate(var(--travel),var(--travel));
  box-shadow:inset 0 0 0 1.5px rgba(23,32,46,.12),0 0 0 var(--key-side)}
.key--bubble::after{content:"";position:absolute;left:46px;bottom:-11px;
  width:26px;height:26px;background:var(--turquoise);
  transform:rotate(45deg);border-radius:0 0 6px 0;z-index:-1}
.bubble-by{display:flex;align-items:center;gap:12px;margin-top:22px;
  padding-top:18px;border-top:1.5px solid rgba(23,32,46,.18)}
.bubble-by img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.bubble-by b{display:block;font-family:var(--font-head);font-weight:700;font-size:13px}
.bubble-by span{display:block;font-size:10.5px;opacity:.7}

/* ---------- Pill badge with icon ---------- */
.key-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:999px;background:rgba(251,251,251,.94);
  color:var(--navy);font-size:11px;letter-spacing:.02em}
.key-pill svg{width:14px;height:14px}

/* ---------- Photo caps ----------
   The image is the cap face; type sits on a scrim so it stays readable, and the
   photo lifts slightly as the key is pressed. */
.key--photo{overflow:hidden;color:var(--white);justify-content:flex-end;
  padding:26px;isolation:isolate}
/* Scoped to the backdrop only — an unscoped `img` rule also caught the small
   brand mark and stretched it across the whole cap. */
.key-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.key--photo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,17,28,.22) 0%,rgba(10,17,28,.55) 45%,rgba(10,17,28,.9) 100%)}
/* A photograph that proves the place is alive. It sits under the type rather
   than competing with it, but it has to be legible as a photograph — the first
   pass buried it at 88% and what reached the page was a black rectangle. The
   scrim now starts light at the top, where there is no text, and deepens toward
   the headline. */
.key--quiet::before{background:linear-gradient(180deg,
  rgba(14,22,36,.30) 0%,rgba(14,22,36,.62) 45%,rgba(14,22,36,.90) 100%)}
.key--quiet .key-bg{filter:grayscale(.15)}
.key--photo .key-eyebrow{background:var(--white);color:var(--navy)}
.key--photo .key-legend{border-color:var(--white);color:var(--white)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  a.key--photo:hover .key-bg{transform:scale(1.05)}
}

/* ---------- Reserved artwork ----------
   A tile we have deliberately left open, with the brief for the photograph
   printed on it. It is not a link and it does not press — it is a hole in the
   board, and it should look like one until the picture arrives. */
.key--slot{background:repeating-linear-gradient(135deg,
    transparent 0 15px, rgba(23,32,46,.04) 15px 30px), var(--white);
  box-shadow:none;border:2px dashed var(--accent);
  align-items:center;justify-content:center;text-align:center;
  min-height:200px;padding:30px}
.slot-mascot{width:66px;height:auto;opacity:.4;margin-bottom:16px}
.slot-hint{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.slot-brief{margin-top:10px;font-size:12.5px;line-height:1.55;opacity:.72;max-width:44ch}

/* ---------- Hero bar ---------- */
.hero-bar{position:relative;overflow:hidden;border-radius:var(--r-key);
  background:var(--navy);color:var(--white);padding:40px 44px 0;
  display:flex;flex-direction:column;gap:0}
.hero-say{max-width:58ch}
.hero-bar h1{margin:0;font-family:var(--font-head);font-weight:900;
  font-size:clamp(32px,4.2vw,62px);line-height:.96;letter-spacing:-.025em;
  max-width:24ch;text-wrap:balance}
.hero-bar p{margin:14px 0 0;font-size:15px;line-height:1.6;opacity:.8;max-width:60ch}
.hero-note{display:inline-block;margin-top:16px;padding:7px 15px;
  border-radius:999px;border:1.5px solid rgba(251,251,251,.28);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
/* The partner band. Restraint reads as confidence here: the marks sit small and
   dimmed, and come up to full white only when you look at them. Every mark is
   white rather than its own brand colour, so none of the three looks like the
   weaker of the set. */
.hero-side{margin-top:22px;padding:18px 0 22px;
  border-top:1.5px solid rgba(251,251,251,.14);
  display:flex;align-items:center;gap:clamp(24px,3vw,44px);flex-wrap:wrap}
.hero-side-label{font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.4;flex:none}
.hero-marks{display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(28px,3.6vw,52px)}
.hero-marks img{height:clamp(30px,3.1vw,42px);width:auto;
  opacity:.82;transition:opacity .22s}
.hero-marks img:hover{opacity:1}
.hero-ms{display:flex;align-items:center;gap:11px;
  opacity:.82;transition:opacity .22s}
.hero-ms:hover{opacity:1}
.hero-ms .sq{display:grid;grid-template-columns:1fr 1fr;gap:2px;
  width:clamp(26px,2.6vw,34px);height:clamp(26px,2.6vw,34px);flex:none}
.hero-ms .sq i{display:block;background:var(--white)}
.hero-ms-name{display:block}
.hero-ms-name b{display:block;font-family:var(--font-head);font-weight:700;
  font-size:clamp(16px,1.7vw,22px);line-height:1.05;color:var(--white)}
.hero-ms-name small{display:block;font-family:var(--font-mono);
  font-size:clamp(9px,.85vw,11px);letter-spacing:.06em;opacity:.75;margin-top:3px}

/* ---------- Key rack (quick nav) ---------- */
.rack{border-radius:var(--r-key);background:rgba(23,32,46,.045);
  border:1.5px solid rgba(23,32,46,.10);padding:18px;
  display:flex;flex-wrap:wrap;gap:10px;align-content:center}
.rack-key{height:38px;border-radius:11px;background:var(--white);color:var(--navy);
  border:none;cursor:pointer;font-family:var(--font-mono);font-weight:500;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:0 15px;
  display:inline-flex;align-items:center;white-space:nowrap;
  box-shadow:inset 0 0 0 1.2px rgba(23,32,46,.12),4px 4px 0 var(--key-side);
  transition:transform var(--press),box-shadow var(--press)}
.rack-key:hover,.rack-key:focus-visible,.rack-key:active{
  transform:translate(4px,4px);
  box-shadow:inset 0 0 0 1.2px rgba(23,32,46,.12),0 0 0 var(--key-side)}
.rack-key:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* ---------- Header / footer ---------- */
.site-head{max-width:var(--board-max);margin:0 auto;padding:0 var(--gutter);
  height:84px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.site-head img{height:26px;width:auto}
.head-nav{display:flex;align-items:center;gap:26px}
.head-nav a{color:var(--navy);opacity:.62;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;transition:opacity .18s}
.head-nav a:hover{opacity:1}
.lang{display:flex;gap:2px;padding:3px;border:1px solid rgba(23,32,46,.14);
  border-radius:999px;background:rgba(23,32,46,.04)}
.lang a{padding:5px 9px;border-radius:999px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);opacity:.5}
.lang a.on{background:var(--turquoise);color:var(--navy);opacity:1}

.site-foot{max-width:var(--board-max);margin:0 auto;
  padding:60px var(--gutter) 44px;display:flex;justify-content:space-between;
  align-items:center;gap:24px;flex-wrap:wrap;
  font-size:10.5px;color:var(--navy);opacity:.55}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  :root{--gap:18px}
  .board{padding-inline:20px}
  .key{padding:20px}
  .chap{margin-top:66px}
  .site-head{padding-inline:20px}
  .head-nav{display:none}
  .key-mascot{width:88px}
}
@media(max-width:900px){
  .keys{grid-template-columns:repeat(6,1fr)}
  .keys > *{grid-column:span 6 !important;grid-row:auto !important}
}
@media(max-width:760px){
  .hero-bar{padding:26px}
  .chap-head{flex-direction:column;gap:16px}
  .key-title,.key-title--big{font-size:26px}
  .key-stat{font-size:44px}
}
@media(prefers-reduced-motion:reduce){
  .key,.rack-key,.key-bg,.key-mascot{transition:none}
}

/* ==========================================================================
   The US board (/beta2/index.html) — fourteen sections instead of eight.
   Everything below is additive; the CS/DE/PL boards do not use it.
   ========================================================================== */

/* ---------- A fact we do not have yet ----------
   Printed where it will be missed rather than quietly left out. Nothing on this
   page is typeset as a claim unless it is one, so an unverified number, an
   unconfirmed certification or a client name without written consent shows up
   here instead of in the prose. Grep for "needs" before launch. */
.needs{display:block;margin:12px 0;padding:9px 14px;border-radius:10px;
  border:1.5px dashed var(--red);background:rgba(255,132,140,.10);
  color:var(--navy);font-size:10.5px;line-height:1.5}
.needs b{display:block;font-family:var(--font-head);font-weight:700;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin-bottom:3px}
.key--navy .needs,.key--photo .needs{color:var(--white);
  background:rgba(255,132,140,.16)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 24px;border-radius:8px;
  font-family:var(--font-mono);font-weight:500;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:transform var(--press),box-shadow var(--press)}
.btn--go{background:var(--turquoise);color:var(--navy);
  box-shadow:5px 5px 0 rgba(0,0,0,.35)}
.btn--go:hover{transform:translate(5px,5px);box-shadow:0 0 0 rgba(0,0,0,.35)}
.btn--ghost{color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(251,251,251,.4)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--white)}
.btn--dark{background:var(--navy);color:var(--white);box-shadow:5px 5px 0 rgba(23,32,46,.25)}
.btn--dark:hover{transform:translate(5px,5px);box-shadow:0 0 0 rgba(23,32,46,.25)}
.btn--line{color:var(--navy);box-shadow:inset 0 0 0 1.5px rgba(23,32,46,.35)}
.btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn--sm{height:36px;padding:0 16px;font-size:10px;
  background:var(--navy);color:var(--white)}
.btn--sm:hover{background:var(--turquoise);color:var(--navy)}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-cta--stack{flex-direction:column;align-items:stretch;margin-bottom:20px}
.hero-cta--stack .btn{width:100%}
.head-right{display:flex;align-items:center;gap:16px}

/* ---------- Stat strip under the hero ---------- */
.strip{display:flex;flex-wrap:wrap;gap:0 44px;margin-top:26px;
  padding:22px 4px 0;border-top:1.5px solid rgba(23,32,46,.12)}
.strip .stat{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-size:11.5px;opacity:.72;padding:6px 0}
.strip .stat b{font-family:var(--font-head);font-weight:900;font-size:26px;
  letter-spacing:-.02em;opacity:1}
.strip .needs{flex-basis:100%;margin:6px 0 0}

/* ---------- Prose panel ----------
   Section 01 and the other read-it-whole blocks. No tiles, no icons: the text is
   short enough to be read straight through, which is the entire point of it. */
.panel p{margin:0 0 14px;font-size:14px;line-height:1.7;max-width:78ch}
.panel p:last-child{margin-bottom:0}
.key--navy.panel p{opacity:.86}
.panel .key-go{margin-top:18px}

/* ---------- Discipline card ---------- */
.disc .key-eyebrow{background:transparent;color:inherit;padding:0;
  opacity:.62;letter-spacing:.14em}
.key--navy.disc .key-eyebrow,.key--turquoise.disc .key-eyebrow,
.key--blue.disc .key-eyebrow,.key--violet.disc .key-eyebrow,
.key--yellow.disc .key-eyebrow{background:transparent;color:inherit}
.disc .key-title{margin-top:8px;padding-top:0}
.disc .key-sub{max-width:70ch}
.disc .key-legend{border-radius:7px;font-size:9px;width:auto;padding:0 7px}
.kinds{margin:16px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.55}
.kinds li{margin-top:9px;padding-left:16px;position:relative;opacity:.85}
.kinds li::before{content:"";position:absolute;left:0;top:.5em;
  width:8px;height:3px;border-radius:2px;background:currentColor;opacity:.5}
.kinds b{font-weight:500;opacity:1}
.key-meta--rule{margin-top:16px;padding-top:14px;
  border-top:1.5px solid rgba(23,32,46,.16);font-size:11.5px;opacity:.75}
.key--navy .key-meta--rule{border-top-color:rgba(251,251,251,.22)}

/* A cap that is only a link out of the section. */
.close{flex-direction:row;align-items:center;justify-content:space-between;
  gap:24px;padding:22px 26px}
.close .key-title{margin:0;padding:0}
.close .key-go{margin:0}
.close .key-arrow{position:static}

/* ---------- Case card ---------- */
.case .key-stat{margin-top:14px;padding-top:0}
.case .key-title{margin-top:16px;padding-top:0;opacity:.72;
  font-family:var(--font-mono);font-weight:500;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase}
.case-line{margin:12px 0 0;font-size:12.5px;line-height:1.6;opacity:.82;max-width:62ch}
.case-line b{font-weight:500;opacity:1}
.also{flex-direction:column;gap:4px}

/* ---------- The eight patterns, as a table ---------- */
.sheet{padding:26px}
.grid{width:100%;border-collapse:collapse;font-size:12px;line-height:1.5}
.grid th,.grid td{text-align:left;padding:12px 14px 12px 0;
  border-bottom:1px solid rgba(23,32,46,.10);vertical-align:top}
.grid thead th{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.5;padding-bottom:10px}
.grid tbody th{font-family:var(--font-head);font-weight:700;font-size:14px;
  white-space:nowrap;padding-right:22px}
.grid td{opacity:.78}
.grid .arrow{color:var(--accent);opacity:1;padding-right:14px}
.grid .effect{white-space:nowrap;opacity:.6;font-size:11px}
.sheet .key-meta{margin-top:18px}
.sheet .key-go{display:inline-block;margin-top:14px}

/* Nested grid — the integration groups inside one cap. */
.keys--nested{gap:14px;width:100%}
.keys--nested .key{box-shadow:inset 0 0 0 1.5px rgba(23,32,46,.12);padding:18px}
.keys--nested .key--turquoise,.keys--nested .key--accent{box-shadow:none}
.keys--nested .key-title{margin-top:10px;padding-top:0;font-size:15px;line-height:1.35}

/* Two links side by side. */
.links{flex-direction:row;gap:32px;align-items:center;padding:22px 26px}
.links .key-go{margin:0}

/* ---------- Question and answer ---------- */
.qa{padding:18px 0;border-top:1.5px solid rgba(23,32,46,.12)}
.qa:first-child{border-top:none;padding-top:0}
.qa b{display:block;font-family:var(--font-head);font-weight:700;font-size:16px;
  margin-bottom:8px}
.qa p{margin:0;font-size:13px;line-height:1.65;opacity:.8;max-width:76ch}

@media(max-width:900px){
  .grid thead{display:none}
  .grid tr{display:block;padding:12px 0;border-bottom:1px solid rgba(23,32,46,.10)}
  .grid th,.grid td{display:block;border:none;padding:2px 0}
  .grid .arrow{display:none}
  .strip{gap:0 24px}
}

/* ---------- Subpage masthead ---------- */
.hero-bar--page{padding:40px 48px 44px}
.hero-bar--page h1{font-size:clamp(30px,4vw,58px);max-width:22ch}
.back{display:flex;width:fit-content;align-items:center;gap:9px;color:var(--white);
  opacity:.6;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:22px;transition:opacity .18s}
.back:hover{opacity:1}
.back span{display:inline-flex;width:26px;height:26px;border-radius:50%;
  border:1.5px solid currentColor;align-items:center;justify-content:center}
.back svg{width:13px;height:13px}
.hero-meta{margin-top:14px !important;font-size:11px;letter-spacing:.04em;
  opacity:.55 !important}
/* A stat strip living inside a cap rather than under the hero. */
.strip--in{margin-top:16px;padding-top:18px;gap:0 32px;
  border-top-color:rgba(23,32,46,.2)}
.strip--in .stat b{font-size:22px}

/* ---------- Calculator ---------- */
.calc{gap:22px;padding:30px}
.calc-field{display:block}
.calc-label{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;font-size:12px;letter-spacing:.02em}
.calc-label b{font-family:var(--font-head);font-weight:900;font-size:20px;
  letter-spacing:-.02em}
.calc-hint{display:block;margin-top:7px;font-size:10.5px;opacity:.55}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
  height:6px;margin:14px 0 0;border-radius:99px;background:rgba(23,32,46,.14);
  cursor:pointer}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:24px;height:24px;border-radius:8px;background:var(--turquoise);
  box-shadow:3px 3px 0 var(--key-side);cursor:grab}
.calc input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;
  transform:translate(3px,3px);box-shadow:0 0 0 var(--key-side)}
.calc input[type=range]::-moz-range-thumb{width:24px;height:24px;border:none;
  border-radius:8px;background:var(--turquoise);box-shadow:3px 3px 0 var(--key-side)}
.calc input[type=range]:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
.calc-out{justify-content:flex-start}
.calc-big{font-family:var(--font-head);font-weight:900;
  font-size:clamp(40px,5vw,72px);line-height:.9;letter-spacing:-.03em;
  margin-top:18px}

/* ---------- Client logo wall ----------
   Marks already shown publicly on enterai.cz, run small and evenly weighted.
   A logo wall shouted at full size reads as insecurity; this one is a footnote
   under the cases that says "and these too". */
.logos{padding:26px 30px 30px;align-items:center;text-align:center}
.logo-wall{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(24px,3.6vw,52px);margin-top:22px;padding-inline:clamp(0px,2vw,32px)}
.logo-wall img{height:clamp(19px,2vw,26px);width:auto;
  opacity:.5;transition:opacity .22s}
.logo-wall img:hover{opacity:1}

/* ---------- EU star ring ----------
   Twelve stars in the manual's Zářivá žlutá, so the cap reads as Europe without
   importing a blue and a gold the brand does not own. Sits in the corner as a
   mark, not as a flag. */
.eu-stars{position:absolute;right:26px;bottom:26px;
  width:clamp(84px,9vw,124px);height:auto;color:var(--yellow);opacity:.85;
  pointer-events:none;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
a.key:hover .eu-stars{transform:rotate(30deg)}
@media(max-width:900px){.eu-stars{position:static;margin-top:22px;width:78px}}

/* ---------- Banner photograph ----------
   Navy stays the base. The photograph sits inside it, desaturated and washed in
   the accent, fading out to the left so the headline never lands on busy
   pixels — the manual asks for a photo with room for elements, and this is how
   you get that from a room full of laptops. Colour still leads; the picture is
   texture and a hint that real people do this work. */
.hero-bar{isolation:isolate}
/* The hero background is a slow film rather than a still: four frames of the
   same team at work, each crossfading into the next over a twelve-second beat
   with a drift of a couple of percent behind it. Grey, dark and far enough
   under the wash that it reads as movement rather than as a slideshow — the
   point is that the place looks alive, not that anyone studies the pictures.

   Four frames, twelve seconds each. The first carries a negative delay so the
   hero is already showing an image on the first paint instead of fading up
   from flat navy. */
/* A photograph sunk into a coloured cap. The point is texture, not a picture:
   the flat colour has to stay the thing you see, and the type has to stay as
   legible as it was on a plain tile. So the image is greyscale, masked away
   from the top-left where the words are, and blended rather than laid on top —
   multiply on a light cap, screen on a dark one, because a single blend mode
   turns one of the two to mud. It comes up a little on hover, which is the
   only place it is meant to be noticed. */
/* Without this the tint is invisible and looks like a build that did not ship.
   A child at z-index -1 paints above its parent's own background only inside a
   stacking context, and .key is position:relative with z-index auto — which is
   not one. The colour painted straight over the photograph. .key--photo already
   carried isolation:isolate for exactly this reason; the tinted caps need it
   too, and it doubles as the container the multiply blends against. */
.key--tinted{isolation:isolate;overflow:hidden}
.key-tint{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-1;pointer-events:none;opacity:.15;
  filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;
  transition:opacity .3s cubic-bezier(.2,.7,.3,1);
  -webkit-mask-image:linear-gradient(305deg,#000 0%,rgba(0,0,0,.5) 40%,transparent 74%);
  mask-image:linear-gradient(305deg,#000 0%,rgba(0,0,0,.5) 40%,transparent 74%)}
.key--navy .key-tint,.key--soft .key-tint{mix-blend-mode:screen;opacity:.2}
.key:hover .key-tint{opacity:.26}
.key--navy:hover .key-tint,.key--soft:hover .key-tint{opacity:.3}
@media(prefers-reduced-motion:reduce){.key-tint{transition:none}}

.hero-film{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* When a real clip is in place it takes the same slot and the same treatment as
   the stills, so swapping one for the other changes nothing but the source. */
.hero-film--clip{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  filter:grayscale(1) contrast(1.05) brightness(.55)}
.hero-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%;opacity:0;will-change:opacity,transform;
  filter:grayscale(1) contrast(1.05) brightness(.55);
  animation:heroCut 32s linear infinite, heroDrift 32s linear infinite}
.hero-film img:nth-child(1){animation-delay:-1s,-1s}
.hero-film img:nth-child(2){animation-delay:7s,7s}
.hero-film img:nth-child(3){animation-delay:15s,15s}
.hero-film img:nth-child(4){animation-delay:23s,23s}
@keyframes heroCut{
  0%{opacity:0} 5%{opacity:1} 22%{opacity:1} 28%{opacity:0} 100%{opacity:0}}
/* The drift runs the whole eight seconds and moves far enough to be read as
   movement. The first pass crept two percent over twelve seconds, which is
   below the threshold at which anyone glancing at the page sees anything at
   all — a still picture with extra bytes. */
@keyframes heroDrift{
  0%{transform:scale(1.04) translate3d(2%,1.2%,0)}
  28%{transform:scale(1.16) translate3d(-2.4%,-1.6%,0)}
  100%{transform:scale(1.16) translate3d(-2.4%,-1.6%,0)}}
/* Anyone who has asked the system to stop moving things gets one still frame. */
@media(prefers-reduced-motion:reduce){
  .hero-film img{animation:none;transform:scale(1.04)}
  .hero-film img:nth-child(1){opacity:1}
}
.hero-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,
      var(--navy) 0%, var(--navy) 34%,
      rgba(23,32,46,.92) 52%, rgba(23,32,46,.74) 100%),
    linear-gradient(220deg,
      color-mix(in srgb, var(--accent) 55%, transparent) 0%,
      transparent 62%)}
.hero-bar .hero-say,.hero-bar .hero-side{position:relative;z-index:1}
@media(max-width:900px){
  .hero-wash{background:linear-gradient(180deg,
    rgba(23,32,46,.88) 0%, var(--navy) 62%)}
}

/* ---------- Face wall ----------
   The room next door, and the people in it. Portraits run quiet and square so
   the block reads as one object; hovering brings a face forward, which is the
   only invitation this cap needs. */
.faces{justify-content:space-between}
.face-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin-top:20px}
.face-wall img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;
  filter:grayscale(.5);opacity:.9;
  transition:filter .25s,opacity .25s,transform .25s}
.faces:hover .face-wall img{filter:grayscale(0);opacity:1}
.face-wall img:hover{transform:translateY(-3px)}
@media(max-width:900px){.face-wall{grid-template-columns:repeat(4,1fr)}}

/* ---------- Stage track ----------
   Four segments per stage cap, with everything behind you solid, the one you
   are on filled and pulsing quietly, and the road ahead outlined. It turns four
   separate claims into one sequence you can read at a glance. */
.track{display:flex;gap:6px;margin-top:18px;padding-top:16px;
  border-top:1.5px solid rgba(23,32,46,.16)}
.track i{flex:1;height:6px;border-radius:99px;
  box-shadow:inset 0 0 0 1.5px rgba(23,32,46,.32)}
.track i.done{background:rgba(23,32,46,.34);box-shadow:none}
.track i.on{background:var(--navy);box-shadow:none}
.key--navy .track{border-top-color:rgba(251,251,251,.22)}
.key--navy .track i{box-shadow:inset 0 0 0 1.5px rgba(251,251,251,.34)}
.key--navy .track i.done{background:rgba(251,251,251,.38);box-shadow:none}
.key--navy .track i.on{background:var(--white);box-shadow:none}

/* ---------- The document flow, running ----------
   Five nodes stacked, with the wire marching between them and a packet dropping
   from one to the next. Laid out down rather than across: five nodes side by
   side in a five-column cap left every label clipped, and this way each step
   gets a full line and the sequence reads as a sequence.

   The cycle is 8s with each node staggered 1.6s behind the last, so the whole
   thing reads as one machine ticking rather than five elements animating. The
   approval node lights amber — it is the one step that waits for a person.
   All CSS. It stops dead under prefers-reduced-motion. */
.viz{justify-content:flex-start}
.flowviz{margin-top:20px;width:100%}
.fv-row{display:flex;flex-direction:column;align-items:stretch}
.fv-node{position:relative;display:flex;align-items:baseline;gap:12px;
  padding:11px 16px;border-radius:12px;
  box-shadow:inset 0 0 0 1.5px rgba(23,32,46,.14);
  animation:fvnode 8s linear infinite;animation-delay:calc(var(--i) * 1.6s)}
.fv-node b{font-family:var(--font-head);font-weight:700;font-size:13.5px;
  line-height:1.2;white-space:nowrap}
.fv-node small{font-size:10.5px;opacity:.55;line-height:1.2}
.fv-led{position:absolute;right:16px;top:50%;margin-top:-4.5px;
  width:9px;height:9px;border-radius:50%;background:rgba(23,32,46,.16);
  animation:fvled 8s linear infinite;animation-delay:calc(var(--i) * 1.6s)}
.fv-node{--lit:var(--turquoise)}
/* The person in the middle of it holds amber, not turquoise. */
.fv-node:nth-child(7){--lit:var(--yellow)}

.fv-wire{position:relative;align-self:start;margin-left:26px;
  width:2px;height:18px;
  background-image:repeating-linear-gradient(180deg,
    rgba(23,32,46,.30) 0 5px, transparent 5px 11px);
  background-size:2px 11px;
  animation:fvmarch 1.1s linear infinite}
.fv-packet{position:absolute;left:50%;top:0;width:7px;height:7px;
  margin-left:-3.5px;border-radius:50%;background:var(--turquoise);
  box-shadow:0 0 0 2px rgba(65,227,158,.24);opacity:0;
  animation:fvpacket 8s linear infinite;
  animation-delay:calc(var(--i) * 1.6s + .5s)}

@keyframes fvmarch{to{background-position:0 11px}}
@keyframes fvled{
  0%,6%{background:var(--lit);transform:scale(1.35)}
  17%,100%{background:rgba(23,32,46,.16);transform:scale(1)}}
@keyframes fvnode{
  0%,6%{box-shadow:inset 0 0 0 1.5px var(--lit)}
  18%,100%{box-shadow:inset 0 0 0 1.5px rgba(23,32,46,.14)}}
@keyframes fvpacket{
  0%{top:0;opacity:0}
  4%{opacity:1}
  11%{top:100%;opacity:1}
  13%,100%{top:100%;opacity:0}}

.fv-foot{margin:18px 0 0;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.5}

@media(prefers-reduced-motion:reduce){
  .fv-node,.fv-led,.fv-wire,.fv-packet{animation:none}
  .fv-packet{opacity:0}
}

/* ---------- Footer ----------
   The legal and contact block the board was missing entirely: who we are, where
   we are, how to reach us, and which company in the group you are dealing with.
   A prototype still has to be able to answer "who is this". */
.site-foot{display:block;opacity:1;padding-top:64px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(24px,4vw,64px);
  padding-bottom:34px;border-bottom:1.5px solid rgba(23,32,46,.12)}
.foot-mark{height:24px;width:auto;margin-bottom:18px}
.foot-col{display:flex;flex-direction:column;gap:9px;font-size:11.5px}
.foot-col--who p{margin:0;max-width:34ch;line-height:1.6}
.foot-col--who p:first-of-type{font-family:var(--font-head);font-weight:700;
  font-size:14px;line-height:1.3;margin-bottom:14px}
.foot-reg{opacity:.6;font-size:11px}
.foot-h{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.45;margin-bottom:4px}
.foot-col a{opacity:.72;transition:opacity .18s}
.foot-col a:hover{opacity:1}
.foot-line{display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;padding-top:22px;font-size:10.5px;opacity:.5}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Wide photo cap ----------
   A panorama behind a headline needs the scrim to run sideways, not down: the
   text sits on the left, the picture earns its place on the right. The vertical
   version buried this one completely. */
.key--wide{min-height:clamp(260px,26vw,380px);justify-content:flex-end}
.key--wide::before{background:linear-gradient(100deg,
  rgba(14,22,36,.95) 0%,rgba(14,22,36,.88) 34%,
  rgba(14,22,36,.55) 58%,rgba(14,22,36,.28) 100%)}
.key--wide .key-title,.key--wide .key-sub{max-width:34ch}
/* In a narrow cap the same sideways scrim has to clear sooner, or the subject
   never emerges from it. */
.key--wide[style*="span 4"]::before{background:linear-gradient(115deg,
  rgba(14,22,36,.94) 0%,rgba(14,22,36,.80) 40%,
  rgba(14,22,36,.42) 68%,rgba(14,22,36,.15) 100%)}
.key--wide[style*="span 4"] .key-title,
.key--wide[style*="span 4"] .key-sub{max-width:24ch}
/* Mirror image: some frames put the subject on the left and leave the right
   half open. The scrim and the type move with them rather than sitting on top
   of the person. */
.key--wide-r::before{background:linear-gradient(260deg,
  rgba(14,22,36,.95) 0%,rgba(14,22,36,.88) 34%,
  rgba(14,22,36,.55) 58%,rgba(14,22,36,.28) 100%)}
.key--wide-r{align-items:flex-end}
.key--wide-r>*{align-self:flex-end}
.key--wide-r .key-title,.key--wide-r .key-sub,
.key--wide-r .key-eyebrow,.key--wide-r .key-meta{max-width:min(34ch,42%);text-align:left}

@media(max-width:900px){
  .key--wide::before,.key--wide-r::before{background:linear-gradient(180deg,
    rgba(14,22,36,.45) 0%,rgba(14,22,36,.9) 100%)}
  .key--wide .key-title,.key--wide .key-sub{max-width:none}
  .key--wide-r{align-items:flex-start}
  .key--wide-r>*{align-self:flex-start}
  .key--wide-r .key-title,.key--wide-r .key-sub{max-width:none}
}