/* stomp.cz – statická verze původního webu (rozměry a barvy převzaté 1:1) */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: #666;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  padding-bottom: 10px;
  color: #333;
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 600;
}
h1 { font-size: 50px; line-height: 1.3em; }
h2 { font-size: 32px; line-height: 1.6em; }
h3 { font-size: 16px; line-height: 1.6em; letter-spacing: 1px; text-transform: uppercase; }

p { margin: 0; padding-bottom: 1em; line-height: 2em; }
p:last-child { padding-bottom: 0; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

/* ---------- kostra ---------- */

.section { padding: 54px 0; }

.row {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 27px 0;
}

.section__title {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- úvod ---------- */

.hero { padding-bottom: 1px; }

.hero__row {
  display: grid;
  grid-template-columns: 47.25% 47.25%;
  column-gap: 5.5%;
}

.hero__text { padding-top: 63px; text-align: center; }

.hero__image {
  margin: -116px -10vw 0 -10%;
}
.hero__image img { width: 100%; }

/* ---------- jak to u nás funguje ---------- */

.process { padding: 45px 0 3px; }

.process__row {
  display: grid;
  grid-template-columns: repeat(3, 29.6667%);
  column-gap: 5.5%;
}

.process__col--left { text-align: right; }
.process__col--right { text-align: left; }

.step { margin-bottom: 30px; }
.step:last-child { margin-bottom: 0; }

.step__icon {
  width: 45px;
  margin: 60px 0 30px;
}
.step--tight .step__icon { margin-top: 36px; }
.process__col--left .step__icon { margin-left: auto; }

.process__image img { width: 100%; }

/* ---------- aplikace ---------- */

.apps { padding-bottom: 4px; }

.apps__row {
  display: grid;
  grid-template-columns: 47.25% 47.25%;
  column-gap: 5.5%;
}

.apps__name { margin-bottom: 30px; }
.apps__text { font-size: 18px; }
.apps__text strong { font-weight: 700; }

.apps__screen {
  width: auto;
  max-height: 416px;
}

/* ---------- výzva ke kontaktu ---------- */

.cta {
  position: relative;
  z-index: 10;
  margin: 0 6vw;
  padding: 54px 30px 2px;
  border-radius: 8px;
  overflow: hidden;
  background-image: linear-gradient(180deg, #3cd1ff 0%, #1ca5ff 100%);
  box-shadow: 0 45px 135px -45px rgba(28, 165, 255, 0.76);
  color: #fff;
  text-align: center;
}

.cta__inner { max-width: 700px; margin: 0 auto; }

.cta h2 { color: #fff; margin-bottom: 42px; }

.cta__lead {
  padding-bottom: 0;
  margin-bottom: 56px;
  font-size: 18px;
  line-height: 28px;
}

.cta__contact {
  margin-bottom: 126px;
  font-size: 24px;
  font-weight: 700;
  line-height: 33px;
}

/* ---------- patička ---------- */

.footer { padding: 7px 0 6px; }

.footer p {
  font-size: 16px;
  font-weight: 700;
  line-height: 23.8px;
  text-align: center;
}

/* ---------- 404 ---------- */

.notfound { text-align: center; }
.notfound p { font-size: 18px; }
.notfound a { color: #1ca5ff; font-weight: 700; }

/* ---------- tablet a mobil ---------- */

@media (max-width: 980px) {
  .section { padding: 50px 0; }
  .row { padding: 30px 0; }

  h1 { font-size: 30px; }
  h2 { font-size: 24px; }

  .hero { padding-bottom: 1px; }
  .hero__row,
  .process__row,
  .apps__row { display: block; }

  .hero__text { padding-top: 0; text-align: left; margin-bottom: 60px; }
  .hero__image { margin: 0 10vw; }

  .process { padding: 45px 0 3px; }
  .process__col { margin-bottom: 30px; }
  .process__image { margin-bottom: 60px; }
  .process__col--right { margin-bottom: 0; }
  .step__icon,
  .process__col--left .step__icon { margin-left: auto; margin-right: auto; }
  .process__image img { width: auto; margin: 0 auto; }

  .apps { padding-bottom: 4px; }
  .apps__col { margin-bottom: 30px; }
  .apps__col:last-child { margin-bottom: 0; }
  .apps__name { text-align: center; }
  .apps__text { font-size: 16px; }

  .cta { padding: 50px 30px 2px; }
  .footer { padding: 7px 0 6px; }
}

@media (max-width: 767px) {
  h1 { font-size: 24px; }
  h2 { font-size: 18px; }

  .process__image img { height: 202px; }
  .apps__text { font-size: 14px; }
}