/* ===========================================================================
   Osobní web — Vladimír Hanzal
   Vizuální styl převzatý z designového systému (royal blue + lime,
   zaoblené rohy, Poppins + DM Sans). Statický web, žádný build krok.
   =========================================================================== */
:root {
  /* Brand */
  --blue-600:#2b4391; --blue-700:#243878; --blue-800:#1d2d5f; --blue-blob:#494881;
  --lime-400:#cad420; --lime-500:#aeb616;
  /* Neutrals */
  --gray-0:#ffffff; --gray-50:#f6f8fc; --gray-100:#eff2ff; --gray-150:#e6eaf3;
  --gray-200:#d6dbe6; --gray-300:#b8bfce; --gray-400:#8f97a8; --gray-500:#6b7384;
  --gray-600:#525a6b; --gray-700:#3c4252; --gray-900:#161922;
  --surface-section:#eaf2fe;

  --font-display:'Poppins','Segoe UI',system-ui,sans-serif;
  --font-sans:'DM Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-full:999px;
  --shadow-sm:0 2px 6px rgba(22,34,70,.07);
  --shadow-md:0 8px 20px rgba(22,34,70,.08);
  --shadow-lg:0 16px 40px rgba(22,34,70,.12);
  --shadow-button:0 6px 16px rgba(43,67,145,.28);
  --container:1100px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-sans); color:var(--gray-600);
  background:var(--gray-50); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue-600); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- Top navigation -------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:20; background:var(--blue-600);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.nav__inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  letter-spacing:-.02em; color:#fff; white-space:nowrap;
}
.brand__dot{ width:11px; height:11px; border-radius:var(--radius-full); background:var(--lime-400); flex:none; }
.nav__links{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.nav__link{
  font-family:var(--font-sans); font-weight:600; font-size:.95rem;
  color:#c3cdec; padding:8px 14px; border-radius:var(--radius-full);
  transition:color var(--dur,160ms) var(--ease-soft), background var(--dur,160ms) var(--ease-soft);
}
.nav__link:hover{ color:#fff; text-decoration:none; background:rgba(255,255,255,.08); }
.nav__link.is-active{ color:var(--blue-800); background:var(--lime-400); }

/* ---- Hero band ------------------------------------------------------- */
.hero{ position:relative; background:var(--blue-600); overflow:hidden; }
.hero__inner{
  max-width:var(--container); margin:0 auto; padding:54px 24px 96px;
  position:relative; z-index:2;
}
.hero__eyebrow{
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lime-400); margin:0 0 12px;
}
.hero__title{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  color:#fff; line-height:1.05; margin:0;
  font-size:clamp(2rem,5vw,3.25rem);
}
.hero__tagline{
  color:#c3cdec; font-size:1.125rem; max-width:46ch; margin:16px 0 0; line-height:1.6;
}
.blob{ position:absolute; border-radius:50%; background:var(--blue-blob); opacity:.55; filter:blur(.5px); z-index:1; }
.blob--1{ width:320px; height:320px; top:-120px; right:-60px; }
.blob--2{ width:200px; height:200px; bottom:-90px; left:8%; opacity:.4; }
.blob--3{ width:120px; height:120px; top:30px; left:42%; opacity:.3; }

/* ---- Content card ---------------------------------------------------- */
.page{ max-width:var(--container); margin:0 auto; padding:0 24px 80px; }
.card{
  background:var(--gray-0); border:1px solid var(--gray-150);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-md);
  padding:clamp(28px,5vw,64px); margin-top:-56px; position:relative; z-index:3;
}

/* ---- Rendered markdown (the “prose”) --------------------------------- */
.prose{ color:var(--gray-600); font-size:1.0625rem; }
.prose > :first-child{ margin-top:0; }
.prose > :last-child{ margin-bottom:0; }
.prose h1,.prose h2,.prose h3,.prose h4{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  color:var(--blue-700); line-height:1.18; margin:2.2em 0 .6em; text-wrap:balance;
}
.prose h1{ font-size:2.25rem; margin-top:0; }
.prose h2{ font-size:1.6rem; padding-bottom:.3em; border-bottom:2px solid var(--gray-150); }
.prose h3{ font-size:1.3rem; }
.prose h4{ font-size:1.1rem; color:var(--blue-800); }
.prose p{ margin:0 0 1.1em; }
.prose strong{ color:var(--gray-700); font-weight:700; }
.prose a{ color:var(--blue-600); text-decoration:underline; text-decoration-color:var(--gray-200); text-underline-offset:3px; }
.prose a:hover{ text-decoration-color:var(--blue-600); }
.prose ul,.prose ol{ margin:0 0 1.1em; padding-left:1.4em; }
.prose li{ margin:.35em 0; }
.prose li::marker{ color:var(--lime-500); }
.prose ol li::marker{ color:var(--blue-500,#3c53b0); font-weight:700; }

.prose blockquote{
  margin:1.4em 0; padding:14px 22px; border-left:4px solid var(--lime-400);
  background:var(--surface-section); border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--gray-700);
}
.prose blockquote p:last-child{ margin-bottom:0; }

.prose img{ max-width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); display:block; margin:1.4em 0; }
.prose hr{ border:none; border-top:1px solid var(--gray-150); margin:2.4em 0; }

/* inline + block code */
.prose code{
  font-family:var(--font-mono); font-size:.875em;
  background:var(--gray-100); color:var(--blue-700);
  padding:.15em .4em; border-radius:6px;
}
.prose pre{
  background:#1d2d5f; color:#e6eaf3; border-radius:var(--radius-md);
  padding:18px 20px; overflow:auto; margin:1.4em 0; line-height:1.55;
  box-shadow:var(--shadow-sm);
}
.prose pre code{ background:none; color:inherit; padding:0; font-size:.9rem; }

/* tables */
.prose table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.97rem; }
.prose th,.prose td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--gray-150); }
.prose thead th{ background:var(--gray-100); color:var(--blue-700); font-weight:700; border-bottom:2px solid var(--gray-200); }
.prose thead th:first-child{ border-top-left-radius:var(--radius-md); }
.prose thead th:last-child{ border-top-right-radius:var(--radius-md); }
.prose tbody tr:hover{ background:var(--gray-50); }

/* loading / error states */
.state{ padding:40px 0; color:var(--gray-500); }
.state h1{ font-family:var(--font-display); color:var(--blue-700); }

/* ---- Footer ---------------------------------------------------------- */
.footer{ background:var(--surface-section); border-top:1px solid var(--gray-150); }
.footer__inner{
  max-width:var(--container); margin:0 auto; padding:36px 24px;
  display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between;
}
.footer__brand{ font-family:var(--font-display); font-weight:700; color:var(--blue-700); letter-spacing:-.02em; }
.footer__contact{ font-size:.95rem; color:var(--gray-500); }
.footer__contact a{ color:var(--blue-600); font-weight:600; }

@media (max-width:640px){
  .nav__inner{ height:auto; padding:12px 18px; flex-direction:column; align-items:flex-start; gap:10px; }
  .hero__inner{ padding:36px 18px 84px; }
  .page{ padding:0 14px 56px; }
}