/* Pracovní verze V2: výrazná navigace, ostré hrany, služby před hero. */
main {
  display: flex;
  flex-direction: column;
}

.services {
  order: -1;
  position: relative;
  padding: 28px 0 64px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(0, 102, 255, .035) 1px, transparent 1px),
    linear-gradient(rgba(0, 102, 255, .035) 1px, transparent 1px),
    #fff;
  background-size: 48px 48px;
}

.services .section-heading {
  display: none;
}

.services .service-grid {
  margin-top: 0;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(8, 24, 52, .09);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 32px 80px rgba(24, 50, 93, .08);
}

.services.section { padding-bottom: 0; }
.work.section { padding-top: 68px; }

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.plain-cta { color:#fff; background:var(--blue); }
.plain-cta-inner { position:relative; display:flex; align-items:end; justify-content:space-between; }
.plain-cta h2 { margin:0; font-size:clamp(50px,5.5vw,78px); line-height:1.03; letter-spacing:-.055em; }
.plain-cta p { max-width:660px; margin:25px 0 0; color:#dbe8ff; font-size:16px; line-height:1.7; }
.plain-cta .button { position:relative; z-index:2; min-height:66px; padding:0 34px; border:3px solid #fff; font-size:17px; font-weight:800; letter-spacing:.01em; }
.plain-cta .cta-ambient-arrow { position:absolute; right:295px; bottom:38px; width:210px; color:#fff; opacity:.72; pointer-events:none; transform:rotate(3deg); }
.plain-cta .cta-ambient-arrow svg { display:block; width:100%; overflow:visible; }
.plain-cta .cta-ambient-arrow path { fill:none; stroke:currentColor; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }

@media(max-width:900px){.plain-cta-inner{align-items:flex-start;flex-direction:column;gap:40px}.plain-cta .cta-ambient-arrow{right:40px;bottom:88px;width:150px;opacity:.6;transform:rotate(18deg)}}
@media(max-width:680px){.plain-cta h2{font-size:47px}.plain-cta .cta-ambient-arrow{right:12px;bottom:78px;width:120px}}

.services .service-card {
  position: relative;
  isolation: isolate;
  min-height: 460px;
  padding: 30px;
  border: 0;
  overflow: hidden;
  box-shadow: none;
  transition: color .4s ease, transform .4s ease, box-shadow .4s ease;
}

.services .service-card > p,
.services .service-more {
  display: none;
}

.services .mini-web,
.services .mini-phone,
.services .mini-webapp,
.services .mini-performance,
.services .solution-icons {
  margin-bottom: 0;
}

.services .mini-web,
.services .mini-phone,
.services .mini-webapp,
.services .mini-performance {
  color: var(--ink);
}

.services .service-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--blue);
  transform: scaleX(.2);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1);
}

.services .service-card::after {
  content: none;
}

.services .service-ambient {
  position: absolute;
  z-index: 0;
  top: -48px;
  right: -43px;
  width: 178px;
  height: 178px;
  color: var(--blue);
  opacity: .04;
  pointer-events: none;
  transform: rotate(-7deg);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2,.8,.2,1), color .4s ease;
}

.services .service-ambient svg { display:block; width:100%; height:100%; overflow:visible; }
.services .service-ambient svg * { fill:none; stroke:currentColor; stroke-width:6; stroke-linecap:square; stroke-linejoin:miter; }
.services .ambient-app { top:-52px; right:-20px; transform:rotate(8deg); }
.services .ambient-webapp { top:-45px; right:-35px; transform:rotate(-5deg); }
.services .ambient-marketing { top:-42px; right:-42px; transform:rotate(-3deg); }
.services .ambient-solutions { top:-54px; right:-49px; transform:rotate(12deg); }

.services .service-card:hover {
  z-index: 2;
  color: #fff;
  background: #08152a;
  transform: translateY(-10px);
  box-shadow: 0 30px 65px rgba(5, 19, 42, .25);
}

.services .service-card:hover::before {
  height: 100%;
  transform: scaleX(1);
  background: linear-gradient(145deg, #2457D6 0%, #0644a4 72%, #07162d 100%);
}

.services .service-card:hover::after {
  color: rgba(255, 255, 255, .09);
}

.services .service-card:hover .service-ambient {
  color: #fff;
  opacity: .075;
  transform: rotate(0deg) scale(1.06);
}

.services .service-card:hover p,
.services .service-card:hover .card-number {
  color: rgba(255, 255, 255, .78);
}

.services .service-card:hover .service-more {
  color: #06152d;
  border-color: #fff;
  background: #fff;
  transform: translateX(8px);
}

.services .card-number {
  display: none;
}

.services .card-number::after {
  content: none;
}

.services .service-card h3 {
  position: relative;
  z-index: 1;
  min-height: 102px;
  margin-top: 22px;
  font-size: clamp(26px, 2vw, 34px);
}

.services .service-card p,
.services .service-card > a,
.services .mini-web,
.services .mini-phone,
.services .mini-webapp,
.services .mini-performance,
.services .solution-icons {
  position: relative;
  z-index: 2;
}

.services .service-card > .service-more {
  width: auto;
  height: 46px;
  align-self: flex-start;
  display: inline-flex;
  gap: 28px;
  padding: 0 18px;
  border: 1px solid rgba(0, 102, 255, .35);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .3s ease, color .3s ease, background-color .3s ease;
}

.services .service-more span { font-size: 17px; }
.services .service-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.services .mini-web,
.services .mini-phone,
.services .mini-webapp,
.services .mini-performance,
.services .solution-icons {
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}

.services .service-card:hover .mini-web,
.services .service-card:hover .mini-webapp,
.services .service-card:hover .mini-performance,
.services .service-card:hover .solution-icons {
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 22px 45px rgba(0, 0, 0, .2);
}

.services .service-card:hover .mini-phone {
  transform: rotate(1deg) translateY(-10px) scale(1.035);
  box-shadow: 0 22px 45px rgba(0, 0, 0, .2);
}

.services .mini-web::after,
.services .mini-webapp::after,
.services .mini-performance::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.7) 47%, transparent 68%);
  transform: translateX(-120%);
}

.services .service-card:hover .mini-web::after,
.services .service-card:hover .mini-webapp::after,
.services .service-card:hover .mini-performance::after {
  animation: service-sheen 1.1s ease forwards;
}

.services .solution-icons span {
  position: relative;
  color: #303a4a;
  font-weight: 700;
  transition: transform .3s ease, background-color .3s ease;
}

.services .solution-icons span::before {
  content: "+";
  position: absolute;
  top: 10px;
  left: 12px;
  color: var(--blue);
  font-size: 15px;
}

.services .solution-icons span:hover {
  color: #fff;
  background: var(--blue);
  transform: translate(-3px, -3px);
}

.services .solution-icons span:hover::before {
  color: #fff;
}

.services .mini-webapp {
  position: relative;
  height: 235px;
  margin-bottom: 0;
  overflow: hidden;
  color: var(--ink);
  background: rgba(255,255,255,.86);
  box-shadow: 0 15px 34px rgba(38,66,102,.08);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.webapp-top { height:42px; display:flex; align-items:center; gap:9px; padding:0 14px; border-bottom:1px solid #e4eaf3; font-size:9px; }
.webapp-top i { width:9px; height:9px; background:var(--blue); }
.webapp-top b { margin-right:auto; }
.webapp-top span { color:var(--blue); font-size:7px; font-weight:800; letter-spacing:.1em; }
.webapp-body { display:grid; grid-template-columns:38px 1fr; height:calc(100% - 42px); }
.webapp-body aside { display:grid; align-content:start; gap:12px; padding:17px 12px; border-right:1px solid #e4eaf3; }
.webapp-body aside i { width:14px; height:3px; background:#b9c7dc; }
.webapp-body main { position:relative; display:block; padding:20px 14px; }
.webapp-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.webapp-kpis b { display:grid; place-items:center; height:38px; color:var(--blue); background:#eef4ff; font-size:11px; }
.webapp-flow { display:flex; align-items:center; justify-content:space-between; margin-top:30px; font-size:6px; font-weight:800; }
.webapp-flow span { padding:8px 6px; border:1px solid #d9e3f2; background:#fff; }
.webapp-flow i { color:var(--blue); font-style:normal; animation:webapp-arrow 1.5s ease-in-out infinite; }
.webapp-pulse { position:absolute; left:18px; right:18px; bottom:19px; height:3px; background:linear-gradient(90deg,#d9e5f8 0 42%,var(--blue) 42% 64%,#d9e5f8 64%); background-size:180% 100%; animation:webapp-pulse 2.6s linear infinite; }
@keyframes webapp-arrow { 50% { transform:translateX(3px); } }
@keyframes webapp-pulse { to { background-position:-180% 0; } }

.reference-strip {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.reference-strip::before,
.reference-strip::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: min(9vw, 130px);
  pointer-events: none;
}
.reference-strip::before { left:0; background:linear-gradient(90deg,#fff,transparent); }
.reference-strip::after { right:0; background:linear-gradient(-90deg,#fff,transparent); }
.reference-strip__viewport { width:100%; overflow:hidden; }
.reference-strip__track {
  display:flex;
  width:max-content;
  animation:reference-marquee 42s linear infinite;
  will-change:transform;
}
.reference-strip__logo {
  width:210px;
  min-height:86px;
  display:grid;
  place-items:center;
  padding:15px 28px;
  border-right:1px solid var(--line);
  color:#20242b;
  font-size:19px;
  font-weight:800;
  letter-spacing:.1em;
  white-space:nowrap;
  filter:grayscale(1);
  opacity:.48;
}
.reference-strip__logo:nth-child(3n) { font-family:Georgia,serif; font-weight:600; }
.reference-strip__logo:nth-child(4n) { font-weight:500; letter-spacing:.17em; }
@keyframes reference-marquee { to { transform:translateX(-50%); } }
@media(max-width:680px){.reference-strip__logo{width:165px;min-height:72px;font-size:15px}.reference-strip__track{animation-duration:34s}}
@media(prefers-reduced-motion:reduce){.reference-strip__track{animation:none}}

.desktop-nav {
  gap: 2px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.desktop-nav a {
  padding: 15px 16px;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.desktop-nav a::after {
  display: none;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: #fff;
  background: var(--blue);
  transform: translateY(-2px);
  outline: none;
}

.mobile-nav {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  color: #fff;
  background: var(--blue);
  outline: none;
}

/* Uživatelské rozhraní bez zaoblených hran. Organické dekorace zůstávají kruhové. */
.button,
.menu-toggle,
.mobile-nav,
.flow-panel,
.mini-logo,
.product-scene,
.product-copy button,
.chart,
.chart i,
.app-stats span,
.growth-chart,
.automation-flow span,
.service-card,
.mini-web,
.mini-phone,
.mini-performance,
.solution-icons span,
.service-card > a,
.work-layout,
.case-browser,
.case-hero button,
.process-steps i,
.heritage li::before,
.contact-card {
  border-radius: 0;
}

/* 01 — tematická webová scéna */
.services .mini-web { padding: 0; background: #fff; }
.web-toolbar { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid #e6ebf2; }
.web-toolbar i { width: 5px; height: 5px; background: #b9c4d3; }
.web-toolbar span { margin-left: 7px; color: #8a93a1; font-size: 7px; }
.web-layout { position: relative; display: grid; grid-template-columns: 32px 1fr; height: calc(100% - 26px); overflow: hidden; background: linear-gradient(135deg,#f7fbff,#e8f1ff); }
.web-layout aside { padding: 13px 8px; border-right: 1px solid rgba(7,11,20,.08); }
.web-layout aside b { display: block; height: 3px; margin-bottom: 7px; background: #aeb9c7; }
.web-layout main { z-index: 2; display: block; padding: 28px 17px; }
.web-layout small { color: var(--blue); font-size: 6px; font-weight: 800; text-transform: uppercase; }
.web-layout strong { display: block; margin-top: 8px; font-size: 18px; line-height: 1.05; }
.web-layout .mock-button { display: block; width: max-content; margin-top: 18px; padding: 7px 10px; color: #fff; background: #07101f; font-size: 7px; }
.web-product { position: absolute; right: -35px; bottom: -70px; width: 150px; height: 190px; border-radius: 50% 50% 0 0 !important; background: linear-gradient(145deg,#5f9cff,#0643a4); box-shadow: -25px -15px 60px rgba(255,255,255,.58) inset; animation: web-product 5s ease-in-out infinite; }
.web-cursor { position: absolute; z-index: 5; left: 46%; top: 58%; color: var(--blue); font-size: 24px; filter: drop-shadow(0 4px 4px rgba(0,102,255,.25)); animation: cursor-tour 5s ease-in-out infinite; }
.web-scan { position: absolute; z-index: 4; left: 0; right: 0; top: 28px; height: 2px; background: var(--blue); box-shadow: 0 0 14px rgba(0,102,255,.7); opacity: .5; animation: web-scan 4s ease-in-out infinite; }

/* 02 — silueta mobilu a aktivní dění na displeji */
.services .mini-phone { height: 245px; padding: 9px; border: 7px solid #073b91; background: #073b91; overflow: visible; }
.phone-speaker { z-index: 4; top: 8px !important; left: 38% !important; width: 24% !important; height: 7px !important; background: #073b91 !important; }
.phone-screen { height: 100%; padding: 18px 11px 10px; overflow: hidden; background: linear-gradient(180deg,#fff,#f1f6ff); }
.app-header { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 7px; font-weight: 800; }
.app-header i { display: grid; place-items: center; width: 18px; height: 18px; color: #fff; background: var(--blue); font-style: normal; }
.app-header em { margin-left: auto; font-style: normal; }
.phone-screen > small { display: block; color: #818a98; font-size: 7px; }
.phone-screen > strong { display: block; margin-top: 4px; font-size: 18px; }
.app-graph { position: relative; height: 70px; margin: 11px 0; overflow: hidden; background: linear-gradient(rgba(0,102,255,.06) 1px,transparent 1px); background-size: 100% 18px; }
.app-graph i { position: absolute; inset: 9px 0 0; background: linear-gradient(165deg,transparent 45%,rgba(0,102,255,.18) 46%); clip-path: polygon(0 72%,18% 62%,30% 70%,44% 39%,58% 52%,72% 24%,100% 3%,100% 100%,0 100%); animation: app-graph 3s ease-in-out infinite; }
.app-notification { padding: 8px; color: #fff; background: var(--blue); transform: translateX(115%); animation: app-notification 4s ease-in-out infinite; }
.app-notification b,.app-notification span { display: block; font-size: 7px; }
.app-notification span { margin-top: 2px; opacity: .7; }
.app-tabs { display: flex; justify-content: space-around; margin-top: 12px; }
.app-tabs i { width: 13px; height: 3px; background: #bec9da; }

/* 03 — vícevrstvý analytický dashboard */
.services .mini-performance { height: 235px; padding: 18px; }
.analytics-head { display: flex; justify-content: space-between; align-items: start; }
.analytics-head small,.analytics-head strong { display: block; }
.analytics-head small { color: #7c8491; font-size: 7px; }
.analytics-head strong { margin-top: 3px; font-size: 12px; }
.analytics-head > b { padding: 4px 6px; color: var(--blue); background: #e8f1ff; font-size: 6px; letter-spacing: .1em; }
.analytics-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 12px; }
.analytics-kpis span { padding: 7px; border: 1px solid #edf0f4; background: #fff; }
.analytics-kpis small,.analytics-kpis b { display: block; }
.analytics-kpis small { color: #8b93a0; font-size: 5px; }
.analytics-kpis b { margin-top: 3px; font-size: 9px; }
.analytics-chart { position: relative; height: 105px; margin-top: 12px; background: linear-gradient(rgba(18,40,76,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(18,40,76,.06) 1px,transparent 1px); background-size: 100% 25%,25% 100%; }
.analytics-chart svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.analytics-chart path { fill: none; stroke-width: 2; stroke-dasharray: 400; animation: analytics-draw 4s ease-in-out infinite; }
.line-primary { stroke: var(--blue); }
.line-secondary { stroke: #85b3ff; animation-delay: .4s !important; }
.chart-bars { position: absolute; inset: 20px 4px 0; display: flex; align-items: end; gap: 6px; opacity: .18; }
.chart-bars i { flex: 1; height: 35%; background: var(--blue); animation: analytics-bars 3s ease-in-out infinite; }
.chart-bars i:nth-child(2),.chart-bars i:nth-child(6){height:60%}.chart-bars i:nth-child(3){height:48%}.chart-bars i:nth-child(4),.chart-bars i:nth-child(8){height:78%}.chart-bars i:nth-child(5){height:55%}.chart-bars i:nth-child(7){height:92%}

/* 04 — obsah hotových modulů */
.services .solution-icons span { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 14px; }
.services .solution-icons span::before { content: none; }
.services .solution-icons span i,.services .solution-icons span b,.services .solution-icons span small { position: relative; z-index: 2; display: block; font-style: normal; }
.services .solution-icons span i { margin-bottom: 8px; color: var(--blue); font-size: 22px; }
.services .solution-icons span b { font-size: 10px; }
.services .solution-icons span small { margin-top: 4px; color: #7a8290; font-size: 6px; font-weight: 500; }
.services .solution-icons span:hover i,.services .solution-icons span:hover small { color: #fff; }

/* Hero — cesta návštěvníka webem */
.panel-web .panel-head { position: relative; z-index: 3; }
.web-concept { position:relative; height:286px; margin-top:16px; overflow:hidden; border:1px solid #dce5f3; color:var(--ink); background:#fff; box-shadow:0 18px 45px rgba(26,62,115,.11); }
.web-concept-bar { display:flex; align-items:center; gap:5px; height:31px; padding:0 10px; border-bottom:1px solid #e7ebf1; }
.web-concept-bar > span { width:5px; height:5px; background:#b9c5d5; }
.web-concept-bar b { margin-left:7px; color:#7d8795; font-size:7px; font-weight:700; }
.web-concept-body { display:grid; grid-template-columns:1.15fr .85fr; min-height:254px; background:linear-gradient(135deg,#fbfdff,#edf4ff); }
.web-concept-copy { position:relative; z-index:2; padding:38px 22px 24px; }
.web-concept-copy small { display:block; color:var(--blue); font-size:7px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.web-concept-copy strong { display:block; margin-top:10px; font-size:24px; line-height:1.06; letter-spacing:-.045em; }
.web-concept-copy i { display:inline-block; margin-top:24px; padding:9px 11px; color:#fff; background:var(--blue); font-size:7px; font-style:normal; font-weight:800; }
.web-concept-path { display:flex; flex-direction:column; justify-content:center; padding:22px 19px; }
.web-concept-path > span { position:relative; display:flex; align-items:center; gap:8px; min-height:42px; padding:9px 10px; border:1px solid #dbe5f4; color:#455268; background:rgba(255,255,255,.88); font-size:8px; font-weight:700; }
.web-concept-path > span b { display:grid; place-items:center; width:20px; height:20px; color:var(--blue); background:#edf3ff; font-size:6px; }
.web-concept-path > em { width:2px; height:17px; margin-left:20px; background:linear-gradient(var(--blue) 50%,#cbd9ee 50%); background-size:100% 8px; animation:web-path-flow 1.3s linear infinite; }
.web-concept-path .is-goal { color:#fff; border-color:var(--blue); background:var(--blue); }
.web-concept-path .is-goal b { color:var(--blue); background:#fff; }
.web-concept-cursor { position:absolute; z-index:5; left:48%; top:62%; color:var(--blue); font-size:22px; filter:drop-shadow(0 4px 5px rgba(36,87,214,.28)); animation:web-concept-cursor 5s ease-in-out infinite; }
.web-concept-cursor span { display:block; margin:-2px 0 0 14px; padding:4px 6px; color:#fff; background:#102c68; font-size:6px; }

@keyframes cursor-tour { 0%,100%{transform:translate(-25px,25px)} 35%{transform:translate(32px,-20px)} 65%{transform:translate(65px,18px)} }
@keyframes web-scan { 0%,100%{transform:translateY(0);opacity:.15} 50%{transform:translateY(190px);opacity:.6} }
@keyframes web-product { 0%,100%{transform:translateY(8px)} 50%{transform:translateY(-5px)} }
@keyframes app-graph { 0%,100%{transform:translateY(6px);opacity:.55} 50%{transform:translateY(-2px);opacity:1} }
@keyframes app-notification { 0%,28%,100%{transform:translateX(115%)} 42%,78%{transform:translateX(0)} }
@keyframes analytics-draw { 0%{stroke-dashoffset:400} 50%,100%{stroke-dashoffset:0} }
@keyframes analytics-bars { 0%,100%{transform:scaleY(.72);transform-origin:bottom} 50%{transform:scaleY(1)} }
@keyframes web-path-flow { to { background-position:0 8px; } }
@keyframes web-concept-cursor { 0%,100%{transform:translate(-55px,42px)} 38%{transform:translate(52px,-50px)} 70%{transform:translate(88px,32px)} }

@keyframes service-sheen {
  to { transform: translateX(120%); }
}

@media (max-width: 1100px) {
  .services {
    padding-top: 24px;
  }
}

@media (max-width: 680px) {
  .services {
    padding-top: 16px;
  }

  .services .service-card {
    min-height: 440px;
  }

  .web-concept { height:230px; margin-top:10px; }
  .web-concept-body { grid-template-columns:1fr .9fr; min-height:198px; }
  .web-concept-copy { padding:25px 13px 16px; }
  .web-concept-copy strong { font-size:18px; }
  .web-concept-copy i { margin-top:15px; padding:7px; font-size:6px; }
  .web-concept-path { padding:14px 9px; }
  .web-concept-path > span { min-height:34px; padding:6px; font-size:6px; }
  .web-concept-path > em { height:11px; }
}