/* ===== INTRO SEKCE (světlá horní část) ===== */

.intro-section {

  background: #eaf0ff;

  padding: 80px 20px;

  color: #1a243a;

}



.intro-container {

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1.3fr 1fr;

  gap: 40px;

  align-items: center;

}



.qr-types h2 {

  font-size: 1.8rem;

  margin-bottom: 20px;

  color: #111827;

}



.qr-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

  gap: 16px;

}



.qr-card {

  background: white;

  border-radius: 14px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.08);

  padding: 20px 10px;

  text-align: center;

  cursor: pointer;

  font-size: 1.4rem;

  transition: all 0.25s ease;

}



.qr-card h3 {

  font-size: 1rem;

  margin-top: 8px;

  color: #1a243a;

}



.qr-card:hover, .qr-card.active {

  background: #e7f0ff;

  box-shadow: 0 6px 18px rgba(79,140,255,0.25);

  transform: translateY(-3px);

}



.phone-preview {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



.phone-frame {

  background: #111;

  border: 8px solid #222;

  border-radius: 36px;

  width: 240px;

  height: 480px;

  padding: 10px;

  position: relative;

  box-shadow: 0 8px 30px rgba(0,0,0,0.4);

}



.phone-preview img {

  width: 100%;

  border-radius: 24px;

  transition: opacity 0.3s ease;

}



.hint {

  font-size: 0.9rem;

  color: #44506b;

  margin-top: 12px;

}



/* ===== PŘECHOD MEZI SEKČEMI ===== */

.section-divider {

  line-height: 0;

  overflow: hidden;

  background: transparent;

  margin-bottom: -5px;

}



.section-divider svg {

  display: block;

  width: 100%;

  height: 120px;

}





/* ===== RESPONSIVE ===== */

@media (max-width: 960px) {

  .intro-container {

    grid-template-columns: 1fr;

    gap: 30px;

    text-align: center;

  }

  .phone-frame {

    width: 200px;

    height: 400px;

  }

}