:root{
  --bg-wide:url("assets/siroke_pozadi.jpg");
  --bg-narrow:url("assets/pozadi.jpg");
  --title:#803030;
  --text:#7a3a31;
  --quote:#307020;
  --green:#a0d050;
  --red:#c03020;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Candara,"Bentham","Calibri","Segoe UI",serif;color:var(--text);}

.bg{
  background-image:var(--bg-wide);
  background-color:#f7f4ea;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  min-height:100%;
}

@media (max-width:900px){.bg{background-image:var(--bg-narrow);background-position:center center;}}

.wrap{max-width:1200px;margin:0 auto;padding:32px 48px 28px;}
@media (max-width:900px){.wrap{padding:22px 18px 22px;background-position:center;}}

.title{margin:0 0 18px;font-size:64px;line-height:1;color:var(--title);font-weight:500;}
@media (max-width:900px){.title{font-size:44px;}}

.quote{margin:0;font-size:30px;line-height:1.25;color:var(--quote);}
@media (max-width:900px){.quote{font-size:22px;}}

.home-top{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start;}
@media (max-width:900px){.home-top{grid-template-columns:1fr;gap:22px;}}

.portrait{margin:0;}
.portrait img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:var(--shadow);}
.home-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;max-width:420px;justify-self:end;}
@media (max-width:900px){.home-right{max-width:340px;justify-self:start;align-items:flex-start;}}

.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:14px;padding:14px 18px;font-size:20px;line-height:1;color:#fff;gap:8px;min-height:54px;}
.btn-red{background:var(--red);}
.btn-green{background:var(--green);color:#7a3a31;}
.btn-omne{padding:14px 34px;text-transform:none;}
.btn-omne{text-decoration:underline;text-underline-offset:4px;}
.btn-red{text-decoration:underline;text-underline-offset:4px;}

.home-actions{margin:24px 0 8px;display:flex;gap:28px;justify-content:flex-start;flex-wrap:wrap;}
@media (max-width:900px){.home-actions{gap:14px;}}

.btn-big{width:210px;flex-direction:column;gap:2px;padding:16px 18px;}
.btn-top{font-size:18px;text-decoration:underline;text-underline-offset:4px;}
.btn-bottom{font-size:22px;text-decoration:underline;text-underline-offset:4px;letter-spacing:.5px;}

.cta{margin:18px 0 20px;font-size:22px;color:var(--text);text-align:left;}
@media (max-width:900px){.cta{font-size:18px;}}

.contact-bar{display:flex;gap:22px;flex-wrap:wrap;align-items:center;}
.contact-bar .btn{min-width:210px;}
@media (max-width:900px){.contact-bar .btn{min-width:0;flex:1 1 220px;}}

.footer{margin-top:26px;text-align:center;color:var(--quote);font-size:18px;}
.footer p{margin:6px 0;}

.page-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;}
@media (max-width:900px){.page-grid{grid-template-columns:1fr;gap:22px;}}

.page-title{margin:0 0 20px;font-size:42px;font-weight:500;}
.content p{margin:10px 0;font-size:22px;line-height:1.35;}
.content h2{margin:22px 0 10px;font-size:22px;font-weight:600;letter-spacing:.3px;}
@media (max-width:900px){.content p{font-size:18px;}.page-title{font-size:34px;}}

.portrait-large{max-width:520px;justify-self:end;}
@media (max-width:900px){.portrait-large{max-width:360px;justify-self:start;}}

.bottom-row{margin-top:26px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.btn-back{padding:14px 28px;border-radius:14px;}

.topbar{background:var(--red);padding:10px 0;position:sticky;top:0;z-index:20;}
.topnav{max-width:1200px;margin:0 auto;padding:0 48px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
@media (max-width:900px){.topnav{padding:0 18px;gap:10px;}}
.topnav a{color:#fff;text-decoration:none;font-size:18px;line-height:1;border-radius:999px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;}
.topnav a:focus-visible{outline:3px solid rgba(255,255,255,.75);outline-offset:2px;}
.topnav a:hover,.topnav a:focus-visible{transform:scale(1.04);}

.btn,.topnav a{transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;}
.btn:hover,.btn:focus-visible{transform:scale(1.03);filter:brightness(1.02);box-shadow:0 12px 26px rgba(0,0,0,.12);}
.btn:focus-visible{outline:3px solid rgba(194,48,32,.25);outline-offset:2px;}

@media (min-width:1600px){.bg{background-position:center center;}}

.content ul{margin:10px 0 14px 22px;padding:0;font-size:22px;line-height:1.35;}
.content li{margin:6px 0;}
.content li::marker{color:var(--quote);}
@media (max-width:900px){.content ul{font-size:18px;}}

.spaced{margin-top:12px;}

.home-right img{width:100%;height:auto;max-width:320px;}
@media (min-width:1200px){.home-right img{max-width:300px;}}
@media (max-width:900px){.home-right img{max-width:280px;}}

ul ul{margin:10px 0 0 18px;}
ul ul li{margin:6px 0;}