:root{
    --bg:#ffffff; --surface:#f5f7fb; --text:#0b1220; --muted:#5b6b83;
    --brand:#2a6cff; --brand-ink:#0b3dcc; --ok:#12805c;
    --radius:14px; --shadow:0 6px 24px rgba(2,15,46,.08);
    --shadow-strong:0 14px 42px rgba(2,15,46,.12); --maxw:1180px;
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#0c111b; --surface:#121a27; --text:#e8eefc; --muted:#9bb0cf; --brand:#5b8cff; --brand-ink:#2a6cff;
      --shadow:0 6px 24px rgba(0,0,0,.5); --shadow-strong:0 14px 42px rgba(0,0,0,.65); }
  }
  *{box-sizing:border-box} html,body{height:100%}
  body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
    background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased}
  a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}
  .container{max-width:var(--maxw); margin-inline:auto; padding:0 20px}
  header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(8px);
    background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom:1px solid #dbe5ff22}
  .nav{display:flex; align-items:center; justify-content:space-between; height:68px}
  .logo{display:flex; align-items:center; gap:.6rem; font-weight:800}
  .logo svg{width:22px;height:22px}
  nav ul{display:flex; gap:1.2rem; list-style:none; margin:0;padding:0}
  nav a{color:var(--muted); font-weight:600}
       .btn{display:inline-flex; gap:.5rem; align-items:center; justify-content:center; padding:.6rem .8rem;
     border-radius:8px; font-weight:600; background:var(--brand); color:#fff; border:1px solid transparent; box-shadow:var(--shadow); font-size:0.9rem}
   .btn:hover{background:var(--brand-ink); text-decoration:none; box-shadow:var(--shadow-strong); transform:translateY(-1px)}
       .btn.ghost{background:transparent; color:var(--text); border:1px solid #dbe5ff55}
   .btn.btn-primary{background:var(--brand); color:#fff; border:1px solid var(--brand); box-shadow:0 4px 12px rgba(42,108,255,0.3)}
   .btn.btn-primary:hover{background:var(--brand-ink); border-color:var(--brand-ink); box-shadow:0 6px 20px rgba(42,108,255,0.4); transform:translateY(-2px)}
   .btn.btn-secondary{background:transparent; color:var(--brand); border:2px solid var(--brand); font-weight:600}
   .btn.btn-secondary:hover{background:var(--brand); color:#fff; box-shadow:0 4px 12px rgba(42,108,255,0.3); transform:translateY(-2px)}
   .nav-buttons{display:flex; gap:8px; align-items:center}
   .badge{display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.8rem; font-weight:800; background:#eaf1ff; color:#1b4fe0}
  @media (prefers-color-scheme:dark){ .badge{background:#1b2a49; color:#cfe0ff} }

  /* Sections */
  .hero{padding:64px 0 24px}
  .grid-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start}
       .hero-left{display:flex; flex-direction:column; gap:24px; justify-content:space-between; height:100%}
  .hero-text{margin-bottom:0}
  .hero-right{display:flex; flex-direction:column; gap:24px}
  .mock{background:var(--surface); border-radius:20px; padding:14px; border:1px solid #dbe5ff33; box-shadow:var(--shadow)}
  .mock img{width:100%; height:auto; border-radius:14px; display:block}
  .features-inline{margin-top:0}
       h1{font-size:clamp(2rem,3.8vw,3rem); line-height:1.15; margin:.3rem 0 .8rem}
   .lead{font-size:1.125rem; color:var(--muted); margin:0 0 1rem}
  .cta{display:flex; gap:.7rem; flex-wrap:wrap}
  .features, .how, .pricing, .screens, .audiences, .security, .testi, .faq{padding:32px 0}
  h2{font-size:clamp(1.4rem,2.6vw,2rem); margin:0 0 10px}

  .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
       .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
                                     .card{background:var(--surface); border:1px solid #dbe5ff33; border-radius:16px; padding:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:160px}
    .card h3{margin:.3rem 0 .2rem; font-size:1rem; margin-top:auto}
    .card p{margin:0; color:var(--muted); font-size:.95rem}
  .card-with-icon{display:flex; align-items:center; gap:12px}
  .card-with-icon img{width:20%; height:auto; border-radius:8px; flex-shrink:0}

  /* Pricing */
  .plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .plan{background:var(--surface); border:1px solid #dbe5ff55; border-radius:16px; padding:22px; display:flex; flex-direction:column; box-shadow:var(--shadow)}
  .plan .price{font-size:2rem; font-weight:800}
  .plan ul{list-style:none; padding:0; margin:12px 0 0; color:var(--muted)}
  .plan ul li{padding:.35rem 0}
  .plan .cta-wrap{margin-top:auto; padding-top:14px}
  .plan.pop{border:2px solid var(--brand); position:relative}
  .plan.pop:before{content:"Nejoblíbenější"; position:absolute; top:-12px; right:18px; background:var(--brand); color:#fff; padding:.25rem .6rem; border-radius:999px; font-size:.8rem; font-weight:800}

  /* Shots */
  .shot{text-align:center}
  .shot img{width:100%; border-radius:12px; border:1px solid #dbe5ff55}
  .shot h4{margin:.6rem 0 .15rem}
  .shot p{margin:0; color:var(--muted); font-size:.95rem}

  /* Footer */
  footer{margin-top:32px; padding:28px 0 44px; background:var(--surface); border-top:1px solid #dbe5ff33}
  .foot{display:grid; grid-template-columns:1.2fr .8fr .8fr .8fr; gap:18px}
  .legal{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted)}

       /* Responsive */
   @media (max-width:980px){
     .grid-hero{grid-template-columns:1fr}
     .hero-left{gap:24px}
     .hero-right{gap:32px}
     .grid-4, .grid-3, .grid-2, .plans, .foot{grid-template-columns:1fr}
     .nav-buttons{flex-direction:column; gap:8px; width:100%}
     .nav-buttons .btn{width:100%; justify-content:center}
   }
  :focus-visible{outline:none; box-shadow:0 0 0 .12rem rgba(42,108,255,.35)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
   
   /* Modal styles */
   .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(4px);
     z-index: 1000;
     display: none;
     align-items: center;
     justify-content: center;
   }
   
   .modal {
     background: var(--bg);
     border-radius: 20px;
     padding: 32px;
     max-width: 400px;
     width: 90%;
     box-shadow: var(--shadow-strong);
     border: 1px solid #dbe5ff33;
     position: relative;
     transform: scale(0.9);
     opacity: 0;
     transition: all 0.3s ease;
   }
   
   .modal.active {
     transform: scale(1);
     opacity: 1;
   }
   
   .modal-close {
     position: absolute;
     top: 16px;
     right: 16px;
     background: none;
     border: none;
     font-size: 24px;
     cursor: pointer;
     color: var(--muted);
     width: 32px;
     height: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s ease;
   }
   
   .modal-close:hover {
     background: var(--surface);
     color: var(--text);
   }
   
   .modal h2 {
     margin: 0 0 24px 0;
     text-align: center;
     font-size: 1.5rem;
   }
   
   .form-group {
     margin-bottom: 20px;
   }
   
   .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 600;
     color: var(--text);
   }
   
   .form-group input {
     width: 100%;
     padding: 12px 16px;
     border: 1px solid #dbe5ff55;
     border-radius: 12px;
     background: var(--surface);
     color: var(--text);
     font-size: 16px;
     transition: all 0.2s ease;
   }
   
   .form-group input:focus {
     outline: none;
     border-color: var(--brand);
     box-shadow: 0 0 0 3px rgba(42, 108, 255, 0.1);
   }
   
   .form-submit {
     width: 100%;
     margin-top: 8px;
   }
   
   .form-footer {
     text-align: center;
     margin-top: 20px;
     color: var(--muted);
     font-size: 0.9rem;
   }
   
   .form-footer a {
     color: var(--brand);
     text-decoration: none;
   }
   
   .form-footer a:hover {
     text-decoration: underline;
   }