
:root{
  --cream:#F4F0EA;
  --cream-2:#eae4d6;
  --ink:#2a2a25;
  --ink-soft:#5c5a52;
  --bez:#b5a485;
  --bez-soft:#d8cfbc;
  --navy:#16365f;
  --navy-dark:#12263f;
  --navy-deep:#0d1d31;
  --line:rgba(42,42,37,.14);
  --line-light:rgba(244,240,234,.22);
  --hdr-h:76px;
  --r:14px;
  --r-lg:22px;
  --wrap:1180px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:500;
  line-height:1.16;
  letter-spacing:-.01em;
  margin:0;
}

h1{font-size:clamp(2.1rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:16px}
h3{font-size:1.16rem;line-height:1.35}

p{margin:0 0 16px}
p:last-child{margin-bottom:0}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:22px;
}

.sr-only,.skip{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.skip:focus{
  position:fixed;
  top:12px;right:12px;
  width:auto;height:auto;
  clip:auto;margin:0;
  padding:10px 16px;
  background:var(--navy);
  color:var(--cream);
  border-radius:10px;
  z-index:200;
}

/* ---------- hlavička ---------- */

.hdr{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(244,240,234,.94);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line);
}

.nav-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

.hdr-bar{
  height:var(--hdr-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.15;
  color:var(--ink);
  text-decoration:none;
  flex:0 0 auto;
}
.brand:hover{text-decoration:none}
.brand-name{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.2rem;
  letter-spacing:.005em;
}
.brand-sub{
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bez);
  margin-top:2px;
}

.burger{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border:1px solid var(--line);
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
}
.burger-box{position:relative;display:block;width:20px;height:12px}
.burger-line,
.burger-box::before,
.burger-box::after{
  position:absolute;
  right:0;
  width:20px;height:1.5px;
  background:var(--ink);
  content:'';
}
.burger-box::before{top:0}
.burger-line{top:5px}
.burger-box::after{bottom:0}

.nav{
  display:none;
  position:absolute;
  top:var(--hdr-h);
  right:0;
  right:0;
  flex-direction:column;
  gap:2px;
  padding:14px 22px 22px;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.nav-check:checked ~ .hdr-bar .nav{display:flex}

.nav a{
  color:var(--ink);
  font-size:0.95rem;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.nav a:last-child{border-bottom:0}
.nav a:hover{color:var(--navy);text-decoration:none}

/* ---------- tlačidlá ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.01em;
  border-radius:999px;
  text-decoration:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{text-decoration:none}

.hdr .btn-sm{
  padding:11px 22px;
  background:var(--navy);
  color:var(--cream);
  border:1px solid var(--navy);
  border-bottom:1px solid var(--navy);
  margin-top:12px;
  line-height:1.2;
}
.hdr .btn-sm:hover{background:var(--navy-dark);border-color:var(--navy-dark);color:var(--cream)}

.btn-solid{
  padding:15px 32px;
  background:var(--cream);
  color:var(--navy-dark);
  border:1px solid var(--cream);
}
.btn-solid:hover{background:var(--bez-soft);border-color:var(--bez-soft);color:var(--navy-dark)}

.btn-ghost{
  padding:15px 32px;
  background:transparent;
  color:var(--cream);
  border:1px solid var(--line-light);
}
.btn-ghost:hover{border-color:var(--cream);background:rgba(244,240,234,.08);color:var(--cream)}

/* ---------- hero ---------- */

.hero{
  position:relative;
  isolation:isolate;
  background-color:var(--navy-dark);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--noise);
  background-size:200px 200px;
  opacity:.13;
  z-index:-2;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-color:rgba(13,29,49,.42);
  z-index:-1;
}

.hero-inner{
  position:relative;
  text-align:center;
  padding-block:clamp(68px,12vw,132px);
  max-width:880px;
}

.hero h1{color:var(--cream);margin-bottom:14px}

.tagline{
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-size:clamp(1.1rem,2.2vw,1.5rem);
  color:var(--bez-soft);
  margin-bottom:20px;
}

.hero-lead{
  color:rgba(244,240,234,.82);
  font-size:1.03rem;
  max-width:620px;
  margin-inline:auto;
  margin-bottom:34px;
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-bottom:0;
}

.eyebrow{
  font-size:1rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bez);
  margin-bottom:14px;
  font-weight:500;
}
.eyebrow.light{color:var(--bez-soft)}

/* ---------- pás s údajmi ---------- */

.strip{
  background:var(--cream-2);
  border-bottom:1px solid var(--line);
}
.strip-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  padding-block:40px;
}
.strip-k{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bez);
  margin-bottom:8px;
}
.strip-v{
  font-size:.94rem;
  line-height:1.6;
  color:var(--ink);
  margin:0;
}

/* ---------- sekcie ---------- */

.sec{
  padding-block:clamp(56px,7vw,96px);
  scroll-margin-top:calc(var(--hdr-h) + 16px);
}
.sec-alt{background:var(--cream-2)}

.sec-dark{
  position:relative;
  background-color:var(--navy-dark);
  color:rgba(244,240,234,.86);
  isolation:isolate;
}
.sec-dark::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--noise);
  background-size:200px 200px;
  opacity:.1;
  z-index:-1;
}
.h2-light{color:var(--cream)}

.lead{
  font-size:1.05rem;
  max-width:70ch;
  color:var(--ink-soft);
  margin-bottom:20px;
}
.sec-dark .lead{color:rgba(244,240,234,.78)}

.note{
  max-width:70ch;
  padding-right:18px;
  border-right:2px solid var(--bez);
  color:var(--ink-soft);
  font-size:.97rem;
}

.fineprint{
  font-size:.85rem;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:74ch;
  margin-top:18px;
}
.fineprint-light{
  font-size:.85rem;
  line-height:1.65;
  color:rgba(244,240,234,.6);
}

.mt{margin-top:14px}
.mt-lg{margin-top:34px}

/* ---------- karty ---------- */

.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:38px;
}
.card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 24px;
}
.sec-alt .card{background:var(--cream)}
.card h3{margin-bottom:10px}
.card p{
  font-size:1rem;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- dvojstĺpec ---------- */

.split{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  margin-top:44px;
}
.split-col p{font-size:.97rem;color:var(--ink-soft)}

.h-rule{
  padding-bottom:12px;
  margin-bottom:16px;
  border-bottom:1px solid var(--bez-soft);
}
.h-rule.mt-lg{margin-top:34px}
.split-col .h-rule:not(:first-child){margin-top:34px}

.h-rule-light{
  color:var(--cream);
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line-light);
}
.kontakt-col .h-rule-light:not(:first-child){margin-top:34px}

.list{
  list-style:none;
  margin:0;
  padding:0;
}
.list li{
  position:relative;
  padding-right:22px;
  margin-bottom:11px;
  font-size:.97rem;
  color:var(--ink-soft);
}
.list li::before{
  content:'';
  position:absolute;
  right:0;top:11px;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--bez);
}
.list li strong{color:var(--ink);font-weight:600}
.list-light li{color:rgba(244,240,234,.78)}
.list-light li::before{background:var(--bez-soft)}

.quotebox{
  margin-top:46px;
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px 26px;
}
.sec-alt .quotebox{background:var(--cream)}
.quotebox h3{margin-bottom:12px}
.quotebox p{
  font-size:.92rem;
  color:var(--ink-soft);
  max-width:80ch;
  margin:0;
}

/* ---------- kroky ---------- */

.steps{
  list-style:none;
  margin:38px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  counter-reset:s;
}
.steps li{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 24px;
}
.step-n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--navy);
  color:var(--cream);
  font-size:.86rem;
  font-weight:600;
  margin-bottom:16px;
}
.steps h3{margin-bottom:10px}
.steps p{
  font-size:.94rem;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- cenník ---------- */

.pricing{
  width:100%;
  margin-top:34px;
  border-collapse:collapse;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.pricing th,
.pricing td{
  text-align:right;
  vertical-align:top;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  font-size:.96rem;
}
.pricing tr:last-child th,
.pricing tr:last-child td{border-bottom:0}
.pricing th{
  font-weight:500;
  color:var(--ink);
  width:46%;
}
.pricing td{color:var(--ink-soft)}

.pills{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
}
.pills li{
  border:1px solid var(--bez-soft);
  border-radius:999px;
  padding:8px 18px;
  font-size:.88rem;
  color:var(--ink-soft);
  background:var(--cream);
}

/* ---------- vlajky ---------- */

.flags{
  list-style:none;
  margin:38px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.flags li{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:11px 14px;
  font-size:.9rem;
}
.flags img{
  flex:0 0 auto;
  width:26px;height:auto;
  border:1px solid var(--line);
  border-radius:3px;
}

/* ---------- linky ---------- */

.links{
  list-style:none;
  margin:32px 0 0;
  padding:0;
  max-width:720px;
  border-top:1px solid var(--line);
}
.links a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:18px 4px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:1rem;
}
.links a:hover{color:var(--navy);text-decoration:none}
.links-meta{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bez);
  flex:0 0 auto;
}

/* ---------- kontakt ---------- */

.kontakt-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:38px;
  margin-top:38px;
}
.big{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.5rem;
  margin-bottom:8px;
  word-break:break-word;
}
.big a{color:var(--cream)}
.big a:hover{color:var(--bez-soft)}
.fineprint-light a{color:var(--bez-soft)}
.addr{
  font-size:1rem;
  line-height:1.8;
  color:rgba(244,240,234,.86);
}

/* ---------- pätička ---------- */

.ftr{
  background:var(--navy-deep);
  color:rgba(244,240,234,.68);
  padding-block:52px 28px;
  font-size:.88rem;
}
.ftr-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line-light);
}
.ftr-name{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.2rem;
  color:var(--cream);
  margin-bottom:8px;
}
.ftr-sub{margin:0 0 4px;line-height:1.6}
.ftr-links{
  display:flex;
  flex-wrap:wrap;
  gap:5px 22px;
  align-content:flex-start;
}
.ftr-links a{color:rgba(244,240,234,.78)}
.ftr-links a:hover{color:var(--cream)}
.ftr-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
  padding-top:22px;
  font-size:.8rem;
  color:rgba(244,240,234,.5);
}
.ftr-bottom p{margin:0}
.ftr-bottom a{color:rgba(244,240,234,.72)}

/* ---------- media queries ---------- */

@media (min-width:600px){
  .strip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 34px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .flags{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr-inner{grid-template-columns:1.4fr 1fr}
}

@media (min-width:860px){
  .wrap{padding-inline:34px}
  .split{grid-template-columns:repeat(2,minmax(0,1fr));gap:54px}
  .kontakt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:54px}
  .flags{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card{padding:30px 28px}
  .steps li{padding:32px 28px}
  .quotebox{padding:36px 34px}
}

@media (min-width:1040px){
  .burger{display:none}
  .nav{
    display:flex;
    position:static;
    flex-direction:row;
    align-items:center;
    gap:24px;
    padding:0;
    background:transparent;
    border-bottom:0;
  }
  .nav a{
    padding:0;
    border-bottom:0;
    font-size:.88rem;
  }
  .hdr .btn-sm{margin-top:0;padding:11px 22px}
  .strip-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:46px}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .flags{grid-template-columns:repeat(6,minmax(0,1fr))}
}

@media (min-width:1240px){
  .wrap{padding-inline:20px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

html{scroll-behavior:smooth}