:root{
  --page-bg:#e9e5dd;
  --card-bg:#f3f1ec;
  --text:#141414;
  --muted:#6e6b66;
  --accent:#ef4e23;
  --accent-dark:#d5451f;
  --radius-lg:26px;
  --radius-md:18px;
  --deep:#0c3a35;
  --deep-text:#141414;
  --deep-muted:rgba(20,20,20,.78);
  --deep-muted2:rgba(20,20,20,.62);
  --line:rgba(0,0,0,.08);
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:'Satoshi', sans-serif;
  background:var(--page-bg);
  color:var(--text);
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(1240px, calc(100% - 44px));
  margin:0 auto;
}

.nav{
  margin:18px 0;
  background:rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  padding:14px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:22px;
  font-weight:800;
}

.brand .logo{
  width:28px;
  height:28px;
  background:var(--accent);
  border-radius:8px;
  display:none;
}

.nav-links{
  font-size:16px;
  font-weight:400;
  color:var(--muted);
  max-width:500px;
  margin:0;
  line-height:1.6;
}

.nav-links a{
  cursor:pointer;
  padding:10px 8px;
  border-radius:12px;
}

.nav-links a:hover{
  background:rgba(0,0,0,.04);
}

.btn{
  padding:12px 20px;
  border-radius:999px;
  font-weight:600;
  border:none;
  cursor:pointer;
  font-family:"Inter", sans-serif;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn.primary{
  background:var(--accent);
  color:#fff;
}

.btn.primary:hover{
  background:var(--accent-dark);
}

.hero{
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  overflow:hidden;
}

.hero-left{
  padding:60px 60px 20px 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-title{
  font-size:56px;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0 0 18px;
  max-width:15ch;
}

.hero-desc{
  font-size:17px;
  color:var(--muted);
  max-width:560px;
  margin:0;
  line-height:1.6;
}

.hero-right{
  position:relative;
  padding:14px;
}

.hero-image{
  display:block;
  width:100%;
  height:100%;
  min-height:540px;
  object-fit:cover;
  border-radius:20px;
}

.deep{
  margin-top:30px;
  background:#bfdce4;
  border-radius:var(--radius-lg);
  padding:70px;
  color:var(--deep-text);
}

.deep-title{
  font-size:52px;
  font-weight:400;
  line-height:1.1;
  max-width:820px;
  margin:0 0 20px;
}

.deep-desc{
  max-width:750px;
  color:var(--deep-muted);
  line-height:1.7;
  margin:0 0 60px;
  font-size:17px;
}

.metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.metric-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.metric-num{
  font-size:52px;
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.05;
}

.metric-text{
  color:var(--deep-muted2);
  font-size:14px;
  line-height:1.5;
}

.pricing{
  margin:40px 0;
  padding:50px;
  background:transparent;
}

.pricing-head{
  max-width:980px;
  margin:0 auto 28px;
  text-align:center;
}

.pricing-title{
  margin:0 0 12px;
  font-size:52px;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--text);
}

.pricing-message-text{
  margin:0;
  max-width:none;
  color:var(--text);
  font-size:15px;
  line-height:1.65;
}

.gallery{
  margin:30px 0 46px;
  background:rgba(255,255,255,.35);
  border-radius:var(--radius-lg);
  padding:54px 56px 56px;
  position:relative;
}

.gallery-head{
  text-align:center;
  max-width:720px;
  margin:0 auto 26px;
}

.gallery-title{
  margin:0 0 10px;
  font-size:44px;
  letter-spacing:-0.02em;
  font-weight:500;
  line-height:1.08;
}

.gallery-subtitle{
  margin:0;
  color:rgba(0,0,0,.55);
  font-size:17px;
  line-height:1.6;
}

.gallery-wrapper{
  position:relative;
  margin-top:22px;
}

.gallery-track{
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding:4px 4px 12px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.gallery-track::-webkit-scrollbar{
  display:none;
}

.card{
  flex:0 0 450px;
  scroll-snap-align:start;
  border-radius:18px;
  overflow:hidden;
  background:#ddd;
  aspect-ratio:1 / 1;
  box-shadow:none;
}

.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  font-size:20px;
  font-weight:600;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  z-index:10;
  pointer-events:auto;
  transition:background .2s ease, transform .2s ease;
}

.gallery-arrow:hover{
  background:#f4f4f4;
  transform:translateY(-50%) scale(1.02);
}

.gallery-arrow.left{ left:-24px; }
.gallery-arrow.right{ right:-24px; }

.history{
  margin:30px 0;
  background:transparent;
  color:var(--text);
  padding:72px 0 44px;
}

.history-head{
  max-width:980px;
  margin:0 auto 44px;
  text-align:center;
}

.history-title{
  margin:0 auto 22px;
  max-width:980px;
  font-size:68px;
  line-height:1.08;
  letter-spacing:-0.02em;
  font-weight:500;
}

.history-title-small{
  font-size:0.6em;
}

.history-desc{
  margin:0 auto;
  max-width:920px;
  color:var(--muted);
  font-size:21px;
  line-height:1.55;
}

.history-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  margin-bottom:26px;
}

.history-card{
  min-height:250px;
  background:rgba(12,58,53,.04);
  border-radius:30px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:14px;
}

.history-card-title{
  margin:0;
  font-size:22px;
  line-height:1.2;
  color:var(--text);
  font-weight:500;
}

.history-card-text{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
}

.history-photo{
  min-height:420px;
  border-radius:30px;
  overflow:hidden;
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
    url("https://olomoucky.rej.cz/images/var/olomouc/article-internal/2022/05/internalView/wh3th9aq4g_._01-passingeruv-mlyn-a-hradby-vedle-byvale-dolni-brany-1895.jpeg");
  background-size:cover;
  background-position:center;
}

.footer{
  margin:30px 0 24px;
  background:#050505;
  color:rgba(255,255,255,.92);
  border-radius:30px;
  padding:58px 56px 44px;
}

.footer-top{
  display:block;
  margin-bottom:72px;
}

.footer-subscribe{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:820px;
}

.footer-title{
  margin:0;
  font-size:54px;
  line-height:1.05;
  font-weight:400;
  letter-spacing:-0.04em;
  max-width:760px;
}

.footer-note{
  margin:0;
  max-width:720px;
  color:rgba(255,255,255,.7);
  font-size:16px;
  line-height:1.7;
}

.footer-form{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  margin-top:8px;
}

.footer-input{
  flex:1;
  min-width:0;
  padding:22px 30px;
  border:none;
  outline:none;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.16));
  color:#fff;
  font:400 22px "Inter", sans-serif;
}

.footer-input::placeholder{
  color:rgba(255,255,255,.75);
}

.footer-btn{
  width:72px;
  min-width:72px;
  height:72px;
  padding:0;
  border:none;
  border-radius:999px;
  background:#ff5a19;
  color:#fff;
  font:600 30px "Inter", sans-serif;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.footer-bottom{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:start;
}

.footer-link{
  color:rgba(255,255,255,.7);
  font-size:16px;
  line-height:1.7;
  display:flex;
  flex-direction:column;
}

.footer-copy{
  margin-top:84px;
  color:rgba(255,255,255,.76);
  font-size:14px;
}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .gallery{padding:42px 28px}
  .gallery-title{font-size:34px}
  .pricing-title{font-size:34px}
  .history{padding:52px 0 24px}
  .history-title{font-size:46px}
  .history-desc{font-size:18px}
  .history-grid{grid-template-columns:1fr}
  .history-photo{min-height:320px}
  .card{flex-basis:78vw}
  .footer-title{font-size:42px; max-width:100%}
  .gallery-arrow.left{left:-10px}
  .gallery-arrow.right{right:-10px}
}

@media(max-width:600px){
  .container{width:min(1240px, calc(100% - 28px))}
  .nav{flex-wrap:wrap; justify-content:center}
  .nav-links{order:3; flex-wrap:wrap; gap:10px 16px}
  .hero-left{padding:30px}
  .deep{padding:40px}
  .metrics{grid-template-columns:1fr}
  .history{padding:38px 0 18px}
  .history-head{margin-bottom:28px}
  .history-title{font-size:34px}
  .history-desc{font-size:16px}
  .history-card{min-height:220px; border-radius:24px; padding:22px}
  .history-card-title{font-size:20px}
  .history-card-text{font-size:15px}
  .history-photo{min-height:260px; border-radius:24px}
  .footer{padding:34px 24px 28px; border-radius:24px}
  .footer-title{font-size:44px; max-width:220px}
  .footer-note{font-size:15px}
  .footer-form{flex-direction:column; align-items:stretch}
  .footer-input{width:100%; min-width:0; font-size:18px; padding:18px 24px}
  .footer-btn{width:100%; height:56px; font-size:24px; padding:0}
  .footer-bottom{grid-template-columns:1fr; gap:18px}
  .footer-copy{margin-top:42px}
}