@import url("fonts.css");

:root {
  --ink: #0a1c30;
  --accent: #1a4fd6;
  --text: #0a1c30;
  --muted: #34475d;
  --label: #4b5d73;
  --line: #d5dce5;
  --tint: #eef2f7;
  --on-ink: #c8d3e2;
  --line-ink: #35485f;
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--text); background: #fff; }
h1, h2, h3, p, blockquote { margin: 0; }
a { color: inherit; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid #7fa5ff; outline-offset: 3px; }
img { max-width: 100%; }

.wrap { max-width: 1280px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.serif { font-family: var(--serif); }
.label { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; color: var(--ink); padding: 12px 16px; z-index: 10; }

/* Hlavička a úvod */
.dark { background: var(--ink); color: #fff; }
.dark a:hover { color: #a9c3ff; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding-top: 28px; padding-bottom: 28px; }
.logo { display: flex; padding: 8px 0; }
.logo img { width: 139px; height: 42px; display: block; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 36px; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; }
.nav a { text-decoration: none; padding: 12px 0; }

.hero { display: flex; flex-direction: column; gap: 36px; padding-top: 120px; }
.hero h1 { max-width: 1000px; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6.6vw, 96px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.hero .lead { max-width: 620px; font-size: 21px; line-height: 1.5; color: var(--on-ink); }
.cta-link { align-self: flex-start; text-decoration: none; font-weight: 600; padding: 14px 0; border-bottom: 2px solid var(--accent); }

.figures { margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--line-ink); }
.figure { padding: 32px 32px 48px 0; display: flex; flex-direction: column; gap: 8px; }
.figure strong { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1; }
.figure span { font-size: 15px; color: var(--on-ink); }

/* Sekce */
.section { padding-top: 112px; padding-bottom: 112px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; margin-bottom: 40px; }

.products { display: flex; flex-wrap: wrap; gap: 32px; }
.product { flex: 1 1 440px; min-width: 0; min-height: 420px; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; text-decoration: none; transition: transform .2s ease; }
.product:hover { transform: translateY(-4px); }
.product-body { display: flex; flex-direction: column; gap: 16px; }
.product-title { font-family: var(--serif); font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; }
.product-text { max-width: 460px; }
.product-link { font-weight: 600; padding-top: 8px; }
.product--primary { background: var(--accent); color: #fff; }
.product--primary:hover { color: #fff; }
.product--primary .label { color: #fff; }
.product--primary .product-text { color: #e6edff; }
.product--light { background: var(--tint); color: var(--text); }
.product--light:hover { color: var(--text); }
.product--light .product-text { color: var(--muted); }

.bordered { border-top: 1px solid var(--line); }
.split { display: flex; flex-wrap: wrap; gap: 56px 80px; }
.split-side { flex: 1 1 280px; display: flex; flex-direction: column; gap: 16px; }
.split-main { flex: 2 1 560px; min-width: 0; }
.service { display: flex; flex-wrap: wrap; gap: 16px 40px; padding: 40px 0; border-top: 1px solid var(--line); }
.service:first-child { padding-top: 0; border-top: 0; }
.service:last-child { padding-bottom: 0; }
.service h3 { flex: 1 1 220px; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.15; }
.service div { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; color: var(--muted); }
.service .small { font-size: 15px; }

.tinted { background: var(--tint); }
.quote { max-width: 1040px; margin-bottom: 64px; font-family: var(--serif); font-size: clamp(28px, 3.6vw, 52px); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 56px; }
.principle { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--ink); padding-top: 20px; }
.principle h3 { font-size: 18px; font-weight: 600; }
.principle p { font-size: 16px; color: var(--muted); }

.clients { padding-top: 96px; padding-bottom: 96px; display: flex; flex-wrap: wrap; gap: 24px 80px; }
.clients .label { flex: 1 1 280px; }
.clients p { flex: 2 1 560px; min-width: 0; font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.6; }

/* Kontakt a patička */
.contact { padding-top: 112px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 72px; }
.contact-top { display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: flex-end; }
.contact-top h2 { flex: 2 1 480px; min-width: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 72px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.contact-main { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; font-size: 18px; }
.contact-main a { padding: 6px 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 56px; padding-top: 32px; border-top: 1px solid var(--line-ink); font-size: 15px; color: var(--on-ink); }
.footer-grid div { display: flex; flex-direction: column; gap: 2px; }
.footer-grid strong { color: #fff; font-weight: 600; }
.footer-grid a { padding: 4px 0; }

/* Textová podstránka */
.page-title { padding-top: 72px; padding-bottom: 72px; }
.page-title h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; }
.prose { max-width: 760px; padding-top: 72px; padding-bottom: 96px; }
.prose h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.2; margin: 48px 0 16px; }
.prose p, .prose ul { margin: 0 0 16px; color: var(--muted); }
.prose ul { padding-left: 22px; }
.prose a { color: var(--accent); }
.simple-footer { padding-top: 32px; padding-bottom: 40px; font-size: 15px; color: var(--on-ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }

@media (max-width: 720px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .site-header { padding-top: 20px; padding-bottom: 12px; }
  .nav { gap: 0 22px; }
  .hero { padding-top: 56px; gap: 28px; }
  .hero .lead { font-size: 19px; }
  .figures { margin-top: 48px; }
  .figure { padding: 24px 0; border-bottom: 1px solid var(--line-ink); }
  .figure:last-child { border-bottom: 0; padding-bottom: 40px; }
  .figure strong { font-size: 44px; }
  .section { padding-top: 72px; padding-bottom: 72px; }
  .product { padding: 32px 24px; min-height: 340px; }
  .quote { margin-bottom: 48px; }
  .clients { padding-top: 64px; padding-bottom: 64px; }
  .contact { padding-top: 72px; gap: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .product { transition: none; }
  .product:hover { transform: none; }
}

sup.reg{font-size:.6em;line-height:0;vertical-align:.55em;font-weight:400;letter-spacing:0;margin-left:.04em}