:root{
  --bg:#eef4fb;
  --bg-2:#f7faff;
  --surface:#ffffff;
  --surface-2:rgba(255,255,255,.78);
  --text:#0d1b2a;
  --muted:#53657e;
  --line:rgba(13,27,42,.09);
  --blue:#129fe0;
  --blue-dark:#0d3b73;
  --accent:#25d0c5;
  --shadow:0 20px 60px rgba(13,59,115,.12);
  --radius:24px;
  --container:min(1180px, calc(100vw - 40px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(18,159,224,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(37,208,197,.15), transparent 25%),
    linear-gradient(180deg, #f7fbff 0%, #edf4fb 100%);
}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
button{font:inherit}

/* Jemnejšie nadpisy */
h1, h2, h3{
  font-weight:600;
}

.page-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 10%, rgba(18,159,224,.08), transparent 0 20%),
    radial-gradient(circle at 85% 8%, rgba(37,208,197,.08), transparent 0 18%);
  z-index:-1;
}

.container{width:var(--container); margin:0 auto}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(14px);
  background:rgba(247,251,255,.7);
  border-bottom:1px solid rgba(13,27,42,.06);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:82px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:800;
  letter-spacing:-0.03em;
}
.brand img{
  width:42px;
  height:42px;
  border-radius:12px;
  box-shadow:0 8px 18px rgba(13,59,115,.12);
}
.brand span{font-size:1.18rem}
.site-nav{
  display:flex;
  align-items:center;
  gap:8px;
}
.site-nav a{
  padding:11px 14px;
  color:var(--muted);
  border-radius:999px;
  transition:.2s ease;
}
.site-nav a:hover{background:rgba(13,59,115,.06); color:var(--text)}
.site-nav .nav-cta{
  background:var(--blue-dark);
  color:white;
  padding-inline:18px;
}
.site-nav .nav-cta:hover{background:#0a2f5b; color:white}
.nav-toggle{
  display:none;
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  width:48px;
  height:48px;
}

.hero{padding:54px 0 34px}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.eyebrow{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(18,159,224,.1);
  color:var(--blue-dark);
  font-weight:600;
  margin-bottom:16px;
}
.hero h1{
  margin:0;
  max-width:620px;
  font-size:clamp(2.6rem, 6.5vw, 4.2rem);
  line-height:1.16;
  padding-bottom:0.14em;
  overflow:visible;
  letter-spacing:-0.03em;
  font-weight:700;
  background:linear-gradient(
    90deg,
    #0b2545 0%,
    #102a43 28%,
    #129fe0 52%,
    #0b2545 76%,
    #081a2f 100%
  );
  background-size:300% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shine 7s linear infinite;
}
.hero h1 span{display:block}
.hero h1 .accent{
  background:linear-gradient(90deg, #129fe0 0%, #25d0c5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  margin:24px 0 0;
  max-width:640px;
  font-size:1.15rem;
  line-height:1.7;
  color:var(--muted);
}

.hero-actions,
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 20px;
  border-radius:999px;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover{transform:translateY(-1px)}
.button.primary{
  background:linear-gradient(90deg, var(--blue-dark), #1269c2);
  color:white;
  box-shadow:0 16px 32px rgba(13,59,115,.18);
}
.button.ghost{
  background:rgba(255,255,255,.75);
  border:1px solid rgba(13,27,42,.08);
  color:var(--text);
}
.button.ghost.dark{
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  color:white;
}
.mini-points{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.mini-points span{
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(13,27,42,.06);
  padding:9px 14px;
  color:var(--blue-dark);
  font-size:.95rem;
  font-weight:700;
}

.hero-visual{
  position:relative;
  transform:translateY(-10px);
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:-42px;
  background:
    radial-gradient(circle at 30% 35%, rgba(18,159,224,.24), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(37,208,197,.20), transparent 42%);
  filter:blur(42px);
  z-index:-1;
  pointer-events:none;
}
.hero-card{
  position:relative;
  padding:18px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 28px 80px rgba(13,59,115,.18);
  animation:float 6s ease-in-out infinite;
  transition:transform .35s ease, box-shadow .35s ease;
  overflow:hidden;
}
.hero-card::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-35%;
  width:55%;
  height:160%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:rotate(18deg);
  animation:cardShine 7s ease-in-out infinite;
  pointer-events:none;
}
.hero-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 34px 92px rgba(13,59,115,.24);
}
.hero-card img{
  width:100%;
  border-radius:22px;
}

.stats-strip{padding:10px 0 24px}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.stats-grid article,
.step,
.benefit-card,
.screen-card,
.cta-box,
.highlight-wrap{
  background:var(--surface-2);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.stats-grid article{
  padding:22px;
  border-radius:22px;
}
.stats-grid strong{
  display:block;
  font-size:1.02rem;
  margin-bottom:8px;
}
.stats-grid p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.section{padding:74px 0}
.section-alt{
  background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.08));
  border-top:1px solid rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.5);
}
.section-heading{
  max-width:760px;
  margin-bottom:28px;
}
.section-heading h2{
  margin:0 0 12px;
  font-size:clamp(1.95rem, 4vw, 3.15rem);
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:600;
}
.section-heading p{
  margin:0;
  font-size:1.05rem;
  color:var(--muted);
  line-height:1.7;
}

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.step{
  padding:28px;
  border-radius:24px;
}
.step-number{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(18,159,224,.14), rgba(37,208,197,.18));
  color:var(--blue-dark);
  font-weight:800;
  margin-bottom:18px;
}
.step h3,
.benefit-card h3{
  margin:0 0 10px;
  font-size:1.28rem;
  font-weight:600;
  letter-spacing:-0.01em;
}
.step p,
.benefit-card p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.benefit-card{
  padding:28px;
  border-radius:24px;
}

.screen-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr .85fr;
  gap:18px;
  align-items:start;
}
.screen-card{
  padding:16px;
  border-radius:26px;
}
.screen-card img{
  width:100%;
  height:auto;
  border-radius:18px;
  background:#fff;
}
.screen-card figcaption{
  color:var(--muted);
  line-height:1.6;
  font-size:.97rem;
  padding:14px 6px 6px;
}
.screen-card.tall{grid-row:span 2}
.screen-card.wide{grid-column:span 2}

.highlight{padding-top:24px}
.highlight-wrap{
  padding:32px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.faq-list{
  display:grid;
  gap:14px;
  max-width:900px;
}
.faq-list details{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(13,27,42,.08);
  border-radius:22px;
  padding:18px 22px;
  box-shadow:var(--shadow);
}
.faq-list summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  font-size:1.03rem;
  letter-spacing:-0.01em;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.7;
}

.cta-section{padding-top:24px}
.cta-box{
  border-radius:32px;
  padding:34px;
  background:linear-gradient(135deg, #0d3b73 0%, #129fe0 100%);
  color:white;
}
.cta-box .eyebrow{
  background:rgba(255,255,255,.14);
  color:white;
  font-weight:600;
}
.cta-box h2{
  margin:0 0 10px;
  font-size:clamp(1.95rem, 4vw, 2.8rem);
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:600;
}
.cta-box p{
  margin:0;
  color:rgba(255,255,255,.86);
  line-height:1.7;
}

.site-footer{
  padding:32px 0 44px;
  border-top:1px solid rgba(13,27,42,.06);
  margin-top:20px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr auto;
  align-items:start;
  justify-content:space-between;
  gap:24px;
  padding-top:14px;
}

.footer-brand img{
  width:36px;
  height:36px;
}

.footer-text{
  margin:10px 0 0;
  color:var(--muted);
  max-width:420px;
  line-height:1.7;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.footer-links a{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(13,27,42,.07);
  color:var(--blue-dark);
  font-weight:700;
  transition:.2s ease;
}

.footer-links a:hover{
  background:white;
  transform:translateY(-1px);
}

.footer-bottom{
  padding-top:18px;
  margin-top:18px;
  border-top:1px solid rgba(13,27,42,.06);
  color:var(--muted);
  font-size:.95rem;
}

@keyframes shine{
  0%{background-position:0% center}
  100%{background-position:300% center}
}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0)}
}

@keyframes cardShine{
  0%{transform:translateX(0) rotate(18deg); opacity:0}
  10%{opacity:.35}
  40%{transform:translateX(240%) rotate(18deg); opacity:0}
  100%{transform:translateX(240%) rotate(18deg); opacity:0}
}

@media (max-width: 1024px){
  .hero-grid,
  .steps,
  .benefit-grid,
  .stats-grid,
  .screen-grid{
    grid-template-columns:1fr 1fr;
  }

  .hero-grid{
    gap:40px;
  }

  .hero h1{
    max-width:100%;
    font-size:clamp(2.4rem, 6vw, 3.6rem);
  }

  .screen-card.tall,
  .screen-card.wide{grid-row:auto; grid-column:auto}
  .highlight-wrap{flex-direction:column; align-items:flex-start}
}

@media (max-width: 760px){
  .nav-toggle{display:inline-grid; place-items:center}
  .site-nav{
    position:absolute;
    left:20px;
    right:20px;
    top:74px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:12px;
    border-radius:22px;
    background:rgba(255,255,255,.93);
    border:1px solid rgba(13,27,42,.08);
    box-shadow:var(--shadow);
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:14px 16px}
  .hero,
  .section{padding:56px 0}
  .hero-grid,
  .steps,
  .benefit-grid,
  .stats-grid,
  .screen-grid,
  .footer-grid{
    grid-template-columns:1fr;
    display:grid;
  }
  .hero-grid{
    gap:28px;
  }
  .hero h1{
    max-width:100%;
    font-size:clamp(2.2rem, 10.8vw, 3.25rem);
    line-height:1.14;
    padding-bottom:0.14em;
    overflow:visible;
    letter-spacing:-0.025em;
  }
  .lead{font-size:1.03rem}
  .hero-visual{
    transform:none;
  }
  .hero-card{
    padding:12px;
    border-radius:24px;
    animation:none;
  }
  .hero-card::after{
    display:none;
  }
  .cta-box,
  .highlight-wrap{padding:24px}
  .footer-links{
    justify-content:flex-start;
  }
  .footer-bottom{
    padding-top:16px;
    margin-top:16px;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero h1,
  .hero-card{
    animation:none;
  }
  .hero-card::after{
    animation:none;
  }
}

@media (prefers-reduced-motion:no-preference){
  .step, .benefit-card, .screen-card, .stats-grid article{
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .step:hover, .benefit-card:hover, .screen-card:hover, .stats-grid article:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 64px rgba(13,59,115,.16);
  }
}

/* SEO hero title (replaces Fast/Simple/Rewarding) */
.hero-title{
  margin:0;
  font-size:clamp(2.3rem, 5.6vw, 4.0rem);
  line-height:1.14;
  letter-spacing:-0.03em;
  font-weight:600;
}

.hero-subtitle{
  margin:14px 0 0;
  max-width:640px;
  font-size:1.08rem;
  line-height:1.7;
  color:var(--muted);
}