/* Project: Vyhlídkové lety (Bootstrap one-pager)
   Notes:
   - Uses Bootstrap 5 CDN
   - Keep custom CSS light: branding + hero + a few components
*/

:root {
  --brand: #0d6efd; /* Bootstrap primary */
  --ink: #0b1320;
}

html { scroll-padding-top: 84px; }

body {
  color: var(--ink);
  background: #fff;
}

.nav-spacer { height: 72px; }

.brand-mark{
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--brand);
  display: inline-block;
  box-shadow: 0 8px 20px rgba(13,110,253,.25);
}

.hero{
  background:
    radial-gradient(1000px 500px at 0% 0%, rgba(13,110,253,.12), transparent 60%),
    radial-gradient(800px 400px at 100% 20%, rgba(13,110,253,.08), transparent 55%);
}

.hero-media img{
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.glass{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.65);
}

.feature:hover, .pricing:hover, .step:hover{
  transform: translateY(-2px);
  transition: transform .15s ease;
}

.pricing ul { padding-left: 1rem; }

.popular-badge{
  position: absolute;
  top: 14px;
  right: 14px;
  padding: .45rem .65rem;
}

.step-icon{
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(13,110,253,.12);
  color: var(--brand);
  font-size: 1.25rem;
}

.trust-badge{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: .6rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: #1b2a41;
}

.trust-badge i { color: var(--brand); }

.stars i { color: #f6c343; }

.gift-visual{
  background:
    radial-gradient(800px 400px at 30% 30%, rgba(13,110,253,.14), transparent 60%),
    linear-gradient(135deg, rgba(13,110,253,.06), rgba(13,110,253,.02));
  min-height: 320px;
}

.voucher{
  width: min(420px, 95%);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.voucher-top{
  padding: 1rem 1.1rem;
  background: rgba(13,110,253,.08);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.voucher-body{
  padding: 1.1rem;
}

.voucher-footer{
  padding: .85rem 1.1rem;
  border-top: 1px solid rgba(0,0,0,.06);
}

.final-cta{
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(13,110,253,.35), transparent 55%),
    linear-gradient(180deg, #0b5ed7, #0a58ca);
}

.cta-panel{
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.18);
}

@media (max-width: 991.98px){
  .hero-media img{ height: 280px; }
  .nav-spacer{ height: 64px; }
}