/* ============================================================
   FONT-FACE (Greycliff CF Heavy/Bold + Fira Mono) — copied from assets/styles.css
   ============================================================ */
@font-face{font-family:'Greycliff CF';src:url('fonts/GreycliffCF-Heavy.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Greycliff CF';src:url('fonts/GreycliffCF-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Mono';src:url('fonts/FiraMono-Medium.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

/* ============================================================
   CONCEPT C — "DEEP-TECH LOOP"
   Premium dark, navy-dominant. Crafted from scratch.
   ============================================================ */
:root{
  /* type */
  --head:'Greycliff CF','Plus Jakarta Sans',system-ui,Arial,sans-serif;
  --mono:'Fira Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --track:.18em;
  /* motion / radius (loop deps) */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-emph:cubic-bezier(.2,.7,.3,1);
  --dur-fast:.18s; --dur:.28s; --dur-slow:.55s;}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--mono);font-size:15px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;}
::selection{background:rgba(65,227,158,.28);color:var(--white)}
a{color:inherit;text-decoration:none}
img,svg{display:block}

p{margin:0}

/* ---------- ambient depth layers (NOT gradient on navy itself — these are vignette/glow over a flat field) ---------- */
.bg-field{position:fixed;inset:0;z-index:-4;pointer-events:none;background:transparent}

.bg-grid{display:none}  /* tečkovaná mřížka byla kreslená bílou na tmu */

/* ---------- scroll progress ---------- */
#progress{position:fixed;top:0;left:0;width:0;z-index:120;}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 40px}
@media(max-width:760px){.wrap{padding:0 22px}}

/* ============================================================ NAV ============================================================ */
#header{position:fixed;top:0;left:0;right:0;z-index:100;}
#header::after{content:"";position:absolute;inset:0;border-bottom:1px solid transparent;transition:border-color var(--dur);pointer-events:none}

.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:13px}
.brand .logo{height:30px;width:auto}
.brand .logo svg{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px}
#navlinks a{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:9px 13px;transition:color var(--dur-fast),background var(--dur-fast);position:relative}
#navlinks a:hover{color:var(--white)}

#navlinks a:not(.cta){
  justify-content:center;}

.mtoggle{display:none}
/* language switcher */
.langsw{display:inline-flex;align-items:center;margin-right:10px}
.langsw a{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--muted);text-decoration:none;}
.langsw a:hover{color:var(--white)}

.langsw.lang-mobile{display:none}
@media(max-width:900px){.langsw.lang-mobile{display:inline-flex;margin-top:18px;gap:4px}}

/* ============================================================ HERO ============================================================ */
.hero{position:relative;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:56px;align-items:start}
.loop-col{position:sticky;top:104px;align-self:start}
@media(max-width:1080px){.hero-grid{grid-template-columns:1fr;gap:44px}.loop-col{position:static;top:auto}}

.kicker{
  margin-bottom:30px}

@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

.h1{font-family:var(--head);color:var(--white);
  margin-bottom:26px}
.h1 .accent{color:var(--green);position:relative;white-space:nowrap}
.h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.045em;
  background:var(--green);opacity:.32;border-radius:2px}

.lede{margin-bottom:38px}
.lede b{color:var(--white);font-weight:500}

.btn{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 26px;border:0;cursor:pointer;
  font-family:var(--mono);font-size:13.5px;font-weight:500;letter-spacing:.02em;border-radius:var(--r-sm);
  background:var(--green);transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur),background var(--dur);white-space:nowrap}
.btn:hover{background:var(--green-soft);transform:translateY(-2px)}
.btn .arr{transition:transform var(--dur-fast)}
.btn:hover .arr{transform:translateX(4px)}
.cta-note{letter-spacing:.04em;}
.cta-note b{color:var(--text);font-weight:500}

/* ---------- hero loop frame (the star centerpiece) ---------- */
.loop-frame{position:relative;padding:30px 24px 26px;
  border:1px solid var(--line-2);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05)}
.loop-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(65,227,158,.35),rgba(255,255,255,0) 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.loop-cap{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}
.loop-cap .live{display:inline-flex;align-items:center;gap:7px;color:var(--green)}
.loop-cap .live .b{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulseDot 2s infinite}
.loop-foot{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted)}
.loop-foot i{font-style:normal;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 10px;white-space:nowrap}
.loop-foot .d{width:8px;height:8px;border-radius:50%;flex:none}
.lf-people{background:transparent;border:1.5px solid #6B7488}
.lf-agent{background:var(--green)}
.lf-sys{background:#161f2c;border:1.5px solid rgba(65,227,158,.55);border-radius:2px}
.loop-foot i b{color:var(--white);font-weight:600}

/* ============================================================ LOOP VIZ CSS (from loop2030, refined frame above) ============================================================ */

.li-item{display:inline-flex;align-items:center;gap:7px;color:var(--text);white-space:nowrap}
.li-item::before{content:'';width:9px;height:9px;border-radius:50%;flex:none}
.li-item em{font-style:normal;color:var(--text)}
.li-people::before{background:transparent;border:1.5px solid #6B7488}
.li-agent::before{background:var(--green)}
.li-star::before{background:radial-gradient(circle at 40% 35%,#7CF0BE,#27B981);box-shadow:0 0 7px rgba(65,227,158,.55)}
.loop-stage{position:relative;width:100%;max-width:600px;margin:0 auto}

.lh-svg{width:100%;height:auto;overflow:visible;display:block}
.ring-bg{fill:none;stroke:rgba(255,255,255,.10);stroke-width:2}
.edge-ring{fill:none;stroke:rgba(255,255,255,.17);stroke-width:1.5;stroke-dasharray:1.5 7}
.seg{fill:none;stroke-width:6.5;stroke-linecap:round;filter:drop-shadow(0 1px 4px rgba(0,0,0,.3))}
/* tok informace = jemné světlo, které KLOUŽE po prstenci (Apple-decentní, ne pochodující čárky).
   pathLength=1000; 3 dlouhé měkké přesuny, rozostřené, pomalé, nízký kontrast. */
.seg-flow{fill:none;stroke:rgba(232,246,255,.6);stroke-width:6.5;stroke-linecap:round;stroke-dasharray:60 273.3;filter:blur(1.4px) drop-shadow(0 0 7px rgba(150,220,255,.55));animation:segFlow 8s linear infinite}
@keyframes segFlow{to{stroke-dashoffset:-1000}}
@media(prefers-reduced-motion:reduce){.seg-flow{animation:none;opacity:0}}
.station .s-disc{fill:#1e2a3c;stroke-width:3;transition:fill var(--dur) var(--ease),stroke var(--dur) var(--ease),stroke-width var(--dur) var(--ease),opacity var(--dur) var(--ease);filter:drop-shadow(0 9px 20px rgba(0,0,0,.6))}

.station .s-name{font-family:var(--head);font-weight:700;font-size:12px;fill:#fff;letter-spacing:-.02em}
.station .s-lab{font-family:var(--mono);font-weight:500;font-size:13px;fill:#EEF3F9;letter-spacing:.02em}
.station .s-agent{font-family:var(--mono);font-weight:500;font-size:8.4px;letter-spacing:.01em;opacity:.92}
.station .s-act{font-family:var(--mono);font-weight:500;font-size:8.2px;letter-spacing:.01em;opacity:0;transition:opacity .35s ease}
.station .s-act.on{opacity:.96}

.station .s-pulse{fill:none;stroke-width:2.5;opacity:0}
.station{cursor:pointer}
.person{cursor:pointer}
.person .p-body{fill:var(--text);transition:fill var(--dur) var(--ease),stroke var(--dur) var(--ease),stroke-width var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.person .p-ring{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.18);stroke-width:1.25;transition:fill var(--dur) var(--ease),stroke var(--dur) var(--ease),stroke-width var(--dur) var(--ease),opacity var(--dur) var(--ease);filter:drop-shadow(0 5px 12px rgba(0,0,0,.45))}
.person:hover .p-body,.person.hl .p-body{fill:var(--green)}
.person:hover .p-ring,.person.hl .p-ring{stroke:var(--green)}
.beam{fill:none;stroke:rgba(65,227,158,.34);stroke-width:1.6;stroke-dasharray:1.5 5;stroke-linecap:round;transition:stroke .25s}
.beam.hl{stroke:rgba(65,227,158,.78)}
.beam-dot{fill:#9CF5CE;filter:drop-shadow(0 0 6px rgba(65,227,158,.95))}
.person .p-role{font-family:var(--mono);font-size:11.5px;fill:var(--text);letter-spacing:.03em;transition:fill var(--dur) var(--ease),stroke var(--dur) var(--ease),stroke-width var(--dur) var(--ease),opacity var(--dur) var(--ease);pointer-events:none}
.person:hover .p-role,.person.hl .p-role{fill:#fff}
.person .p-sub{font-family:var(--mono);font-size:8.6px;fill:#8a97a8;letter-spacing:.02em;transition:fill var(--dur) var(--ease),stroke var(--dur) var(--ease),stroke-width var(--dur) var(--ease),opacity var(--dur) var(--ease);pointer-events:none}
.person:hover .p-sub,.person.hl .p-sub{fill:var(--text)}
.dot{filter:drop-shadow(0 0 6px rgba(65,227,158,.9))}
.star-glow{fill:var(--green);opacity:0}
.star-ring{fill:none;stroke:rgba(65,227,158,.45);stroke-width:1.5;stroke-dasharray:3 7}
.star-disc{cursor:pointer}
.spark{fill:var(--green);opacity:0}
.spoke{stroke-width:1.4;stroke-dasharray:2 7;opacity:.30;stroke-linecap:round}
.msg{filter:drop-shadow(0 0 5px rgba(120,240,190,.9))}
.msg-tail{stroke-width:1.4}
.star-cast{fill:none;stroke:rgba(65,227,158,.65);stroke-width:2}

.loop-bubble{position:absolute;z-index:30;width:min(248px,calc(100vw - 40px));background:#0E141F;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px 15px;font-size:12.5px;line-height:1.55;color:var(--text);box-shadow:0 18px 44px -16px rgba(0,0,0,.85);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease);left:0;top:0;transform:translate(-50%,calc(-100% - 13px))}
.loop-bubble.wide{width:min(340px,calc(100vw - 40px))}
/* ============ PRÁVNÍ STRÁNKY (gdpr · podmínky) ============ */
.legal-body{max-width:820px}
.legal-body h2{font-family:var(--head);color:var(--white);}

.legal-body p,.legal-body li{font-family:var(--mono);color:var(--text)}
.legal-body p{margin:0 0 14px}
.legal-body ul,.legal-body ol{margin:0 0 16px;padding-left:22px}
.legal-body a{color:var(--green)}
.legal-body strong,.legal-body b{color:var(--white);font-weight:600}
/* AI Act timeline (stránka Bezpečnost) */
.ai-act-timeline{display:flex;flex-direction:column;gap:0;margin:18px 0 26px;border-top:1px solid var(--line)}
.ait-row{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.ait-d{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--green);letter-spacing:.02em;white-space:nowrap}
.ait-t{font-family:var(--mono);font-size:13.5px;line-height:1.65;color:var(--text)}
.ait-t b{color:var(--white);font-weight:600}
@media(max-width:640px){.ait-row{grid-template-columns:1fr;gap:4px}}
.legal-note{font-family:var(--mono);font-size:11.5px;line-height:1.6;border-left:2px solid var(--line);padding-left:14px;margin:4px 0 24px}
/* ===== BLOG ===== */
.article-date{font-family:var(--mono);font-size:12px;color:var(--green);letter-spacing:.03em;margin-top:12px}
.article-body .lead{font-size:16px;line-height:1.7;color:var(--text-strong)}
.article-body .article-cta-line{background:linear-gradient(120deg,rgba(65,227,158,.06),rgba(110,206,255,.035));border:1px solid var(--line);padding:16px 18px;font-size:13.5px;margin:26px 0 18px}
.article-body .article-note{font-size:11.5px;color:var(--muted);border-left:2px solid var(--line);padding-left:14px;margin-top:26px}
.article-back{margin-top:34px}
.article-back a{font-family:var(--mono);font-size:13px;color:var(--muted);text-decoration:none;transition:color .2s ease}
.article-back a:hover{color:var(--green)}
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){.blog-grid{grid-template-columns:1fr}}
.blog-card{display:flex;flex-direction:column;gap:9px;text-decoration:none;}

.bc-meta{align-items:center;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}

.bc-title{font-family:var(--head);font-weight:700;font-size:clamp(17px,2.1vw,20px);line-height:1.25;color:var(--white)}
.bc-desc{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--muted);flex:1}
.bc-more{font-family:var(--mono);font-size:12.5px;color:var(--text);display:inline-flex;align-items:center;gap:6px;margin-top:2px}
.blog-card:hover .bc-more{color:var(--green)}
.blog-card .arr{transition:transform .25s ease}
.blog-card:hover .arr{transform:translateX(3px)}
/* systémové dlaždice v jádru smyčky (sdílené: home + oborové stránky) */
.sc-box{fill:url(#scPanel);stroke:rgba(255,255,255,.13);stroke-width:1;filter:drop-shadow(0 14px 28px rgba(0,0,0,.55))}
.sc-title{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;fill:rgba(255,255,255,.5)}
.sc-star{font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;fill:#6b7686}
.sc-tile{transform-box:fill-box;transform-origin:center;animation:scLift 8s ease-in-out infinite;animation-delay:calc(var(--i)*.5s)}
.sc-tile-bg{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.09);stroke-width:1;animation:scGlow 8s ease-in-out infinite;animation-delay:calc(var(--i)*.5s)}
.sc-tile-tx{font-family:var(--mono);font-size:8px;fill:#E7ECF3}
@keyframes scLift{0%,18%,100%{transform:scale(1)}8%{transform:scale(1.13)}}
@keyframes scGlow{0%,18%,100%{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.09)}8%{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.28)}}
@media(prefers-reduced-motion:reduce){.sc-tile,.sc-tile-bg{animation:none}}
.loop-bubble.show{opacity:1}
.loop-bubble.below{transform:translate(-50%,13px)}
.loop-bubble .bt{font-family:var(--head);font-weight:800;color:var(--white);font-size:13.5px;display:block;margin-bottom:6px}
.loop-bubble .bt .bdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.loop-bubble .bl{color:var(--green);font-weight:500}
.loop-bubble .brow{display:block}
.loop-bubble .brow + .brow{margin-top:7px}
.loop-bubble::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);border:7px solid transparent;border-top-color:#0E141F}
.loop-bubble.below::after{bottom:auto;top:-7px;border-top-color:transparent;border-bottom-color:#0E141F}

/* ============================================================ SECTION 2 — CO / JAK ============================================================ */
.block{position:relative;}

.sec-head h2 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ============================================================ FOOTER ============================================================ */
.foot{border-top:1px solid var(--line);padding:40px 0 56px;margin-top:10px}

.foot .logo svg{height:24px}

/* ============================================================ MOBILE MENU (app.js deps) ============================================================ */
.mobile-menu{display:none}
@media(max-width:880px){
  #navlinks{display:none}
  .mtoggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px}
  .mtoggle span{width:24px;height:2px;background:var(--navy-1);border-radius:2px;transition:transform var(--dur),opacity var(--dur)}
  .mtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{display:block;position:fixed;top:78px;left:0;right:0;z-index:99;
    background:rgba(11,19,29,.97);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease)}
  .mobile-menu.open{max-height:380px}
  .mobile-menu a{display:block;padding:16px 22px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--line)}
  .mobile-menu a:last-child{border-bottom:0}
}

/* ============================================================ REVEAL ============================================================ */
.reveal{opacity:0;}
.reveal.in{opacity:1;transform:none}

@media(max-width:560px){

  .loop-foot{display:none}
}

/* ---- helpers ---- */
.gt{color:var(--green)}

.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--green)}

.sec-kicker .eyebrow{color:var(--green)}

/* ---- clients row ---- */

.ht-lab{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;}

/* ============================ ERA TIMELINE (pyramida→smyčka) ============================ */

.era-facts{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.era-facts .ef{border-left:2px solid var(--green-line);padding-left:13px}
.era-facts .ef-l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:3px}
.era-facts .ef-t{display:block;font-size:13.5px;color:var(--text);line-height:1.5;font-family:var(--mono)}

.era-synth em{font-style:normal;color:var(--green)}

.kw{color:var(--green);font-weight:700}

/* ============================ CTA card ============================ */
.cta-card{position:relative;overflow:hidden;
  text-align:center;}
.cta-card .eyebrow{margin-bottom:20px;display:inline-block}
.cta-card h2{font-family:var(--head);font-weight:900;color:var(--white);}
.cta-card h2 em{font-style:normal;color:var(--green)}
.cta-card>p{font-family:var(--mono);font-size:14.5px;line-height:1.6;color:var(--text);max-width:54ch;margin:0 auto 32px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn.big{height:56px;padding:0 30px;font-size:14px}
.btn.outline{background:transparent;border:1.5px solid var(--line-3)}
.btn.outline:hover{background:transparent;border-color:var(--green);box-shadow:none;transform:translateY(-2px)}

/* ============================ FULL FOOTER ============================ */
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:30px}}
.foot-grid .logo svg{height:30px;width:auto}
.foot-grid .logo path{fill:var(--white)}
.addr{font-family:var(--mono);font-size:12px;line-height:1.75;margin-top:18px}
.foot-grid a{font-family:var(--mono);font-size:13px;color:var(--text);transition:color var(--dur-fast)}
.foot-grid a:hover{color:var(--green)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-family:var(--mono);letter-spacing:.04em;}

/* ============================================================
   SUBPAGE PRIMITIVES (Compass / Launchpad / Orbit / Star)
   ============================================================ */
.subhero{position:relative;}

.subhero-grid{display:grid;grid-template-columns:1.02fr 1.06fr;gap:48px;align-items:center}
@media(max-width:980px){.subhero-grid{grid-template-columns:1fr;gap:40px}}
.subhero h1{font-family:var(--head);font-weight:900;color:var(--white);}
.subhero h1 .gt{color:var(--green)}
.subhero .lede{margin-top:24px;}

.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:32px}
.hero-note{font-family:var(--mono);font-size:12px;margin-top:18px}

/* numbered process */
.steps{display:grid;grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}

.step-card .sn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:900;font-size:17px;color:var(--green);background:var(--green-wash);border:1px solid var(--green-line);margin-bottom:18px}
.step-card h4{font-family:var(--head);margin-bottom:9px}
.step-card p{font-family:var(--mono);}

/* feature grid */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fgrid{grid-template-columns:1fr}}

.fcard h3{font-family:var(--head);margin-bottom:9px}
.fcard p{font-family:var(--mono);}

/* ============================ OBOR SCENE — tok systémy → AI agenti → ředitel ============================ */

.oflow-toggle{display:inline-flex;background:var(--ink);border:1px solid var(--line-2);border-radius:999px;padding:4px;margin-bottom:14px}
.oflow-toggle button{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);background:none;border:0;border-radius:999px;padding:8px 18px;cursor:pointer;transition:background .25s,color .25s}
.oflow-toggle button.active{background:var(--green);color:var(--on-accent);font-weight:500}
.oflow-cap{margin-top:12px;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--text);min-height:36px}

/* ===== Obor scene v4 — smyčka spolupráce ===== */

.oflow-cap b{color:var(--white);font-weight:500}

/* ============================================================
   LIGHT EDITORIAL — světlé, vzdušné sekce s reálnou fotkou (nový směr)
   ============================================================ */

.editorial{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
@media(max-width:900px){.editorial{grid-template-columns:1fr;gap:34px}}

.editorial h2{font-family:var(--head);font-weight:900;color:var(--white);}
.editorial h2 em{font-style:normal;color:var(--green)}
.editorial .ed-body p{font-family:var(--mono);font-size:15px;line-height:1.72;color:var(--text);max-width:46ch;margin-bottom:16px}
.editorial .ed-body p b{color:var(--white);font-weight:600}
.ed-photo{position:relative;overflow:hidden;box-shadow:0 50px 100px -50px rgba(23,32,46,.45);aspect-ratio:4/5}
.ed-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   PARTNER LOGA — Microsoft Solutions Partner + TD SYNNEX Destination AI
   (styl převzatý z loop2030: MS barevné čtverce + text, TDS bílé logo)
   ============================================================ */

.partner-logo{display:inline-flex;align-items:center;opacity:.92;transition:opacity var(--dur-fast) var(--ease)}
.partner-logo:hover{opacity:1}

.ms-logo{gap:13px}
.ms-logo .ms-sq{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:34px;height:34px;flex:none}
.ms-logo .ms-sq i{display:block;border-radius:0}
.ms-logo .ms-tx{display:flex;flex-direction:column;line-height:1.08;text-align:left}
.ms-logo .ms-tx b{font-family:var(--head);font-weight:800;font-size:19px;color:var(--white);letter-spacing:-.01em}
.ms-logo .ms-tx span{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.tds-logo .tds-mark{display:block;height:46px;aspect-ratio:1300/460;background:url('logos/tdsynnex-ink.png') left center/contain no-repeat}
@media(max-width:560px){.ms-logo .ms-sq{width:28px;height:28px}.ms-logo .ms-tx b{font-size:16px}.tds-logo .tds-mark{height:38px}}

/* ============================================================
   LOGO WALL — klientská loga (bílá, průhledné pozadí, vzdušně)
   ============================================================ */

.cl-logo{height:26px;width:auto;max-width:124px;object-fit:contain;opacity:.78;filter:brightness(0);transition:opacity .28s var(--ease),filter .28s var(--ease);flex:0 0 auto}

.cl-logo:hover{opacity:1}
@media(max-width:900px){.cl-logo{height:24px}}

/* --- A11Y: viditelný focus + redukovaný pohyb --- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,iframe:focus-visible{
  outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* animovaný gradient text na akcenty nadpisů */
.grad-text{background:linear-gradient(100deg,#41E39E,#6ECEFF,#B790FF,#E399FF,#41E39E);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:gradFlow 9s linear infinite}
@keyframes gradFlow{to{background-position:280% 0}}

/* kontaktní formulář na home — stavová hláška pod .cta-row */
.cta-note{margin-top:12px;font-family:var(--mono);font-size:13px;line-height:1.5;opacity:0;transform:translateY(4px);animation:ctaNoteIn .3s var(--ease) forwards}
.cta-note.ok{color:var(--green)}

@keyframes ctaNoteIn{to{opacity:1;transform:none}}

/* hero CTA */
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}

/* ============================================================
   OBOR · benefit accordion (barevné roll-upy) + shine na nadpisech
   ============================================================ */

@keyframes shineSweep{0%{background-position:135% 0}55%,100%{background-position:-35% 0}}
/* Přeliv „shine" přes nadpis. Na tmavém webu byl vrchol lesku bílý; na
   světlém z něj byla mezera — písmena mizela v bílé (poměr 1,00:1). Vrchol
   proto jde světlejší zelenou, která na ploše stránky drží 3,35:1, tedy nad
   hranicí AA pro velký text. */
body[data-obor] h2 .gt{background:linear-gradient(105deg,var(--green) 0%,var(--green) 40%,#158554 47%,#1B9A64 52%,#158554 57%,var(--green) 64%,var(--green) 100%)!important;background-size:230% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;animation:shineSweep 5s ease-in-out infinite}

/* ============================================================
   Partner logo marquee (jezdící pás klientů)
   ============================================================ */
.logo-marquee{position:relative;overflow:hidden;width:100%;margin:0 auto;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.lm-track{display:flex;width:max-content;animation:lmScroll 48s linear infinite;will-change:transform}
.logo-marquee:hover .lm-track,.logo-marquee:focus-within .lm-track,.logo-marquee:focus .lm-track{animation-play-state:paused}
.lm-set{display:flex;align-items:center}
.lm-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 clamp(30px,4.2vw,62px);position:relative}
.lm-item::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:40px;width:1px;background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
.lm-item img{height:44px;width:auto;max-width:184px;object-fit:contain;opacity:.82;filter:brightness(0);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.lm-item:hover img{opacity:1;transform:scale(1.07)}
@keyframes lmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Omezený pohyb: pás stojí a loga se ukážou jednou, zalomená do mřížky (duplikát pro smyčku pryč). */
@media(prefers-reduced-motion:reduce){.logo-marquee{-webkit-mask:none;mask:none}.lm-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.lm-set{flex-wrap:wrap;justify-content:center;row-gap:22px}.lm-set[aria-hidden="true"]{display:none}.lm-item::after{display:none}}
@media(max-width:640px){.lm-item img{height:30px}.lm-item{padding:0 24px}.lm-item::after{height:26px}}

/* ============================================================
   STACK DASH — dashboard/bento tiles (Compass/Launchpad/Orbit/Star)
   ============================================================ */

@keyframes sdCore{0%,100%{transform:scale(.82);opacity:.85}50%{transform:scale(1.12);opacity:1}}

/* ============================================================
   BRAND CARDS — stack vrstvy brand-native (tvar + mono ilustrace + Greycliff + squiggle)
   ============================================================ */

.bc-meta{text-align:right;display:flex;flex-direction:column;gap:4px}

.bc-tag{font-family:var(--mono);text-transform:uppercase;color:var(--muted)}

/* ============================================================
   APPLE POLISH — global upgrade (drží brand: Greycliff/Fira/navy)
   ============================================================ */

.reveal{transform:translateY(16px);transition:opacity .4s var(--ease-emph),transform .4s var(--ease-emph)}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}
/* Reveal uvnitř revealu by čekal dvakrát (rodič + vlastní zpoždění). Animuje jen vnější. */
.reveal .reveal{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.in{opacity:1;transform:none;transition:none}}

/* ============================================================
   OCEAN / VLNY v pozadí — smazáno.
   Dlaždice vln na celé stránce jela na krytí 3,5 % a druhá vrstva, která se
   odkrývala pod kurzorem, na 14 %. Obojí bylo nastavené pro tmavé pozadí;
   na světlém z toho nezůstalo nic než dvě nekonečné animace a posluchač
   pohybu myši. Značková vlna zůstává tam, kde ji je vidět — v obsahu
   (.wave-flow, .pane--wave).
   ============================================================ */
.bg-field{display:none}

/* ===== Trust odznaky (GDPR / ISO 27001) v partners liste ===== */
.trust-logo{display:inline-flex;align-items:center;gap:9px}
.trust-ico{flex:none;}
.trust-logo:hover .trust-ico{opacity:1}
.trust-tx{display:flex;flex-direction:column;line-height:1.15;font-family:var(--mono);text-align:left}
.trust-tx b{font-size:12px;font-weight:600;color:var(--text);letter-spacing:.02em}
.trust-tx span{letter-spacing:.05em}

/* ===== Language switcher — vlaječky ===== */

.langsw a{line-height:0;opacity:.5;transition:opacity .2s,box-shadow .2s,background .2s;}
.langsw a .flg{display:block;width:21px;height:14px;}
.langsw a:hover{opacity:1;}
.langsw a.active{opacity:1;background:none;}
@media(max-width:900px){.langsw.lang-mobile a{padding:6px;font-size:0;border:0}.langsw.lang-mobile a .flg{width:28px;height:19px}}

/* ===== Partners/trust v paticce ===== */
.foot-trust{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(26px,3.6vw,56px);padding:28px 0 4px;border-top:1px solid var(--line);margin-top:6px}
.foot-trust .partner-logo{opacity:.9}
@media(max-width:600px){.foot-trust{gap:24px 30px;justify-content:flex-start}}

/* .lh-svg = oborové scény, #loopSvg = hero na homepage (globální třídy) */
.lh-svg .human-link,#loopSvg .human-link{fill:none;stroke:rgba(198,206,220,.24);stroke-width:1.2;stroke-dasharray:2 5;stroke-linecap:round}
.lh-svg .human-dot,#loopSvg .human-dot{fill:#E7ECF3;filter:drop-shadow(0 0 5px rgba(223,230,241,.85))}
.lh-svg .human-tail,#loopSvg .human-tail{stroke:var(--text);stroke-width:2.4;stroke-linecap:round;opacity:.4}

/* ===== Sociální sítě v patičce ===== */
.foot-social{display:flex;align-items:center;}
.foot-social a{color:var(--muted);display:inline-flex;transition:color .2s ease,transform .2s ease}
.foot-social a:hover{color:var(--green);transform:translateY(-1px)}
.foot-social svg{width:19px;height:19px;fill:currentColor;display:block}

/* ===== Cookie consent banner (GA4 gate) — neaktivní dokud není nastaveno GA_ID v consent.js ===== */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:640px;margin:0 auto;
  padding:16px 18px;
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.cookie-banner.show{opacity:1;transform:translateY(0);pointer-events:auto}
.cookie-banner .cb-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cookie-banner p{margin:0;flex:1 1 260px;font-family:var(--mono);line-height:1.55;}
.cookie-banner p a{text-decoration:underline;text-underline-offset:2px}
.cookie-banner .cb-actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-banner .cb-btn{font-family:var(--mono);font-weight:600;font-size:13px;padding:9px 15px;
  cursor:pointer;border:1px solid transparent;transition:background-color .2s ease,border-color .2s ease,color .2s ease;white-space:nowrap}
.cookie-banner .cb-btn--ghost{background:transparent;}

.cookie-banner .cb-btn--accent:hover{filter:brightness(1.08)}
@media(max-width:560px){.cookie-banner{left:10px;right:10px;bottom:10px;padding:14px}.cookie-banner .cb-actions{width:100%}.cookie-banner .cb-btn{flex:1}}

/* ===== Inženýrská kapacita — sekce na /tym (75 vývojářů / 3 týmy) ===== */

.eng-tag{font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--acc);margin:2px 0 0}

.eng-people{display:flex;flex-direction:column;gap:13px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.eng-person{display:flex;align-items:center;gap:12px}
.eng-person img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--navy);flex:none}
.eng-person .ep-name{font-family:var(--head);font-weight:700;font-size:14px;color:var(--white);line-height:1.2;display:block}
.eng-person .ep-role{font-family:var(--mono);font-size:10.5px;color:var(--acc);letter-spacing:.06em;text-transform:uppercase;margin-top:3px;display:block}
.eng-more2{font-family:var(--mono);color:var(--muted);padding-left:56px;margin-top:-3px}
/* Kompaktní grid lektorů (03 na /tym) — menší karty, vedoucí adopce v kategoriích */
.team-grid.compact{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:30px 18px}

.team-grid.compact .tm-role{margin-top:5px}
.team-grid.compact .tm-bio{display:none}
.team-grid.compact .tm-links{margin-top:10px}
.tm-more-box{aspect-ratio:1;border:1.5px dashed var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:linear-gradient(160deg,rgba(65,227,158,.055),transparent 60%);transition:border-color var(--dur) var(--ease)}

.tm-more-n{font-family:var(--head);font-weight:900;font-size:clamp(28px,3vw,38px);color:var(--green);line-height:1}
.tm-more-l{font-family:var(--mono);text-align:center;padding:0 12px;line-height:1.4}
/* Lektorská síť — lead-in + chipy oborů/oddělení */
.team-lead-in{font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--text);max-width:70ch;margin:-8px 0 22px}
.team-lead-in b{color:var(--white);font-weight:700}
.team-chips{display:flex;flex-direction:column;gap:12px;margin:0 0 36px}
.team-chips-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.team-chips-lbl{font-family:var(--mono);width:88px;flex:none}
.team-chip{font-family:var(--mono);color:var(--text);border:1px solid var(--line-2);padding:6px 13px;white-space:nowrap;transition:border-color var(--dur) var(--ease)}

@media(max-width:560px){.team-chips-lbl{width:100%;margin-bottom:-4px}}
/* Featured co-lead (Michaela) — bio + „co vede v Compassu", dva sloupce */
.tm-featured.tm-lead{align-items:start;max-width:1010px}
.tm-lead-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 42px;margin-top:8px}
.tm-caps-h{font-family:var(--mono);margin:0 0 0;display:block}
.tm-caps{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.tm-caps li{font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--text);padding-left:18px;position:relative}
.tm-caps li::before{content:"";position:absolute;left:1px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.tm-caps li b{color:var(--white);font-weight:700}
.tm-lead .tm-bio{max-width:none;margin-top:0}
.tm-lead .tm-links{margin-top:16px}
@media(max-width:760px){.tm-lead-cols{grid-template-columns:1fr;gap:6px}.tm-lead .tm-caps-h{margin-top:14px}}

/* ═══════════════════════════════════════════════════════════════════════
   SVĚTLÁ PALETA
   Přebíjí tmavé hodnoty výše. Tmavá zůstává ve zdroji pro porovnání.
   Scény si tmu drží — viz „tmavé ostrovy" na konci bloku.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --navy:#F6F7F9;        /* plocha stránky */
  --navy-deep:#ECEFF3;   /* nejhlubší vrstva */
  --navy-1:#FFFFFF;      /* panel */
  --navy-2:#FFFFFF;      /* zvednutý panel */
  --navy-3:#EEF1F6;      /* hover / chip */
  --ink:#FFFFFF;         /* vstupy, bubliny */
  --white:#0F1722;       /* text — dřív bílý, teď téměř černý */
  --text:#3C4657;        /* běžný text */
  --text-strong:#17202E; /* nadpisy */
  --muted:#5C6675;       /* sekundární, mono — 5,04:1 */
  /* Akcenty. Měřeno proti nejsvětlejšímu i nejtmavšímu podkladu, na kterém
     text reálně stojí — plocha stránky #F6F7F9, panel #FFFFFF, chip #EEF1F6,
     nejhlubší vrstva #ECEFF3. Uvedený poměr je ten nejhorší z nich.
     Předchozí hodnoty (#148656 / #007BBA) prošly jen proti čisté bílé; na
     ploše stránky daly 4,28 a 4,31 — tedy pod AA. */
  --green:#0E7449;       /* 5,04:1 */
  --green-soft:#0A5D3A;  /* hover — na světlém se tmaví, ne rozsvěcí */
  --blue:#00699F;        /* 5,17:1 */
  --purple:#6C31D9;      /* 5,91:1 */
  --pink:#942FC0;        /* 5,31:1 */
  /* Žlutá a korál drží značkový odstín jako VÝPLŇ (klávesy, tvary). Jako text
     na světlém propadají (1,30 a 2,35), proto mají inkoustovou variantu. */
  --coral-ink:#B3323B;   /* 5,30:1 */
  /* Text na ztmavené akcentní ploše. Tmavá na zelené dá jen 3,10 — bílá 5,81. */
  --on-fill:#FFFFFF;
  --grad:linear-gradient(118deg,#942FC0 0%,#00699F 100%);
  --line:rgba(15,23,34,.10);
  --line-2:rgba(15,23,34,.14);
  --line-3:rgba(15,23,34,.20);
  --green-line:rgba(14,116,73,.30);
  --green-wash:rgba(14,116,73,.07);
  --panel-dark:#17202E;  /* podklad pro kresby */}

/* Pozadí stránky. Původní pravidlo je psané natvrdo gradientem, proto se
   přebíjí celé, ne jen proměnnou. */
body{background:var(--navy);color:var(--text)}

.bg-grid{opacity:.10}

/* ── Tmavé ostrovy ─────────────────────────────────────────────────────
   920 SVG scén je nakreslených na tmu: bílé tahy s nízkou průhledností,
   záře, přechody do černé. Invertovat se nedají. Dostanou tedy tmavý
   podklad a uvnitř jim vrátíme původní hodnoty proměnných — kaskáda
   zařídí, že všechno uvnitř kreslí dál jako dřív.                      */
.loop-stage,.loop-frame{
  background:var(--panel-dark);
  --navy:#17202E; --navy-deep:#0F1722; --navy-1:#131B27;
  --navy-2:#1E2733; --navy-3:#243042; --ink:#0C131D;
  --white:#FBFBFB; --text:#C6CEDC; --text-strong:#C9D2E2; --muted:#8A95A8;
  --green:#41E39E; --green-soft:#7CF0BE; 
  --blue:#6ECEFF; --purple:#B790FF; --pink:#E399FF;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.11); --line-3:rgba(255,255,255,.16);
  --green-line:rgba(65,227,158,.30); --green-wash:rgba(65,227,158,.07);
  color:var(--text);}

/* Logo je kreslené jako <g fill="#fff"> — SVG atribut, kam proměnná nedosáhne.
   Přebarvuje se proto z CSS, aby se otáčelo s tématem jako všechno ostatní. */
.logo svg g,.logo svg path,.brand .logo path{fill:var(--white)}

/* Text na barevných tlačítkách. Na ztmavené zelené drží bílá 4,59:1;
   --navy-deep by dalo jen 3,98:1. */
.btn,.cta,.btn *,.cta *{color:var(--on-fill)}

/* Tmavá barva v roli textu se neotáčí. Tmavý text na zeleném odznaku má
   zůstat tmavý, ať je stránka tmavá nebo světlá — jinak zmizí. */
:root{--on-accent:#0F1722}

/* Závěrečná věta sekce drží na jednom řádku, dokud je kam ji roztáhnout. */
.era-synth{max-width:none}

/* ═══════════════════════════════════════════════════════════════════════════
   SYSTÉM — jedna škála místo náhodných hodnot
   ═══════════════════════════════════════════════════════════════════════════
   Web byl převedený z tmavého na světlý přepisem tokenů a nese to stopy:
   čtyři soupeřící definice téže karty, tři různá svislá odsazení sekcí,
   třináct poloměrů rohů, nadpis H2 skoro stejně velký jako H1. Tenhle blok
   to sjednocuje. Stojí naschvál na konci souboru — nepotřebuje !important,
   stačí mu pořadí v kaskádě.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── prostor ── jedna geometrická řada, všechno ostatní je její násobek */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; 
  /* ── svislý rytmus sekcí ──
     Dřív clamp(88px,11.5vh,158px): odsazení sekcí záviselo na VÝŠCE okna,
     takže se rytmus měnil, když uživatel zvětšil okno. Teď na šířce. */
  --nav-h:78px;
  --hero-top:calc(var(--nav-h) + clamp(40px,4.5vw,66px));
  --gap-grid:20px;                      /* jediná mezera v mřížkách */
  /* ── poloměry ── pět hodnot; dřív jich stránky vykreslily třináct */
  --r-2xs:4px; --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  /* ── typografie ── jedna definice na úroveň
     H1 60 / H2 46 je poměr 1,30. Dřív bylo H1 60 a H2 58 — dvě úrovně,
     které vypadaly stejně, takže hierarchie nefungovala. */
  --fs-display:clamp(48px,6.2vw,84px); /* jediný displejový moment: hero domovské stránky */
  --fs-h1:clamp(38px,4.4vw,60px);
  --fs-h3:clamp(18px,1.55vw,21px);
  --fs-h4:15px;
  --fs-quote:clamp(20px,2.1vw,26px);   /* .era-synth, .it-quote, .northstar .q */
  --fs-lede:clamp(15px,1.35vw,17px);
  --fs-body:15px;
  /* ── plochy ── */
  --surface:#FFFFFF;                    /* karta, panel */
  --band:#FFFFFF;                       /* prokládaný pruh sekce */
  --elev:0 1px 2px rgba(15,23,34,.04),0 8px 24px -16px rgba(15,23,34,.16);
  --elev-hi:0 1px 2px rgba(15,23,34,.05),0 18px 40px -22px rgba(15,23,34,.22);}

/* ═══ 1. SVISLÝ RYTMUS ═══════════════════════════════════════════════════ */
.block{padding:var(--sec-y) 0}

.hero{padding:var(--hero-top) 0 var(--sec-y)}
.subhero{padding:var(--hero-top) 0 var(--sec-y)}

@media(max-width:1080px){.hero,.subhero{padding:var(--hero-top) 0 var(--sec-y)}}

.sec-head{max-width:860px;margin-bottom:clamp(40px,4.6vw,68px)}
.fgrid,.steps{gap:var(--gap-grid)}

/* Prokládané pruhy. Dřív .block.alt{background:rgba(255,255,255,.016)} — na
   tmavém webu to byl jemný světlejší pás, na světlém je to #F6F7FA, tedy nic.
   Střídání sekcí bylo fakticky vypnuté. */
.block.alt{background:var(--band)}

/* ═══ 2. TYPOGRAFIE ══════════════════════════════════════════════════════ */
h1,h2,h3,h4{font-family:var(--head);color:var(--text-strong);margin:0}
h1,.h1{font-size:var(--fs-h1);font-weight:900;line-height:1.0;letter-spacing:-.026em}
h2{font-size:var(--fs-h2);font-weight:900;line-height:1.06;letter-spacing:-.022em}
h3{font-size:var(--fs-h3);font-weight:800;line-height:1.24;letter-spacing:-.01em}
h4{font-size:var(--fs-h4);font-weight:800;line-height:1.3;letter-spacing:-.005em}

.hero .h1{font-size:var(--fs-display);line-height:.95;letter-spacing:-.03em;margin-bottom:var(--sp-5)}
.subhero h1{font-size:var(--fs-h1);line-height:1.0;letter-spacing:-.026em;margin:var(--sp-4) 0 0}
.sec-head h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.022em}
.cta-card h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.022em;margin-bottom:var(--sp-4)}

/* Perex — jedna definice pro .lede i .sec-head p */
.lede,.sec-head p,.subhero .lede{
  font-family:var(--mono);font-size:var(--fs-lede);line-height:1.68;color:var(--text);}
.sec-head p{margin-top:var(--sp-4)}

/* Citace / pointa sekce — .era-synth, .it-quote a .northstar .q měly tři
   různé velikosti pro tutéž roli */
.era-synth{
  font-family:var(--head);font-weight:800;font-size:var(--fs-quote);line-height:1.34;
  letter-spacing:-.012em;color:var(--text-strong)}
.era-synth{margin-top:var(--sp-5);border-left:3px solid var(--green);padding-left:var(--sp-5)}

@media(min-width:1080px){.era-synth{white-space:normal;font-size:var(--fs-quote)}}

/* Běžný text a popisky */
.legal-body p,.legal-body li{font-size:var(--fs-body);line-height:1.75}
.legal-body h2{font-size:var(--fs-h3);font-weight:800;line-height:1.24;margin:var(--sp-7) 0 var(--sp-3)}
.legal-body h2:first-of-type{margin-top:0}
.legal-body h3{font-size:var(--fs-h3);font-weight:800;line-height:1.24;margin:var(--sp-6) 0 var(--sp-3)}
.step-card p,.fcard p{line-height:1.6;color:var(--text)}

.bc-tag,.team-chip{
  letter-spacing:.12em}

/* Karty: nadpis karty je vždy H3, ne o velikosti H2 */
.step-card h4,.fcard h3{
  font-size:var(--fs-h3);font-weight:800;line-height:1.24;letter-spacing:-.01em;color:var(--text-strong)}

/* Jeden recept. Stejná role = stejný vzhled: bílá plocha, vlasová linka,
   měkký stín, stejný poloměr, stejné nadzvednutí při najetí. Přechody
   linear-gradient(180deg,var(--navy-2),var(--navy-1)) byly na tmavém webu
   spád z panelu do panelu; na světlém je to bílá do bílé, tedy nic. */
.step-card,.fcard,.blog-card{
  position:relative;overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--elev);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.step-card,.fcard,.blog-card{padding:var(--sp-6) var(--sp-5)}
.step-card:hover,.fcard:hover{
  transform:translateY(-4px);border-color:var(--line-3);box-shadow:var(--elev-hi)}

/* Uříznutý pravý horní roh byl brand motiv, ale nesl ho jen zlomek karet —
   .proc-stat-card, tedy 91 ze 120 karet na webu, ho už neměl. Sjednoceno
   na plný poloměr, ať mřížka čte jako jedna soustava. */
.step-card,.step-card .sn{border-top-right-radius:inherit}
.step-card .sn{border-radius:var(--r-sm)}

.article-body .article-cta-line,.cookie-banner{border-radius:var(--r-md)}
.cta-card,.hero-slot,.loop-stage,.loop-frame{border-radius:var(--r-lg)}
.cb-btn,.langsw a,.team-chip{border-radius:var(--r-xs)}
.langsw a .flg{border-radius:var(--r-2xs)}
#navlinks a{border-radius:var(--r-xs)}

/* CTA karta — zelený radiální závoj byl kreslený pro tmu */
.cta-card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--elev);
  padding:clamp(48px,6vw,88px) clamp(28px,5vw,72px)}

/* Bílé závoje a bílé vlasové linky. Na tmavém pozadí kreslily plochu a rám;
   na bílé nekreslí nic. */
.team-chip,.loop-foot i{background:var(--navy-deep)}

.eng-person img{box-shadow:0 1px 3px rgba(15,23,34,.16)}

/* Cookie lišta zůstala tmavým ostrovem s proměnnými ze světlé palety:
   šedý text na tmavě modré dával 1,78:1. Je to lišta, ne kresba —
   tmavou si držet nemusí. */
.cookie-banner{background:var(--surface);border:1px solid var(--line-2);
  box-shadow:0 24px 60px -28px rgba(15,23,34,.35)}
.cookie-banner p{color:var(--text);font-size:var(--fs-cap)}
.cookie-banner p a{color:var(--green)}
.cookie-banner .cb-btn--ghost{color:var(--text);border-color:var(--line-2)}
.cookie-banner .cb-btn--ghost:hover{border-color:var(--text);color:var(--text-strong)}
.cookie-banner .cb-btn--accent{background:var(--green);color:var(--on-fill)}

/* Tlačítko: bílý text na ztmavené zelené (5,81:1). Pravidlo .btn,.cta níž
   v souboru mělo nižší specificitu než #navlinks a.cta (3,92:1) a než
   .legal-body a — kvůli čemuž byl CTA na /kariera zelený text na zelené,
   tedy 1:1, neviditelný. */
#navlinks a.cta,#navlinks a.cta:hover,.legal-body a.btn,.legal-body a.btn *,a.btn,a.cta,button.btn,.btn,.cta{color:var(--on-fill)}
.langsw a.active{color:var(--on-fill)}
/* Korál 2,35:1 jako text neexistuje — chybová hláška jede inkoustovou variantou. */
.cta-note.err{color:var(--coral-ink)}

/* ═══ 6. FOKUS ═══════════════════════════════════════════════════════════ */
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:var(--r-2xs)}

/* Uříznutý pravý horní roh drží jedna rodina: rámy médií a portrétů.
   Karty ho nemají (91 ze 120 karet ho nemělo už dřív), takže mřížka karet
   čte jako jedna soustava a média jako druhá. Jedna hodnota, jeden zdroj. */
:root{--r-cut:var(--r-lg) 0 var(--r-lg) var(--r-lg)}
.ed-photo,.tm-photo,.tm-more-box{border-radius:var(--r-cut)}
.cookie-banner .cb-btn{border-radius:var(--r-xs)}

.editorial h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.022em;margin:var(--sp-5) 0 var(--sp-5)}

.team-grid.compact .tm-name{font-size:var(--fs-h4);font-weight:800;margin-top:var(--sp-3)}

/* Gradientový text v nadpisech. Zarážky zůstaly z tmavého webu — #41E39E,
   #6ECEFF, #B790FF, #E399FF. Na bílé dávají 1,65 až 2,05:1, takže klíčové
   slovo hero („predikci.") bylo prakticky nečitelné; kontrastní kontrola ho
   navíc přeskakuje, protože text má -webkit-text-fill-color:transparent.
   Stejné pořadí odstínů, jen ve světlé variantě: nejhorší zarážka 5,04:1. */
.grad-text{background-image:linear-gradient(100deg,var(--green),var(--blue),var(--purple),var(--pink),var(--green))}

/* Ambientní záře v pozadí. Zelený a modrý radiální závoj byly kreslené na
   navy — tam dělaly hloubku. Na světlém z nich zbyl bledě zabarvený kotouč
   přes celou stránku (efektivní krytí 1,5 %), který ničemu neslouží a jen
   špiní bílou. Plocha stránky zůstává jedna čistá barva. */
.bg-glow{display:none}

/* Stín karty blogu bere barvu ze světlé palety. */
.blog-card:hover{border-color:var(--line-3);transform:translateY(-3px);box-shadow:var(--elev-hi)}

/* ═══ Oborové akcenty jako text ═══════════════════════════════════════
   Akcenty jsou kreslené na tmavé pozadí. Jako plocha s tmavým textem
   drží 7–11:1, ale jako písmo na světlém propadají (1,5–2,2:1).
   --ac-ink je tentýž odstín ztmavený na čitelnost; podíl 45 % projde
   WCAG AA u každého akcentu, který web používá (nejhorší 4,55:1).
   Barva tedy zůstává výplní, text jede přes ni.                       */
[style*="--ac"],.step-card{
  --ac-ink:color-mix(in srgb, var(--ac,var(--green)) 45%, #0F1722);}

.sn{color:var(--ac-ink)}

/* Šipka v tlačítku dědila barvu pro plné tlačítko (bílou), ale obrysové
   tlačítko žádnou výplň nemá — bílá na bílé. */
.btn.outline,.btn.outline *{color:var(--text-strong)}
.btn.outline:hover,.btn.outline:hover *{color:var(--on-fill)}

/* ═══ Duchová tlačítka na odkazu ══════════════════════════════════════
   Sdílené pravidlo pro vyplněná tlačítka má v selektoru `a.btn` (0,1,1),
   což přebíjelo `.btn-ghost` (0,1,0) — průhledné tlačítko tak dostalo
   bílé písmo a na světlém pozadí mělo kontrast 1,07:1. Dokud ghost
   variantu nikdo nepoužil na <a>, nebylo to vidět. Zvednutá váha.     */
a.btn.outline,a.btn.outline *{color:var(--text-strong)}
a.btn.outline:hover,a.btn.outline:hover *{color:var(--green)}

/* ═══ Oborové štítky ══════════════════════════════════════════════════
   .badge.now bere color:var(--green), který je na oborových stránkách
   přebitý na světlejší variantu akcentu. Na vlastním washi (akcent 10 %)
   to dávalo 4,32–4,44 — těsně pod AA. --ac-ink (45% mix) měří 6,18.   */
body[data-obor]{--ac-ink:color-mix(in srgb, var(--ac,var(--green)) 45%, #0F1722)}

/* ═══ Zlom navigace ═══════════════════════════════════════════════════
   §53 dává hlavní navigaci šest položek plus CTA. Mezi 880 a 1080 px se
   logo a první položka dotýkaly (mezera 0 px), takže hamburger naskakuje
   dřív. Pravidlo z ř. 422 se jen posouvá, nekopíruje.                  */
@media(max-width:1080px){
  #navlinks{display:none}
  .mtoggle{display:inline-flex}
}
/* ═══ Přístupnost ═════════════════════════════════════════════════════
   Cookie lišta se skrývala jen opacity:0 + pointer-events:none a mobilní
   menu max-height:0 + overflow:hidden. Obojí zůstávalo v pořadí Tabu —
   devět neviditelných zastávek na každé stránce, trvale, i pro člověka,
   který souhlas dávno dal. visibility je z fokusu vyřadí.              */
.cookie-banner{visibility:hidden}
.cookie-banner.show{visibility:visible}
@media(max-width:1080px){
  .mobile-menu{visibility:hidden}
  .mobile-menu.open{visibility:visible}
}

/* Přeskočit na obsah — první zastávka Tabu, vidět až po zaostření. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;
  padding:12px 20px;background:var(--navy-1);color:var(--text-strong);
  border:1px solid var(--line);border-radius:0 0 10px 0;
  font-family:var(--mono);font-size:13px;text-decoration:none}
.skip-link:focus{left:0}
main:focus{outline:none}

/* Pás log se zastaví i z klávesnice (fokus), ne jen najetím myši. */
.logo-marquee:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:8px}

/* ═══ Fotky (větev fotky) ══════════════════════════════════════════════
   Vkládá je build z assets/foto/<jméno>.jpg na značky <!--FOTO:…-->.
   Ořez ze středu (object-fit:cover), poměr drží figure.               */
.hero-slot > img,.ed-slot > img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.hero-slot:has(> img),.ed-slot:has(> img){background:none;border-color:transparent}
.foto{margin:clamp(28px,4vw,48px) 0 0;width:100%;max-width:100%;overflow:hidden;border-radius:var(--r-lg);background:var(--navy-deep)}
.foto > img{display:block;width:100%;height:100%;object-fit:cover}

/* Claim v patičce (zadání v2.0 §3.7) */
.foot-claim{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--text);margin:16px 0 0;max-width:34ch}

/* Pro koho / Délka — dvojice údajů pod popisem workshopu */
.wmeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:34px 0 0;max-width:760px}
@media(max-width:600px){.wmeta{grid-template-columns:1fr}}
.wmeta div{border-top:1px solid var(--line-2);padding-top:14px}
.wmeta dt{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
.wmeta dd{margin:0;font-family:var(--mono);font-size:var(--fs-body,15px);line-height:1.6;color:var(--white)}
/* Čtyři kroky: 2 × 2, ať nezůstane osamělá karta v řadě */
.steps.ctyri{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){.steps.ctyri{grid-template-columns:1fr}}
.steps.ctyri .step-card p{font-size:14px;line-height:1.65}

.prose-sirka{max-width:68ch}
.prose-sirka p{font-family:var(--mono);font-size:var(--fs-body,15px);line-height:1.75;color:var(--text);margin:0 0 16px}
/* Tabulka průchodu / režimů. Na mobilu se řádek složí do karty s popisky. */
.tbl-wrap{overflow-x:auto;margin-top:8px}
.tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--text)}
.tbl th{text-align:left;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:0 16px 12px 0;border-bottom:1px solid var(--line-2)}
.tbl td{vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--line-2)}
.tbl td:first-child{font-family:var(--head);font-weight:800;color:var(--white);white-space:nowrap}
.tbl-pozn{font-family:var(--mono);font-size:14px;color:var(--text);margin-top:18px}
@media(max-width:700px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{display:block;border-bottom:1px solid var(--line-2);padding:14px 0}
  .tbl td{display:block;border:0;padding:4px 0}
  .tbl td:first-child{white-space:normal;margin-bottom:4px}
  .tbl td[data-l]::before{content:attr(data-l);display:block;letter-spacing:.14em;text-transform:uppercase;}
}

/* Dlouhé popisky tlačítek (hlavně EN) se na úzkém displeji zalomí místo přetečení */
@media(max-width:480px){.btn{white-space:normal;max-width:100%;text-align:center}}

/* ═══ HLAVIČKA v2 (Milo 21. 9.) ═══════════════════════════════════════
   Vzor Linear / Stripe / Vercel: nahoře průhledná, po odscrollování světlá
   matná lišta s jemným stínem. Čitelné odkazy s hover pilulkou, aktuální
   stránka zvýrazněná, zelené CTA. Přebíjí starší vrstvy (tmavá lišta
   z dřívějšího tmavého motivu, gradientní text, popisky pod odkazy).   */
html body #header{background:transparent;transition:background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
html body #header::after{border-bottom-color:transparent}
html body #header.scrolled{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 1px 0 rgba(15,23,34,.08),0 10px 30px -18px rgba(15,23,34,.25)}
html body #header.scrolled::after{border-bottom-color:transparent}
html body #header .nav{height:76px;transition:height .25s ease}
html body #header.scrolled .nav{height:64px}
html body #navlinks{margin-left:auto;margin-right:auto;gap:4px}
html body #navlinks a:not(.cta){
  display:inline-flex;align-items:center;flex-direction:row;gap:0;line-height:1;
  font-family:var(--head);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--text);-webkit-text-fill-color:currentColor;background:none;background-image:none;filter:none;
  padding:10px 14px;border-radius:999px;transition:color .15s ease,background-color .15s ease}
html body #navlinks a:not(.cta)::after,html body #navlinks a:not(.cta)::before{content:none;display:none}
html body #navlinks a:not(.cta):hover{color:var(--white);background:rgba(15,23,34,.06);filter:none}
html body #navlinks a:not(.cta)[aria-current="page"]{color:var(--white);background:rgba(65,227,158,.16)}
html body #navlinks a.cta{font-family:var(--head);font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;
  color:#fff;-webkit-text-fill-color:#fff;background:var(--green);padding:11px 18px;border-radius:999px;margin-left:12px;
  box-shadow:0 6px 16px -8px rgba(14,116,73,.6);transition:background .15s ease,transform .15s ease}
html body #navlinks a.cta:hover{background:var(--green-soft);transform:translateY(-1px)}
html body #navlinks a:focus-visible,html body .mobile-menu a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
html body #header .langsw{margin-left:8px;margin-right:0}
#progress{height:2px;background:linear-gradient(90deg,#41E39E,#0E7449)}
/* Mobil: hamburger a výsuvný panel se světlým pozadím, velké odkazy, CTA dole */
@media(max-width:1080px){
  html body .mtoggle span{background:var(--white)}
  html body .mobile-menu{top:64px;background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(15,23,34,.35);padding:0 8px}
  html body .mobile-menu.open{max-height:560px;padding:8px 8px 16px}
  html body .mobile-menu a{font-family:var(--head);font-size:19px;font-weight:700;letter-spacing:0;text-transform:none;
    color:var(--white);padding:15px 14px;border-bottom:1px solid var(--line);border-radius:0}
  html body .mobile-menu a[aria-current="page"]{color:var(--green)}
  html body .mobile-menu a.mm-cta{margin:14px 6px 4px;border:0;border-radius:999px;background:var(--green);color:#fff;text-align:center;font-size:16px}
}
/* Vlajky jsou v hlavičce i na mobilu — v panelu menu by byly podruhé */
@media(max-width:1080px){html body .mobile-menu .langsw.lang-mobile{display:none}}

/* ═══ Shell: dotykové cíle, menu, pás log (audit 21. 9.) ══════════════
   Cíle min. 44 × 44 px (hamburger, vlajky, sociální ikony), vzhled stejný:
   rámeček a hover podklad vlajky se kreslí kolem vlajky, ne kolem plochy. */
.mtoggle{min-width:44px;min-height:44px;justify-content:center;align-items:center;touch-action:manipulation}
.mtoggle:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:8px}

html body .langsw{gap:0}
html body .langsw a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;
  background:none;box-shadow:none;border-radius:var(--r-xs);touch-action:manipulation}
html body .langsw a .flg{transition:box-shadow .2s}
html body .langsw a:hover{background:none}
html body .langsw a:hover .flg{box-shadow:0 0 0 4px var(--navy-3)}
html body .langsw a.active{box-shadow:none}
html body .langsw a.active .flg{outline:2px solid var(--green);outline-offset:4px}
html body .langsw a:focus-visible{outline:2px solid var(--green);outline-offset:-2px}

.foot-social{gap:0;padding:4px 0 0;margin-left:-12.5px}
.foot-social a{width:44px;height:44px;align-items:center;justify-content:center}
.foot-social a:focus-visible{outline:2px solid var(--green);outline-offset:-4px;border-radius:8px}

/* E-mail a telefon v patičce jsou odkazy, ale zůstávají v řádku adresy. */
.foot-grid .addr a{font:inherit;color:inherit;text-decoration:underline;
  text-decoration-color:var(--line-2);text-underline-offset:3px;transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.foot-grid .addr a:hover{color:var(--green);text-decoration-color:currentColor}

/* Mobilní menu: panel nepřeteče displej, stránka pod ním stojí. */
@media(max-width:1080px){
  html body #header:not(.scrolled) ~ .mobile-menu{top:76px}
  html body .mobile-menu.open{max-height:min(560px,calc(100dvh - 64px));overflow-y:auto;overscroll-behavior:contain}
}
html.menu-open,html.menu-open body{overflow:hidden}

/* Pás log: tlačítko Pozastavit / Spustit (funguje i na dotyku). */
.logo-marquee.is-paused .lm-track{animation-play-state:paused}
.lm-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:0 14px;
  font-family:var(--mono);
  background:none;border:0;border-radius:999px;cursor:pointer;touch-action:manipulation;transition:color var(--dur-fast),background-color var(--dur-fast)}
.lm-toggle:hover{color:var(--white);background:rgba(15,23,34,.05)}
.lm-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.lm-ico{width:12px;height:12px;fill:currentColor;flex:none}
.lm-toggle .i-play{display:none}
.lm-toggle.is-paused .i-play{display:inline}
.lm-toggle.is-paused .i-pause{display:none}

/* ═══ Sjednocení po redesignu (fáze 2) ═══════════════════════════════
   Barevná část H1 na podstránkách = zelená značky. Duha jen na homepage
   (hero „predikci.“ a nadpis Dvě cesty — Milovo rozhodnutí). Popisek
   u pásu klientů normálním písmem.                                     */
body:not(.home) .subhero h1 .grad-text,body:not(.home) .subhero h1 .accent{background:none!important;-webkit-text-fill-color:var(--green)!important;color:var(--green)!important;animation:none!important;filter:none!important}
.lm-toggle{font-size:13px;letter-spacing:0;text-transform:none}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGNOVÝ SYSTÉM — sdílené komponenty (sjednocení 21. 9. 2026)
   Dřív žila každá z těchto komponent v <style> bloku stránky, často ve
   dvou nebo třech verzích (.crumbs 2×, .xlink 3×, .flow 2×, FAQ 3×).
   Teď jedna definice tady; stránka si ve svém bloku drží jen vlastní
   rozvržení. Stojí na konci souboru, takže vyhrává pořadím, ne !important.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Nadpis sekce: jedna velikost na celém webu (homepage si drží větší
     displejové H2 v #cesty a v závěrečném pruhu). */
  --h2:clamp(29px,3.3vw,46px);
  --fs-h2:var(--h2);
  /* Perex: 64 znaků Fira Mono v 17 px. */
  --lede-w:653px;
  /* Svislý rytmus bloků: 120 desktop / 88 tablet / 64 mobil. */
  --block-y:120px;
  --sec-y:var(--block-y);
  /* Čitelnost: text v kartách min. 14 px, štítky 12 px, drobné popisky
     v barvě běžného textu (#3C4657 = 9,2:1), ne v šedé #5C6675. */
  --fs-card:14px;
  --fs-label:12px;
  --fs-cap:14px;
  --caption:#3C4657;}
@media(max-width:1100px){:root{--block-y:88px}}
@media(max-width:700px){:root{--block-y:64px}}

/* ── Základ ── */
h1,h2,h3{text-wrap:balance}
main section[id]{scroll-margin-top:var(--nav-h)}
.lede,.sec-head p,.subhero .lede{max-width:var(--lede-w)}
.subhero .lede:last-child{margin-bottom:0}
.subhero .lede+.lede{margin-top:var(--sp-2)}
.subhero h1 .accent{color:var(--green)}
.prose-sirka p:last-child{margin-bottom:0}

/* ── Štítek sekce / kicker — jeden styl pro všechny ──
   Fira Mono verzálkami, 12 px, prostrkání .14em, text zelená značky. */
.kicker,.sec-kicker,.sec-lbl,.wt-tag{
  display:inline-flex;align-items:center;gap:0;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.sec-lbl{display:block;margin:0 0 var(--sp-4)}
.sec-kicker{margin-bottom:var(--sp-5)}

.sec-kicker .n{color:inherit}

/* ── Drobečková navigace ── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;
  font-family:var(--mono);font-size:13px;line-height:1.4;color:var(--caption)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;color:var(--green);
  text-decoration:underline;text-decoration-color:var(--green-line);text-underline-offset:4px;
  transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.crumbs a:hover{text-decoration-color:currentColor}
.crumbs [aria-current]{color:var(--text-strong)}
.crumbs+h1{margin-top:var(--sp-5)}

/* ── Textový odkaz — jedna verze ──
   Podtržený, zelený, šipka za textem. Dotyková plocha 44 px je
   neviditelná (::before), takže řádek textu neposkočí. V běžném odstavci
   (.osa, .faq, .hub-steps) teče s textem jako obyčejný odkaz. */
.xlink{position:relative;display:inline-flex;align-items:center;gap:6px;padding:0;border-bottom:0;
  font-family:var(--mono);font-size:14px;line-height:1.5;color:var(--green);
  text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--green-line);text-underline-offset:5px;
  transition:color var(--dur-fast) var(--ease),text-decoration-color var(--dur-fast) var(--ease)}
.xlink::after{content:"→";text-decoration:none}
.xlink::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.xlink:hover{color:var(--text-strong);text-decoration-color:currentColor}
.osa .xlink,.faq .fa .xlink,.hub-steps .xlink{display:inline;font-size:inherit}
.osa .xlink::before,.faq .fa .xlink::before,.hub-steps .xlink::before{content:none}
.link-row{display:flex;flex-wrap:wrap;gap:0 var(--sp-6);margin-top:var(--sp-5)}

/* ── FAQ (<details>) — bez čísel, zelené + ── */
.faq{border-top:1px solid var(--line-2);max-width:900px;margin-top:8px}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;min-height:44px;padding:20px 0;
  font-family:var(--head);font-weight:800;font-size:clamp(17px,1.6vw,20px);line-height:1.3;color:var(--text-strong);
  text-wrap:balance;transition:color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .qn{display:none}
.faq summary .qx{margin-left:auto;font-family:var(--mono);font-weight:400;font-size:26px;line-height:1;color:var(--green);transition:transform .25s var(--ease)}
.faq details[open] summary .qx{transform:rotate(45deg)}
.faq summary:hover{color:var(--green)}
.faq .fa{padding:0 var(--sp-7) var(--sp-5) 0;font-family:var(--mono);font-size:var(--fs-body);line-height:1.72;color:var(--text);max-width:68ch}
.faq-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
@media(min-width:900px){.faq-split{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:start}
  .faq-split>.sec-head{position:sticky;top:calc(var(--nav-h) + var(--sp-5))}}
.faq-split>.sec-head{margin-bottom:0}
.faq-split .faq{margin-top:0;max-width:none}

/* ── Závěrečná výzva ──
   CTA karta na bílém pruhu dostane plochu stránky, ať se od pruhu odliší. */
.block.alt .cta-card{background:var(--navy);box-shadow:none}
.cta-card .hero-note{margin-top:var(--sp-5)}
.cta-card .cta-alt{margin:var(--sp-5) auto 0;text-align:center}

/* ── Krokovník: skutečné pořadí. Vodorovně od 1000 px, pod tím svisle. ── */
.stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--sp-6)}
.stepper > li{position:relative;min-width:0;padding-top:68px}
.stepper > li::before{content:"";position:absolute;top:21px;left:52px;right:calc(8px - var(--sp-6));height:2px;background:var(--green-line)}
.stepper > li:last-child::before{display:none}
.st-n{position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#41E39E;color:#0F1722;font-family:var(--head);font-weight:900;font-size:17px;line-height:1}
.stepper h3,.stepper h4{margin:0 0 var(--sp-3);font-family:var(--head);font-size:var(--fs-h3);font-weight:800;line-height:1.24;letter-spacing:-.01em;color:var(--text-strong);text-wrap:balance}
.stepper p{margin:0;max-width:44ch;font-family:var(--mono);font-size:14px;line-height:1.65;color:var(--text)}
@media(max-width:999px){
  .stepper{grid-template-columns:1fr}
  .stepper > li{padding:0 0 var(--sp-6) 68px}
  .stepper > li:last-child{padding-bottom:0}
  .stepper > li::before{top:52px;bottom:8px;left:21px;right:auto;width:2px;height:auto}
  .stepper h3,.stepper h4{padding-top:10px}
}

/* ── Tok: krátká svislá návaznost (Workshopy) ──
   Dřív .flow — kolidovalo s čipovým tokem z tmavého webu. */
.flow-list{list-style:none;margin:0;padding:0}
.flow-list li{position:relative;padding:0 0 var(--sp-6) 36px;font-family:var(--head);font-weight:800;font-size:clamp(18px,1.7vw,21px);line-height:1.3;color:var(--text-strong)}
.flow-list li:last-child{padding-bottom:0}
.flow-list li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:50%;background:#41E39E}
.flow-list li:not(:last-child)::after{content:"";position:absolute;left:6px;top:calc(.35em + 20px);bottom:6px;width:2px;background:var(--green-line)}

/* ── Firemní stránky (O ENTER, Tým, Kariéra, Bezpečnost, Kontakt) ──
   Nadpis vlevo a obsah vpravo, seznamy s vlasovými linkami. */
.fm-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-6) clamp(40px,6vw,96px);align-items:start}
.fm-split>.sec-head{margin-bottom:0}
@media(max-width:900px){.fm-split{grid-template-columns:minmax(0,1fr)}}
.fm-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.fm-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--sp-2) var(--sp-6);padding:var(--sp-5) 0;border-bottom:1px solid var(--line-2)}
.fm-t{margin:0;font-family:var(--head);font-weight:800;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em;color:var(--text-strong)}
.fm-d{margin:0;font-family:var(--mono);font-size:var(--fs-body);line-height:1.65;color:var(--text);max-width:56ch;text-wrap:pretty}
.fm-d a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.fm-row{grid-template-columns:minmax(0,1fr)}}
.fm-rows--stack .fm-row{grid-template-columns:minmax(0,1fr);gap:6px}
.fm-ticks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.fm-ticks li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:var(--fs-body);line-height:1.6;color:var(--text-strong)}
.fm-ticks li::before{content:"";position:absolute;left:2px;top:calc(14px + .8em);width:14px;height:2px;background:#41E39E}
.fm-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-7) var(--sp-6);margin:0;padding:0;list-style:none}
.fm-strip li{padding-top:var(--sp-5);border-top:2px solid var(--text-strong)}
.fm-strip h3{margin:0 0 var(--sp-3)}
.fm-strip p{margin:0;font-family:var(--mono);font-size:var(--fs-body);line-height:1.6;color:var(--text);max-width:34ch}
@media(max-width:1000px){.fm-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.fm-strip{grid-template-columns:minmax(0,1fr)}}
.fm-close{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6) var(--sp-8);align-items:end}
.fm-close h2{max-width:22ch}
.fm-close p{margin:var(--sp-4) 0 0;font-family:var(--mono);font-size:var(--fs-lede);line-height:1.65;color:var(--text);max-width:52ch}
.fm-btns{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
@media(max-width:900px){.fm-close{grid-template-columns:minmax(0,1fr);align-items:start}}
@media(max-width:520px){.fm-btns{flex-direction:column;align-items:stretch}.fm-btns .btn{justify-content:center}}
.sec-head p,.fm-body p{text-wrap:pretty}

/* ── Stránky technologií a vstupní stránky (balík pg-*) ──
   Sekce: nadpis vlevo, obsah vpravo. Bez štítků a čísel nad nadpisem. */
.pg-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-5) clamp(40px,6vw,96px);align-items:start}
.pg-head h2,.pg-full>h2{font-size:var(--h2);line-height:1.06;letter-spacing:-.022em}
.pg-head p,.pg-full>p{font-family:var(--mono);font-size:var(--fs-lede);line-height:1.68;color:var(--text);max-width:52ch;margin-top:var(--sp-4)}
.pg-full>p{max-width:var(--lede-w)}
.pg-statement .pg-head{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-4) clamp(40px,6vw,96px);align-items:baseline}
.pg-statement .pg-head p:first-of-type{margin-top:0}
.pg-statement .pg-head>div>p:first-child{margin-top:0}
.pg-after{margin-top:var(--sp-7)}
.pg-after .era-synth{margin-top:0;max-width:56ch}
.pg-after .legal-note{margin:var(--sp-5) 0 0;max-width:64ch;font-size:13px}
@media(max-width:900px){
  .pg-split,.pg-statement .pg-head{grid-template-columns:1fr}
  .pg-statement .pg-head{gap:var(--sp-4)}
  .pg-body{margin-top:var(--sp-3)}
}
/* Řádky pojem → popis */
.pg-terms{margin:0;border-top:1px solid var(--line-2)}
.pg-terms>div{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:var(--sp-2) var(--sp-5);padding:var(--sp-4) 0;border-bottom:1px solid var(--line-2)}
.pg-terms dt{font-family:var(--head);font-weight:800;font-size:17px;line-height:1.35;color:var(--text-strong)}
.pg-terms dd{margin:0;font-family:var(--mono);font-size:var(--fs-body);line-height:1.6;color:var(--text);max-width:52ch}
@media(max-width:560px){.pg-terms>div{grid-template-columns:1fr;gap:var(--sp-1)}}
/* Skutečné pořadí: číslovaný postup */
.pg-seq{list-style:none;margin:0;padding:0;counter-reset:pgs;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-6) var(--sp-5)}
.pg-seq li{counter-increment:pgs;border-top:2px solid var(--line-2);padding-top:var(--sp-4)}
.pg-seq li:first-child{border-top-color:var(--green)}
.pg-seq li::before{content:counter(pgs);display:block;font-family:var(--head);font-weight:900;font-size:15px;color:var(--green);margin-bottom:var(--sp-2);font-variant-numeric:tabular-nums}
.pg-seq b{display:block;font-family:var(--head);font-weight:800;font-size:17px;line-height:1.3;color:var(--text-strong);margin-bottom:6px}
.pg-seq span{display:block;font-family:var(--mono);font-size:var(--fs-body);line-height:1.6;color:var(--text)}
.pg-seq--text li{font-family:var(--head);font-weight:800;font-size:17px;line-height:1.35;color:var(--text-strong)}
/* Krátký výčet: řádky s vlasovou linkou */
.pg-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.pg-list li{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--line-2);font-family:var(--head);font-weight:700;font-size:18px;line-height:1.4;color:var(--text-strong)}
.pg-list li::before{content:"";position:absolute;left:0;top:calc(14px + .7em - 1px);width:12px;height:2px;background:var(--green)}
.pg-list-h{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0;line-height:1.5;color:var(--caption);margin:0 0 var(--sp-3)}
.pg-list+.pg-list-h,.pg-links+.pg-list-h{margin-top:var(--sp-6)}
/* Odkazy na další stránky */
.pg-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.pg-links a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);min-height:44px;padding:14px 0;border-bottom:1px solid var(--line-2);color:var(--text-strong);transition:color var(--dur-fast)}
.pg-links a::after{content:"→";flex:none;color:var(--green);font-family:var(--mono);transition:transform var(--dur-fast) var(--ease)}
.pg-links a:hover{color:var(--green)}
.pg-links a:hover::after{transform:translateX(3px)}
.pl-t{font-family:var(--head);font-weight:800;font-size:17px;line-height:1.35}
.pl-d{display:block;font-family:var(--mono);font-size:14px;line-height:1.5;color:var(--caption);margin-top:2px}
.pl-w{flex:1;min-width:0}
/* Před / po */
.pg-compare{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--sp-5);align-items:stretch}
.pg-compare>div{border-radius:var(--r-md);padding:var(--sp-6)}
.pg-compare .was{background:var(--navy-deep)}
.pg-compare .now{background:var(--surface);border:1px solid var(--green-line)}
.pg-compare h3{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}
.pg-compare .was h3{color:var(--muted)}
.pg-compare p{font-family:var(--mono);font-size:var(--fs-body);line-height:1.65;color:var(--text);max-width:48ch}
.pg-compare .pg-terms{margin-top:var(--sp-5)}
.pg-compare .pg-terms>div{grid-template-columns:minmax(0,8em) minmax(0,1fr)}
@media(max-width:900px){.pg-compare{grid-template-columns:1fr}}
/* Rozcestník technologií */
.cap-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.cap{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) 12.5em;gap:var(--sp-3) clamp(28px,4vw,64px);align-items:baseline;padding:var(--sp-6) 0;border-bottom:1px solid var(--line-2)}
.cap-name{font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.015em;transition:color var(--dur-fast)}
.cap-claim{font-family:var(--head);font-weight:800;font-size:18px;line-height:1.35;color:var(--text-strong)}
.cap-body>p:not(.cap-claim){font-family:var(--mono);font-size:var(--fs-body);line-height:1.6;color:var(--text);margin-top:6px;max-width:52ch}
.cap-body .pg-terms{margin-top:var(--sp-4)}
.cap-body .pg-terms>div{grid-template-columns:minmax(0,8.5em) minmax(0,1fr);padding:10px 0}
.cap-body .pg-terms dt{font-size:15px}
.cap-body .pg-terms dd{font-size:14px}
.cap-go{justify-self:end;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;color:var(--green);white-space:nowrap;text-decoration:underline;text-decoration-color:var(--green-line);text-underline-offset:4px}
.cap-go::after{content:"→";transition:transform var(--dur-fast) var(--ease)}
.cap-go::before{content:"";position:absolute;inset:0}
.cap:hover .cap-name{color:var(--green)}
.cap:hover .cap-go::after{transform:translateX(3px)}
@media(max-width:900px){.cap{grid-template-columns:1fr;gap:var(--sp-3)}.cap-go{justify-self:start}}
.topic-list{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-6);border-top:1px solid var(--line-2)}
.topic-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:56px;padding:12px 0;border-bottom:1px solid var(--line-2);font-family:var(--head);font-weight:800;font-size:17px;color:var(--text-strong);transition:color var(--dur-fast)}
.topic-list a::after{content:"→";color:var(--green);font-family:var(--mono)}
.topic-list a:hover{color:var(--green)}
@media(max-width:900px){.topic-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.topic-list{grid-template-columns:1fr}}

/* ── Oborová šablona (šest oborů) ──
   Realita dnes, přepínač Dnes / S ENTER, seznam změn, osa kroků. */
body[data-obor] .grad-text{background:none!important;-webkit-text-fill-color:var(--green)!important;color:var(--green)!important}
.real-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media(min-width:900px){.real-grid:has(> .foto){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.real-grid>.foto{margin:0}
.real-list{list-style:none;margin:var(--sp-6) 0 0;padding:0;border-top:1px solid var(--line-2);max-width:34em}
.real-list li{padding:var(--sp-4) 0;border-bottom:1px solid var(--line-2);font-family:var(--head);font-weight:700;font-size:clamp(17px,1.45vw,19px);line-height:1.4;color:var(--text)}
.real-list li b{font-weight:900;color:var(--text-strong)}
.im-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media(min-width:900px){.im-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.imagine-toggle{display:inline-flex;margin-top:var(--sp-6);background:var(--navy-3);border-radius:var(--r-pill);padding:4px}
.imagine-toggle button{min-height:44px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--text);background:none;border:0;border-radius:var(--r-pill);padding:0 22px;cursor:pointer;transition:background-color var(--dur),color var(--dur)}
.imagine-toggle button:hover{color:var(--text-strong)}
.imagine-toggle button.active{background:var(--green);color:var(--on-fill)}
.im-head{margin-top:var(--sp-5)}
.im-val{font-family:var(--head);font-weight:900;font-size:clamp(22px,2.3vw,30px);line-height:1.15;color:var(--muted);transition:color var(--dur)}
.imagine.is-enter .im-val{color:var(--green)}
.im-rows{border-top:1px solid var(--line-2)}
.im-row{display:flex;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.im-mark{flex:none;align-self:center;width:9px;height:9px;border-radius:50%;background:var(--line-3);transition:background-color var(--dur),box-shadow var(--dur)}
.imagine.is-enter .im-mark{background:var(--green);box-shadow:0 0 0 4px var(--green-wash)}
.im-op{flex:none;width:44%;font-family:var(--head);font-weight:700;font-size:16px;line-height:1.3;color:var(--text-strong)}
.im-state{flex:1;min-width:0;font-family:var(--mono);font-size:14px;line-height:1.5}
.im-dnes{color:var(--caption)}
.im-enter{display:none;color:var(--green)}
.imagine.is-enter .im-dnes{display:none}
.imagine.is-enter .im-enter{display:inline}
@media(max-width:560px){.im-row{flex-wrap:wrap;gap:4px 12px}.im-op{width:auto;flex:1}.im-state{flex-basis:100%;padding-left:21px}}
.shift-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(32px,5vw,80px)}
@media(min-width:760px){.shift-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shift-list li{border-top:1px solid var(--line-2);padding:var(--sp-5) 0 var(--sp-6)}
.shift-list h3{margin:0 0 var(--sp-2)}
.shift-list p{margin:0;font-family:var(--mono);font-size:var(--fs-body);line-height:1.65;color:var(--text);max-width:44ch}
.osa{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
@media(min-width:860px){.osa{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px)}}
.osa li{border-top:2px solid var(--line-2);padding-top:var(--sp-5)}
.osa li:first-child{border-top-color:var(--green)}
.osa-n{display:block;font-family:var(--head);font-weight:900;font-size:clamp(32px,3.2vw,44px);line-height:1;letter-spacing:-.02em;color:var(--green);font-variant-numeric:tabular-nums;margin-bottom:var(--sp-4)}
.osa h3{margin:0 0 var(--sp-2)}
.osa p{margin:0;font-family:var(--mono);font-size:var(--fs-body);line-height:1.65;color:var(--text);max-width:36ch}
@media(prefers-reduced-motion:reduce){.imagine-toggle button,.im-val,.im-mark,.crumbs a,.xlink{transition:none}}

/* ── Tým (dřív v bloku stránky /tym) ── */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:30px}
.tm{position:relative}
.tm-photo{position:relative;aspect-ratio:1;border-radius:var(--r-lg);border-top-right-radius:0;overflow:hidden;
  background:var(--navy-deep);
  border:1px solid var(--line-2);display:flex;align-items:flex-end;justify-content:center;
  box-shadow:var(--elev)}
.tm-photo img{width:100%;height:100%;object-fit:cover;display:block}

.tm-name{font-family:var(--head);font-weight:800;font-size:var(--fs-h3);line-height:1.24;color:var(--text-strong);margin:18px 0 0;letter-spacing:-.01em}
.tm-role{font-family:var(--mono);margin-top:6px;display:block}
.tm-bio{font-family:var(--mono);line-height:1.6;color:var(--text);margin:11px 0 0;max-width:30ch}
.tm-links{display:flex;gap:10px;}
.tm-links a{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:var(--r-xs);color:var(--muted);transition:color var(--dur),border-color var(--dur)}
.tm-links a:hover{color:var(--green);border-color:var(--green-line)}

.team-group{margin-top:var(--sp-7)}
.team-group:first-of-type{margin-top:6px}
.team-gh{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.team-gh .n{font-family:var(--mono);font-size:12px;color:var(--green);letter-spacing:.1em}
.team-gh h3{font-family:var(--head);font-weight:800;font-size:var(--fs-h3);line-height:1.24;color:var(--text-strong);margin:0;letter-spacing:-.01em;}
.team-gh .team-gl{flex:1;height:1px;background:var(--line-2)}
.tm-featured{display:grid;grid-template-columns:210px 1fr;gap:32px;align-items:center;max-width:760px}
@media(max-width:560px){.tm-featured{grid-template-columns:1fr;gap:20px}.tm-featured .tm-photo{max-width:230px}}
.tm-featured .tm-name{margin-top:0}
.tm-quote{font-family:var(--head);font-weight:700;color:var(--text-strong);font-size:var(--fs-lede);line-height:1.5;margin:15px 0 0;border-left:3px solid var(--green);padding-left:15px}

/* Tým: bez zvedání neklikatelných fotek a čipů, role větou místo verzálek,
   vývojové týmy jako tři sloupce s linkou místo barevných karet. */
.tm-role{font-size:13px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--green)}
.team-grid.compact .tm-role{font-size:12px;letter-spacing:0;line-height:1.4}
.team-chips-lbl,.tm-caps-h{font-size:12px;letter-spacing:0;text-transform:none;}
.team-chip:hover{border-color:var(--line-2)}
.tm-more:hover .tm-more-box{border-color:var(--line-2)}
.tm-more-l{font-size:12px;letter-spacing:0;text-transform:none}
.team-gh h3{white-space:normal}
.tm-links{margin-top:10px}
.tm-links a{width:44px;height:44px;margin-left:-7px}
.tm-links a:not(:hover){border-color:transparent}
.tm-links svg{width:18px;height:18px}
.tm-quote{font-style:normal}
.tm-hire{display:inline-block;line-height:44px;font-family:var(--mono);font-size:14px;color:var(--green);text-decoration:underline;text-underline-offset:4px}
.tm-hire:hover{color:var(--green-soft)}
.eng-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-7) var(--sp-6);margin:0;padding:0;list-style:none}
.eng-col{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-5);border-top:2px solid var(--text-strong)}
.eng-col h3{margin:0}
.eng-col .eng-meta{margin:0;font-family:var(--mono);font-size:var(--fs-cap);color:var(--caption)}
.eng-col .eng-tag{margin:var(--sp-2) 0 0;font-family:var(--mono);font-size:var(--fs-body);font-weight:400;line-height:1.6;color:var(--text)}
.eng-col .eng-people{border-top:1px solid var(--line);margin-top:var(--sp-4)}
.eng-col .eng-person img{border:0;box-shadow:none}
.eng-col .eng-person .ep-role{font-size:12px;letter-spacing:0;text-transform:none;color:var(--caption)}
.eng-col .eng-more2{padding-left:0;margin-top:0}
.eng-col .eng-person+.eng-more2{padding-left:56px}
@media(max-width:900px){.eng-cols{grid-template-columns:minmax(0,1fr)}}

/* ── Čitelnost drobného textu ──
   Text v kartách min. 14 px, štítky 12 px. Drobné popisky (do 13 px) jedou
   barvou běžného textu #3C4657, ne šedou #5C6675. */
.step-card p,.fcard p,.tm-bio{font-size:var(--fs-card)}
.bc-tag,.bc-meta,.bc-date,.team-chip,.eng-more2,.article-note,.wmeta dt,.tbl th,.tbl td[data-l]::before{font-size:var(--fs-label)}
.addr,.ms-logo .ms-tx span,.trust-tx span,.foot-bottom,.foot-bottom a,.wmeta dt,.tbl th,.tbl td[data-l]::before,.facts dt,.kt-direct dt,.legal-note,.team-chips-lbl,.tm-caps-h,.tm-more-l,.eng-meta,.ep-role,.hero-note,.cta-note,.ht-lab,.lm-toggle,.bc-date,.pole label .opt{color:var(--caption)}
.trust-tx span{font-size:var(--fs-label)}
.foot-bottom{font-size:var(--fs-label)}

/* ── Patička: dotykové cíle 44 px ── */
.foot-grid .foot-h{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 4px}
.foot-grid a{display:flex;align-items:center;min-height:44px;padding:0}
.foot-grid .addr a{position:relative;display:inline;padding:0}
.foot-grid .addr a::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.foot-bottom a{display:inline-flex;align-items:center;min-height:44px}
.foot-bottom a:hover{color:var(--green)}

/* ── Odznak GDPR: plná ikona (kruh hvězd EU), bez filtru, pevný rozměr ── */
.trust-ico{width:27px;height:27px;opacity:1;filter:none}
/* Obory: zkrácený postup se dvěma kroky (Milo) */
@media(min-width:860px){.osa.dva{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}}

/* pás klientů: bez tlačítka, logo se při najetí lehce zvětší */
.lm-toggle{display:none!important}
.logo-marquee:hover .lm-track{animation-play-state:paused}
.lm-item img{transition:transform .25s ease}
.lm-item:hover img{transform:scale(1.12)}
@media (prefers-reduced-motion:reduce){.lm-item:hover img{transform:none}}
.hero .hero-kicker{display:block;margin:0 0 18px;max-width:34ch;font-size:13px;line-height:1.45;letter-spacing:.06em;text-transform:uppercase;color:var(--green-text,#0E7449)}

/* ═══════════════════════════════════════════════════════════════════════
   FINÁLNÍ UX VRSTVA (22. 9. 2026, agent „systém")
   Čitelné písmo pro dlouhé texty, role stínů a rádiusů, stavy prvků,
   jemný pohyb. Stojí na konci — vyhrává pořadím. Fira Mono zůstává pro
   štítky, drobečky, tlačítka a čísla; odstavce jedou Greycliff Medium.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Greycliff CF';src:url('fonts/GreycliffCF-Medium.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
:root{
  --sans:'Fira Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; /* brand manuál: texty ve Fira Mono */
  --fs-body:16px;
  --fs-lede:clamp(17px,1.4vw,19px);
  --fs-card:15px;
  --fs-cap:14px;
  --fs-label:12.5px;
  /* role stínů: klid → karta → zvednutá karta → plovoucí prvek */
  --elev:0 1px 2px rgba(15,23,34,.04),0 6px 20px -14px rgba(15,23,34,.16);
  --elev-hi:0 2px 4px rgba(15,23,34,.04),0 22px 44px -24px rgba(15,23,34,.28);
  --elev-float:0 24px 60px -28px rgba(15,23,34,.35);
  --ring:0 0 0 3px rgba(65,227,158,.45);
  --ease-out:cubic-bezier(.16,1,.3,1);}

/* ── Typografie: dlouhé texty sans, ne monospace (audit bod 36) ── */
body{font-family:var(--sans);font-size:var(--fs-body);line-height:1.65;font-weight:500;
  font-feature-settings:"kern","liga";letter-spacing:.003em}
.lede,.sec-head p,.subhero .lede,.faq .fa,.stepper p,.step-card p,.fcard p,.legal-body p,.legal-body li,
.eng-col .eng-tag,.foot-claim{font-family:var(--sans);font-weight:500}
.lede,.sec-head p,.subhero .lede{font-size:var(--fs-lede);line-height:1.6;color:var(--text)}
.stepper p,.step-card p,.fcard p{font-size:var(--fs-card);line-height:1.62}
.faq .fa{font-size:var(--fs-body);line-height:1.7}
/* Odstavce a položky seznamů v obsahu. Vyšší specificita přebije
   font-family:var(--mono) v blocích stránek; štítky, poznámky a čísla
   (třídy *lbl, *kicker, *tag, *lab, *note, *num, *meta) zůstávají v mono. */
html body main :is(p,li,dd,blockquote,figcaption,td):not([class*="lbl"]):not([class*="kicker"]):not([class*="tag"]):not([class*="lab"]):not([class*="note"]):not([class*="num"]):not([class*="meta"]):not([class*="date"]):not(.mono):not([class*="stat"]){font-family:var(--sans)}
html body .foot-claim,html body .addr{font-family:var(--sans);font-size:14px;line-height:1.6}
/* Drobné popisky: nic pod 12,5 px, barva běžného textu */
.kicker,.sec-kicker,.sec-lbl,.wt-tag,.foot-grid .foot-h{font-size:var(--fs-label)}
.crumbs{font-size:13.5px}
.foot-bottom,.foot-bottom a{font-size:13px}
.foot-grid a{font-family:var(--sans);font-size:15px;font-weight:500}
.btn{font-size:14px;letter-spacing:.01em}
.btn.big{font-size:15px}

/* ── Rádiusy podle role ── tlačítko 12, karta 16, velká plocha/fotka 24 */
.btn{border-radius:var(--r-sm)}
.step-card,.fcard,.blog-card,.partner-karta{border-radius:var(--r-md)}
.cta-card,.hero-slot,.ed-slot,.foto,.cesta{border-radius:var(--r-lg)}

/* ── Tlačítka: hover, stisk, fokus ── */
.btn{position:relative;transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}
.btn:not(.outline){box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 20px -12px rgba(14,116,73,.65)}
.btn:not(.outline):hover{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 28px -14px rgba(14,116,73,.7)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.btn:focus-visible,a.cta:focus-visible,.cesta:focus-visible,.partner-karta a:focus-visible{outline:2px solid var(--green);outline-offset:3px;box-shadow:var(--ring)}
.btn .arr{display:inline-block;transition:transform .25s var(--ease-out)}

/* ── Textové odkazy: podtržení zhoustne, šipka popojede ── */
.xlink{text-decoration-thickness:1px;transition:color .2s var(--ease),text-decoration-color .2s var(--ease),text-underline-offset .2s var(--ease)}
.xlink:hover{text-underline-offset:7px}
.xlink::after{display:inline-block;transition:transform .25s var(--ease-out)}
.xlink:hover::after{transform:translateX(3px)}
.ed-body a:not(.btn):not(.xlink),.legal-body a:not(.btn),.article-body a:not(.btn){text-decoration:underline;text-decoration-color:var(--green-line);text-underline-offset:4px;transition:text-decoration-color .2s}
.ed-body a:not(.btn):not(.xlink):hover,.legal-body a:not(.btn):hover,.article-body a:not(.btn):hover{text-decoration-color:currentColor}

/* ── Karty: jeden hover ── */
.step-card,.fcard,.blog-card{transition:transform .35s var(--ease-out),border-color .25s var(--ease),box-shadow .35s var(--ease-out)}
.step-card:hover,.fcard:hover,.blog-card:hover{transform:translateY(-3px);border-color:var(--line-3);box-shadow:var(--elev-hi)}

/* ── Hlavička ── */
html body #header.scrolled{box-shadow:0 1px 0 rgba(15,23,34,.07),0 12px 32px -22px rgba(15,23,34,.3)}
html body #navlinks a.cta{transition:background .2s var(--ease),transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
html body #navlinks a.cta:hover{box-shadow:0 10px 22px -10px rgba(14,116,73,.65)}
html body #navlinks a.cta:active{transform:none}

/* ── Patička ── */
.foot{padding-top:clamp(48px,6vw,72px)}
.foot-grid a{transition:color .2s var(--ease),transform .25s var(--ease-out)}
.foot-grid > div > a:not(.logo):hover{transform:translateX(3px)}
.foot-grid .foot-h{margin-bottom:8px}

/* ── Reveal: bez JS a při omezeném pohybu je obsah vidět hned ── */
.reveal{transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
@media (scripting:none){.reveal{opacity:1;transform:none}}
/* Postupné odhalení potomků [data-stagger]; --i nastavuje site.js */
[data-stagger]>*{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms + 80ms)}
.reveal:not(.in) [data-stagger]>*,.reveal:not(.in)[data-stagger]>*{opacity:0;transform:translateY(14px)}
@media (scripting:none){.reveal:not(.in) [data-stagger]>*,.reveal:not(.in)[data-stagger]>*{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .btn,.xlink::after,.step-card,.fcard,.blog-card,.foot-grid a,[data-stagger]>*{transition:none!important}
  .btn:hover,.btn:active,.step-card:hover,.fcard:hover,.blog-card:hover,.foot-grid > div > a:not(.logo):hover{transform:none!important}
  .reveal:not(.in) [data-stagger]>*,.reveal:not(.in)[data-stagger]>*{opacity:1;transform:none}
}
.cookie-banner p{font-family:var(--sans);font-size:14px;line-height:1.55}
/* Patička: důvěryhodnostní loga vyvážená (návrh agenta obory/tech) */
.foot-trust{align-items:center;gap:24px 40px}
.foot-trust .tds-logo .tds-mark{height:40px}
@media(max-width:560px){.foot-trust{flex-wrap:wrap}}

/* dočištění po UX agentech */
@media (prefers-reduced-motion:reduce){.cta-note{opacity:1!important;animation:none!important}}
.pl-d{font-family:var(--sans)}
.article-body{max-width:68ch;line-height:1.7}
.article-body h2,.article-body h3{margin-top:1.8em}

/* ============ KLÁVESOVÝ EFEKT (převzato z enterit.cz — firemní prvek ENTER) ============
   Tlačítka i klikací karty mají tvrdý navy stín; při najetí/stisku se "zamáčknou". */
:root{--travel:9px;--btn-travel:5px;--key-side:#0F1722;--press:90ms cubic-bezier(.3,.7,.3,1)}
html body .btn:not(.outline):not(.ghost){box-shadow:var(--btn-travel) var(--btn-travel) 0 var(--key-side);transition:transform var(--press),box-shadow var(--press),background-color .2s}
html body .btn:not(.outline):not(.ghost):hover,html body .btn:not(.outline):not(.ghost):focus-visible,html body .btn:not(.outline):not(.ghost):active{transform:translate(var(--btn-travel),var(--btn-travel));box-shadow:0 0 0 var(--key-side)}
html body .btn.outline{box-shadow:inset 0 0 0 1.5px currentColor,var(--btn-travel) var(--btn-travel) 0 rgba(15,23,34,.28);transition:transform var(--press),box-shadow var(--press)}
html body .btn.outline:hover,html body .btn.outline:focus-visible,html body .btn.outline:active{transform:translate(var(--btn-travel),var(--btn-travel));box-shadow:inset 0 0 0 1.5px currentColor,0 0 0 rgba(15,23,34,.28)}
/* Klikací karta = klávesa. Použij <a class="key-card" href="…"> kolem celé karty. */
a.key-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer;background:#fff;border-radius:20px;
  box-shadow:inset 0 0 0 1.5px rgba(15,23,34,.12),var(--travel) var(--travel) 0 var(--key-side);
  transition:transform var(--press),box-shadow var(--press)}
a.key-card:hover,a.key-card:focus-visible,a.key-card:active{transform:translate(var(--travel),var(--travel));box-shadow:inset 0 0 0 1.5px rgba(15,23,34,.12),0 0 0 var(--key-side)}
a.key-card:focus-visible{outline:2px solid var(--key-side);outline-offset:4px}
a.key-card .key-go{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#0E7449;display:inline-flex;gap:8px;align-items:center}
a.key-card .key-go::after{content:"→";transition:transform .2s}
a.key-card:hover .key-go::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){html body .btn,a.key-card{transition:none}}

/* ============ OBORY: vizualizace bez tmavé podložky (Milo 22. 9.) ============ */
.loop-frame.loop-light,.loop-light .loop-stage{background:transparent;border:0;box-shadow:none;padding-left:0;padding-right:0;
  --text:#3C4657;--text-strong:#0F1722;--muted:#5B6576;--white:#0F1722;--line:rgba(15,23,34,.12);--line-2:rgba(15,23,34,.18);--green:#0E7449}
.loop-frame.loop-light::before{display:none}
.loop-light .loop-cap .live{color:#0E7449}
.loop-light .ring-bg{stroke:rgba(15,23,34,.08)}
.loop-light .edge-ring{stroke:rgba(15,23,34,.22)}
.loop-light circle[fill="url(#lhGridP)"]{display:none}
.loop-light .seg{filter:none}
.loop-light .seg-flow{stroke:rgba(255,255,255,.85);filter:blur(1px)}
.loop-light .station .s-disc{fill:#fff;filter:drop-shadow(0 6px 14px rgba(15,23,34,.16))}
.loop-light .station .s-name{fill:#0F1722}
.loop-light .station .s-lab{fill:#0F1722}
.loop-light .station .s-agent,.loop-light .station .s-act{filter:brightness(.62) saturate(1.3)}
.loop-light .person .p-body{fill:#3C4657}
.loop-light .person .p-ring{fill:#fff;stroke:rgba(15,23,34,.2);filter:drop-shadow(0 4px 10px rgba(15,23,34,.12))}
.loop-light .person .p-role{fill:#0F1722}
.loop-light .person .p-sub{fill:#5B6576}
.loop-light .person:hover .p-role,.loop-light .person.hl .p-role{fill:#0E7449}
.loop-light .beam{stroke:rgba(14,116,73,.35)}
.loop-light .beam.hl{stroke:rgba(14,116,73,.8)}
.loop-light .beam-dot{fill:#41E39E;filter:none}
.loop-light .sc-box{fill:#fff;stroke:rgba(15,23,34,.12);filter:drop-shadow(0 12px 28px rgba(15,23,34,.14))}
.loop-light rect[fill="url(#scSheen)"]{display:none}
.loop-light .sc-title,.loop-light .sc-star{fill:#5B6576}
.loop-light .sc-tile-bg{fill:#F3F5F8;stroke:rgba(15,23,34,.08)}
.loop-light .sc-tile-tx{fill:#0F1722}
.loop-light .star-glow{opacity:.35}
.loop-light .star-ring{stroke:rgba(14,116,73,.25)}
.loop-light .loop-foot{color:#3C4657}
.loop-light .loop-foot i{background:#fff;border-color:rgba(15,23,34,.14)}
.loop-light .loop-foot i b{color:#0F1722}
.loop-light .lf-sys{background:#fff;border-color:#0E7449}
.loop-light .loop-bubble{background:#fff;color:#3C4657;border-color:rgba(15,23,34,.14);box-shadow:0 18px 44px -18px rgba(15,23,34,.35)}
.loop-light p,.loop-light .hero-note{color:#3C4657}

/* Hlavička: původní písmo podle brand manuálu (Fira Mono, verzálky) */
html body #navlinks a:not(.cta),html body #navlinks a.cta,html body .mobile-menu a{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}

/* Logo = klávesa jako tlačítka: bílá čepička s navy bokem, při najetí se zamáčkne do boku */
html body #header .brand .logo{position:relative;isolation:isolate}
html body #header .brand .logo::before,html body #header .brand .logo::after{content:"";position:absolute;inset:0;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20476.61%20200%27%3E%3Cpath%20d%3D%27M476.61%2C34.09C476.61%2C15.26%2C461.35%2C0%2C442.52%2C0H60.55C51.22%2C0%2C42.77%2C3.75%2C36.61%2C9.83l-26.74%2C26.73C3.77%2C42.72%2C0%2C51.19%2C0%2C60.54v105.36c0%2C18.83%2C15.26%2C34.09%2C34.09%2C34.09h381.97c9.44%2C0%2C17.99-3.84%2C24.16-10.04l26.31-26.3c6.23-6.18%2C10.08-14.74%2C10.08-24.2V34.09Z%27/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20476.61%20200%27%3E%3Cpath%20d%3D%27M476.61%2C34.09C476.61%2C15.26%2C461.35%2C0%2C442.52%2C0H60.55C51.22%2C0%2C42.77%2C3.75%2C36.61%2C9.83l-26.74%2C26.73C3.77%2C42.72%2C0%2C51.19%2C0%2C60.54v105.36c0%2C18.83%2C15.26%2C34.09%2C34.09%2C34.09h381.97c9.44%2C0%2C17.99-3.84%2C24.16-10.04l26.31-26.3c6.23-6.18%2C10.08-14.74%2C10.08-24.2V34.09Z%27/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
html body #header .brand .logo::before{background:#0F1722;transform:translate(3px,3px);z-index:-2}
html body #header .brand .logo::after{background:#fff;z-index:-1;transition:transform 90ms cubic-bezier(.3,.7,.3,1)}
html body #header .brand .logo svg{display:block;position:relative;transition:transform 90ms cubic-bezier(.3,.7,.3,1)}
html body #header .brand:hover .logo svg,html body #header .brand:hover .logo::after,html body #header .brand:focus-visible .logo svg,html body #header .brand:focus-visible .logo::after,html body #header .brand:active .logo svg,html body #header .brand:active .logo::after{transform:translate(3px,3px)}
@media (prefers-reduced-motion:reduce){html body #header .brand .logo svg,html body #header .brand .logo::after{transition:none}}

/* Hero kicker: čitelnější — nadpisové písmo, pilulka s mint tečkou */
html body .hero .hero-kicker{display:inline-flex;align-items:center;gap:12px;max-width:none;margin:0 0 var(--sp-5);
  padding:10px 18px 10px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(15,23,34,.10),0 6px 18px -12px rgba(15,23,34,.35);
  font-family:var(--head);font-size:clamp(15px,1.25vw,17px);font-weight:700;line-height:1.35;letter-spacing:-.005em;text-transform:none;color:#0F1722;text-wrap:balance}
html body .hero .hero-kicker::before{width:10px;height:10px;border-radius:50%;margin:0;background:#41E39E;box-shadow:0 0 0 4px rgba(65,227,158,.22)}
@media (max-width:600px){html body .hero .hero-kicker{border-radius:16px;align-items:flex-start}html body .hero .hero-kicker::before{margin-top:5px}}
html body .hero .hero-kicker{border-radius:14px;align-items:flex-start;padding:12px 18px 12px 16px}
html body .hero .hero-kicker::before{margin-top:5px}