:root {
  --bg: #0b0c0e;
  --bg-elev: #121418;
  --text: #e8eaed;
  --muted: #aab0b6;
  --accent: #FFD10A;
  --accent-2: #ff7a00;
  --btn-primary-text: #0b0c0e;
  --btn-primary-border: #FFD10A;
  --card: #121418;
  --card-border: #262a33;
  --link: #FFD10A;        /* barva odkazu */
  --link-hover: #FFB360;  /* barva při hoveru/focusu */
  --radius: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:50;background:rgba(11,12,14,.7);backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--card-border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);opacity:1;text-decoration:none;font-weight:600}
.nav a:hover{text-decoration:underline}
.nav .cta{background:var(--accent);color:#0b0c0e;padding:10px 14px;border-radius:12px}

.nav-toggle{display:none}
.mobile-nav{display:none}
.mobile-nav.open{display:block}
@media (max-width:900px){
  .nav{display:none}
  .nav-toggle{display:block;background:transparent;border:1px solid var(--card-border);color:var(--text);border-radius:10px;padding:8px 12px}
  .mobile-nav{position:fixed;inset:56px 10px auto 10px;background:var(--bg-elev);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow);padding:16px}
  .mobile-nav a{display:block;color:var(--text);text-decoration:none;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
  .mobile-nav a:last-child{border-bottom:none}
}

.hero{padding:72px 0 40px;border-bottom:1px solid var(--card-border);background:
 radial-gradient(1000px 600px at 10% -10%, rgba(255, 209, 10, .14), transparent 60%),
 radial-gradient(800px 500px at 90% 10%, rgba(255, 122, 0, .10), transparent 60%);}
.hero h1{font-size:clamp(2rem, 4.5vw, 3rem);line-height:1.15;margin:0 0 12px;font-weight:800}
.hero p.lead{font-size:clamp(1.05rem, 2.3vw, 1.25rem);opacity:.9;margin:0 0 22px}

.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3, 1fr)}
.grid.cols-2{grid-template-columns:repeat(2, 1fr)}
@media (max-width:900px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.card p{margin:0 0 12px;color:var(--muted)}
.card .actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:#1f2937;padding:10px 14px;border-radius:12px;border:1px solid var(--card-border);color:var(--text);font-weight:700}
.btn.primary{background:var(--accent);color:var(--card);border-color:rgba(0,0,0,.08)}
a.btn.primary,
a.btn.primary:link,
a.btn.primary:visited {
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
}

.section{padding:48px 0;border-bottom:1px solid var(--card-border)}
.section h2{font-size:1.6rem;margin:0 0 14px}
.section .lead{color:var(--muted);margin-top:-4px}

.feature{display:flex;gap:18px;align-items:flex-start}
.feature-icon{width:40px;height:40px;background:rgba(255,255,255,.06);border:1px solid var(--card-border);border-radius:12px;display:inline-flex;align-items:center;justify-content:center}

.prose a:link,
.prose a:visited { color: var(--link); }
.prose a:hover,
.prose a:focus { color: var(--link-hover); text-decoration: underline; }
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px 22px}
.prose ol{margin:0 0 12px 22px}
blockquote.note{margin:0;padding:14px 16px;border:1px dashed var(--card-border);border-radius:12px;background:rgba(255,209,10,.06)}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid var(--card-border)}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}.gallery img{height:160px}}

.footer{padding:24px 0;background:linear-gradient(to bottom, transparent, rgba(0,0,0,.3))}
.footer small{color:var(--muted)}
.footer a { color: var(--link); }
.footer a:hover { color: var(--link-hover); }

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:10px;top:10px;width:auto;height:auto;z-index:999;background:#fff;color:#000;padding:8px 12px;border-radius:8px}

input, textarea{width:100%;padding:12px 14px;border-radius:12px;background:#0e1014;border:1px solid var(--card-border);color:var(--text);font:inherit}
label{display:block;margin:10px 0 6px}
form .row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:800px){form .row{grid-template-columns:1fr}}
.alert{padding:12px;border-radius:12px;margin:10px 0}
.alert.success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3)}
.alert.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3)}





/* Výchozí stav: při startu je stránka lehce rozostřená a zeslabená */
html.fx-boot .header,
html.fx-boot #main,
html.fx-boot .footer{
  filter: blur(10px);
  opacity: 0.85;
  transform: translateY(2px);
}

/* Cílový stav: ostré, 1s přechod */
html.fx-ready .header,
html.fx-ready #main,
html.fx-ready .footer{
  filter: blur(0);
  opacity: 1;
  transform: none;
  transition: filter 1s ease, opacity 1s ease, transform 1s ease;
}

/* Respektuj nastavení uživatele – omezit pohyb */
@media (prefers-reduced-motion: reduce){
  html.fx-boot .header,
  html.fx-boot #main,
  html.fx-boot .footer{
    filter: none;
    opacity: 1;
    transform: none;
  }
  html.fx-ready .header,
  html.fx-ready #main,
  html.fx-ready .footer{
    transition: none;
  }
}

/* (Volitelné) na slabších mobilech raději jen fade-in místo bluru */
@media (max-width: 640px){
  html.fx-boot .header,
  html.fx-boot #main,
  html.fx-boot .footer{ filter: none; opacity: 0; }
  html.fx-ready .header,
  html.fx-ready #main,
  html.fx-ready .footer{ transition: opacity 0.6s ease; }
}