{"id":44,"date":"2026-07-23T08:57:05","date_gmt":"2026-07-23T08:57:05","guid":{"rendered":"https:\/\/www.suomenkompassi.fi\/?page_id=44"},"modified":"2026-10-04T06:08:06","modified_gmt":"2026-10-04T06:08:06","slug":"markkinointi","status":"publish","type":"page","link":"https:\/\/www.suomenkompassi.fi\/index.php\/markkinointi\/","title":{"rendered":"Verkkosivut ja digitaaliset palvelut"},"content":{"rendered":"\n<style>\n\/* =========================================================\n   SUOMEN KOMPASSI OY\n   VERKKOSIVUT JA DIGITAALISET PALVELUT\n   VALMIS YHDEN LOHKON KOODI\n   ========================================================= *\/\n\n:root{\n  --skm-ink:#182132;\n  --skm-text:#5e6878;\n  --skm-blue:#405f89;\n  --skm-blue-deep:#2d4b72;\n  --skm-gold:#b59645;\n  --skm-cream:#f7f3e9;\n  --skm-soft:#f6f8f9;\n  --skm-line:#dbe1e5;\n  --skm-white:#fff;\n}\n\nbody.page-id-88 .entry-hero,\nbody.page-id-88 .entry-header,\nbody.page-id-88 .page-header,\nbody:has(.skm-page) .entry-hero.page-hero-section,\nbody:has(.skm-page) .entry-header,\nbody:has(.skm-page) .page-header{\n  display:none!important;\n}\n\nbody:has(.skm-page) .content-area,\nbody:has(.skm-page) .site-main,\nbody:has(.skm-page) .entry-content,\nbody:has(.skm-page) .entry-content-wrap{\n  margin:0!important;\n  padding:0!important;\n}\n\n.skm-page,\n.skm-page *{\n  box-sizing:border-box;\n}\n\n.skm-page{\n  position:relative;\n  left:50%;\n  width:100vw;\n  max-width:100vw;\n  margin-left:-50vw;\n  overflow:hidden;\n  background:#fff;\n  color:var(--skm-ink);\n  font-family:inherit;\n}\n\n.skm-page a{\n  color:inherit;\n  text-decoration:none;\n}\n\n.skm-wrap{\n  width:min(calc(100% - 72px),1180px);\n  margin-inline:auto;\n}\n\n.skm-page h1,\n.skm-page h2,\n.skm-page h3,\n.skm-page p,\n.skm-page figure{\n  margin-top:0;\n}\n\n.skm-page h1,\n.skm-page h2,\n.skm-page h3{\n  color:var(--skm-ink);\n  font-weight:780;\n  letter-spacing:-.038em;\n}\n\n.skm-kicker{\n  display:block;\n  margin-bottom:15px;\n  color:var(--skm-gold);\n  font-size:.72rem;\n  font-weight:850;\n  letter-spacing:.18em;\n  line-height:1.5;\n  text-transform:uppercase;\n}\n\n.skm-page h2{\n  font-size:clamp(2.35rem,3.25vw,3.65rem);\n  line-height:1.06;\n}\n\n.skm-page h3{\n  font-size:clamp(1.3rem,1.7vw,1.75rem);\n  line-height:1.15;\n}\n\n.skm-button{\n  display:inline-flex;\n  min-height:49px;\n  align-items:center;\n  justify-content:center;\n  gap:18px;\n  padding:13px 23px;\n  border-radius:999px;\n  background:linear-gradient(135deg,var(--skm-blue),var(--skm-blue-deep));\n  color:#fff!important;\n  box-shadow:0 14px 28px rgba(45,75,114,.18);\n  font-size:.94rem;\n  font-weight:800;\n  line-height:1;\n  transition:transform .18s ease,box-shadow .18s ease;\n}\n\n.skm-button--gold{\n  background:linear-gradient(135deg,#c3a65a,#a98733);\n}\n\n.skm-button:hover,\n.skm-button:focus-visible{\n  transform:translateY(-2px);\n  box-shadow:0 18px 34px rgba(45,75,114,.24);\n}\n\n.skm-link{\n  display:inline-flex;\n  align-items:center;\n  gap:9px;\n  padding-bottom:4px;\n  border-bottom:1px solid rgba(24,33,50,.28);\n  font-size:.94rem;\n  font-weight:760;\n}\n\n.skm-link:hover,\n.skm-link:focus-visible{\n  border-color:var(--skm-gold);\n}\n\n.skm-actions{\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  gap:22px;\n}\n\n\n\/* =========================================================\n   HERO\n   ========================================================= *\/\n\n.skm-hero{\n  position:relative;\n  padding:72px 0 0;\n  background:\n    radial-gradient(circle at 88% 22%,rgba(181,150,69,.13),transparent 27rem),\n    linear-gradient(110deg,#fff 0,#fff 58%,#faf8f2 100%);\n}\n\n.skm-hero:before{\n  content:\"\";\n  position:absolute;\n  inset:0 0 auto;\n  height:1px;\n  background:linear-gradient(\n    90deg,\n    transparent,\n    rgba(181,150,69,.55),\n    transparent\n  );\n}\n\n.skm-hero__grid{\n  display:grid;\n  grid-template-columns:minmax(0,.94fr) minmax(430px,1.06fr);\n  gap:clamp(60px,7vw,96px);\n  align-items:center;\n  padding-bottom:68px;\n}\n\n.skm-hero h1{\n  max-width:720px;\n  margin-bottom:26px;\n  font-size:clamp(3.35rem,4.8vw,5.15rem);\n  line-height:1;\n  letter-spacing:-.043em;\n}\n\n.skm-hero__lead{\n  max-width:660px;\n  margin-bottom:33px;\n  color:var(--skm-text);\n  font-size:clamp(1.08rem,1.25vw,1.23rem);\n  line-height:1.68;\n}\n\n.skm-hero__visual{\n  position:relative;\n  min-height:520px;\n}\n\n.skm-hero__visual:before{\n  content:\"\";\n  position:absolute;\n  inset:11% 7%;\n  border-radius:50%;\n  background:rgba(64,95,137,.1);\n  filter:blur(46px);\n}\n\n\/* T\u00e4h\u00e4n voidaan my\u00f6hemmin vaihtaa oikeat verkkosivuty\u00f6n\u00e4ytteet *\/\n.skm-browser{\n  position:absolute;\n  overflow:hidden;\n  border:1px solid rgba(24,33,50,.1);\n  border-radius:22px;\n  background:#fff;\n  box-shadow:0 28px 65px rgba(24,33,50,.15);\n}\n\n.skm-browser--main{\n  inset:0 9% 9% 0;\n}\n\n.skm-browser--small{\n  width:47%;\n  height:46%;\n  right:0;\n  bottom:0;\n  border:7px solid #fff;\n}\n\n.skm-browser__top{\n  display:flex;\n  align-items:center;\n  gap:7px;\n  height:35px;\n  padding:0 14px;\n  background:#eef1f3;\n}\n\n.skm-browser__top span{\n  width:7px;\n  height:7px;\n  border-radius:50%;\n  background:#c5cbd1;\n}\n\n.skm-browser__screen{\n  position:relative;\n  height:calc(100% - 35px);\n  overflow:hidden;\n  background:\n    linear-gradient(135deg,rgba(64,95,137,.96),rgba(45,75,114,.94));\n}\n\n.skm-browser--small .skm-browser__screen{\n  background:\n    linear-gradient(145deg,#f7f3e9,#fff);\n}\n\n.skm-demo{\n  position:absolute;\n  inset:0;\n  padding:9% 8%;\n}\n\n.skm-demo__label{\n  display:inline-block;\n  margin-bottom:16px;\n  color:#dbc27d;\n  font-size:.62rem;\n  font-weight:850;\n  letter-spacing:.15em;\n  text-transform:uppercase;\n}\n\n.skm-demo h3{\n  max-width:410px;\n  margin-bottom:17px;\n  color:#fff;\n  font-size:clamp(1.55rem,2.3vw,2.6rem);\n  line-height:1.08;\n}\n\n.skm-demo p{\n  max-width:380px;\n  color:rgba(255,255,255,.78);\n  font-size:.84rem;\n  line-height:1.6;\n}\n\n.skm-demo__button{\n  display:inline-block;\n  margin-top:13px;\n  padding:9px 15px;\n  border-radius:999px;\n  background:#fff;\n  color:var(--skm-blue-deep);\n  font-size:.7rem;\n  font-weight:800;\n}\n\n.skm-demo-small{\n  display:grid;\n  height:100%;\n  place-items:center;\n  padding:22px;\n  text-align:center;\n}\n\n.skm-demo-small strong{\n  display:block;\n  margin-bottom:7px;\n  font-size:1rem;\n}\n\n.skm-demo-small span{\n  color:var(--skm-text);\n  font-size:.72rem;\n  line-height:1.5;\n}\n\n.skm-pillars{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  border-top:1px solid var(--skm-line);\n}\n\n.skm-pillars>div{\n  display:grid;\n  grid-template-columns:35px 1fr;\n  gap:3px 12px;\n  padding:24px 0;\n}\n\n.skm-pillars>div+div{\n  padding-left:30px;\n  border-left:1px solid var(--skm-line);\n}\n\n.skm-pillars b{\n  grid-row:1\/3;\n  color:var(--skm-gold);\n  font-size:.65rem;\n  letter-spacing:.12em;\n}\n\n.skm-pillars strong,\n.skm-pillars small{\n  display:block;\n}\n\n.skm-pillars strong{\n  font-size:.94rem;\n}\n\n.skm-pillars small{\n  color:var(--skm-text);\n  font-size:.78rem;\n}\n\n\n\/* =========================================================\n   INTRO\n   ========================================================= *\/\n\n.skm-intro{\n  padding:98px 0;\n}\n\n.skm-two{\n  display:grid;\n  grid-template-columns:minmax(0,1.04fr) minmax(360px,.8fr);\n  gap:clamp(62px,8vw,104px);\n  align-items:start;\n}\n\n.skm-intro__text{\n  padding-top:25px;\n}\n\n.skm-intro__text p{\n  color:var(--skm-text);\n  font-size:1.04rem;\n  line-height:1.75;\n}\n\n.skm-intro__text .skm-lead{\n  color:var(--skm-ink);\n  font-size:clamp(1.18rem,1.5vw,1.42rem);\n  line-height:1.52;\n}\n\n\n\/* =========================================================\n   PALVELUT\n   ========================================================= *\/\n\n.skm-services{\n  padding:96px 0 104px;\n  background:#fbfcfc;\n}\n\n.skm-section-head{\n  display:grid;\n  grid-template-columns:minmax(0,1.1fr) minmax(300px,.62fr);\n  gap:64px;\n  align-items:end;\n  margin-bottom:52px;\n}\n\n.skm-section-head h2{\n  max-width:760px;\n}\n\n.skm-section-head p{\n  margin-bottom:3px;\n  color:var(--skm-text);\n  font-size:1.02rem;\n  line-height:1.68;\n}\n\n.skm-service-list{\n  border-top:1px solid var(--skm-line);\n}\n\n.skm-service{\n  display:grid;\n  grid-template-columns:54px minmax(230px,.72fr) minmax(0,1fr) 28px;\n  gap:18px;\n  align-items:start;\n  padding:31px 0;\n  border-bottom:1px solid var(--skm-line);\n  transition:padding .18s ease,background .18s ease;\n}\n\n.skm-service:hover{\n  padding-inline:18px;\n  background:linear-gradient(\n    90deg,\n    rgba(247,243,233,.9),\n    transparent\n  );\n}\n\n.skm-num{\n  color:var(--skm-gold);\n  font-size:.68rem;\n  font-weight:850;\n  letter-spacing:.12em;\n}\n\n.skm-service h3{\n  margin-bottom:0;\n}\n\n.skm-service p{\n  max-width:580px;\n  margin-bottom:0;\n  color:var(--skm-text);\n  font-size:.96rem;\n  line-height:1.65;\n}\n\n.skm-arrow{\n  color:var(--skm-blue-deep);\n  font-weight:800;\n}\n\n\n\/* =========================================================\n   VERKKOSIVUT\n   ========================================================= *\/\n\n.skm-websites{\n  padding:108px 0;\n  background:var(--skm-cream);\n}\n\n.skm-websites__grid{\n  display:grid;\n  grid-template-columns:minmax(350px,.72fr) minmax(0,1.28fr);\n  gap:clamp(65px,8vw,110px);\n  align-items:start;\n}\n\n.skm-websites__copy{\n  position:sticky;\n  top:40px;\n}\n\n.skm-websites__copy>p{\n  margin-bottom:29px;\n  color:var(--skm-text);\n  font-size:1.02rem;\n  line-height:1.74;\n}\n\n.skm-checks{\n  display:grid;\n  gap:13px;\n  margin:31px 0 36px;\n  padding:0;\n  list-style:none;\n}\n\n.skm-checks li{\n  position:relative;\n  padding-left:28px;\n  color:var(--skm-ink);\n  font-size:.96rem;\n  line-height:1.5;\n}\n\n.skm-checks li:before{\n  content:\"\u2713\";\n  position:absolute;\n  left:0;\n  color:var(--skm-gold);\n  font-weight:900;\n}\n\n.skm-package-list{\n  display:grid;\n  gap:18px;\n}\n\n.skm-package{\n  padding:30px;\n  border:1px solid rgba(24,33,50,.1);\n  border-radius:20px;\n  background:#fff;\n  box-shadow:0 15px 40px rgba(24,33,50,.055);\n}\n\n.skm-package__top{\n  display:flex;\n  justify-content:space-between;\n  gap:25px;\n  align-items:start;\n  margin-bottom:16px;\n}\n\n.skm-package__top strong{\n  font-size:1.3rem;\n}\n\n.skm-package__price{\n  color:var(--skm-blue-deep);\n  font-size:1.05rem;\n  font-weight:850;\n  white-space:nowrap;\n}\n\n.skm-package p{\n  margin-bottom:17px;\n  color:var(--skm-text);\n  font-size:.9rem;\n  line-height:1.65;\n}\n\n.skm-package ul{\n  display:grid;\n  gap:8px;\n  margin:0;\n  padding:0;\n  list-style:none;\n}\n\n.skm-package li{\n  position:relative;\n  padding-left:19px;\n  color:var(--skm-ink);\n  font-size:.84rem;\n  line-height:1.45;\n}\n\n.skm-package li:before{\n  content:\"\u2013\";\n  position:absolute;\n  left:0;\n  color:var(--skm-gold);\n}\n\n\n\/* =========================================================\n   DIGITAALISET RATKAISUT\n   ========================================================= *\/\n\n.skm-digital{\n  padding:104px 0;\n}\n\n.skm-digital__head{\n  max-width:780px;\n  margin-bottom:50px;\n}\n\n.skm-digital__head p{\n  max-width:700px;\n  margin-top:23px;\n  color:var(--skm-text);\n  font-size:1.02rem;\n  line-height:1.72;\n}\n\n.skm-digital__grid{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:20px;\n}\n\n.skm-digital-card{\n  min-height:245px;\n  padding:29px 27px;\n  border:1px solid var(--skm-line);\n  border-radius:18px;\n  background:#fff;\n}\n\n.skm-digital-card b{\n  display:block;\n  margin-bottom:28px;\n  color:var(--skm-gold);\n  font-size:.68rem;\n  letter-spacing:.12em;\n}\n\n.skm-digital-card h3{\n  margin-bottom:13px;\n  font-size:1.3rem;\n}\n\n.skm-digital-card p{\n  margin-bottom:0;\n  color:var(--skm-text);\n  font-size:.9rem;\n  line-height:1.65;\n}\n\n\n\/* =========================================================\n   MARKKINOINTI \/ MAJOITUS\n   ========================================================= *\/\n\n.skm-cottage{\n  padding:104px 0;\n  background:var(--skm-soft);\n}\n\n.skm-cottage__grid{\n  display:grid;\n  grid-template-columns:minmax(430px,1.06fr) minmax(340px,.74fr);\n  gap:clamp(60px,8vw,105px);\n  align-items:center;\n}\n\n.skm-cottage__photo{\n  min-height:610px;\n  border:1px solid rgba(181,150,69,.25);\n  border-radius:26px;\n  background-color:#f1eee5;\n  background-image:url('https:\/\/www.suomenkompassi.fi\/wp-content\/uploads\/2026\/08\/esim4.png');\n  background-position:center;\n  background-repeat:no-repeat;\n  background-size:contain;\n  box-shadow:0 27px 60px rgba(24,33,50,.12);\n}\n\n.skm-cottage__copy>p{\n  margin-bottom:28px;\n  color:var(--skm-text);\n  font-size:1.02rem;\n  line-height:1.74;\n}\n\n\n\/* =========================================================\n   PORTFOLIO\n   ========================================================= *\/\n\n.skm-work{\n  padding:104px 0;\n}\n\n.skm-work__intro{\n  display:grid;\n  grid-template-columns:minmax(0,1fr) minmax(320px,.66fr);\n  gap:70px;\n  align-items:end;\n  margin-bottom:48px;\n}\n\n.skm-work__intro p{\n  margin-bottom:4px;\n  color:var(--skm-text);\n  font-size:.96rem;\n  line-height:1.7;\n}\n\n.skm-gallery{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:22px;\n}\n\n.skm-work__item{\n  overflow:hidden;\n  border:1px solid var(--skm-line);\n  border-radius:20px;\n  background:#fff;\n  box-shadow:0 18px 45px rgba(24,33,50,.07);\n}\n\n.skm-work__media{\n  height:420px;\n  overflow:hidden;\n  background:#eef0f1;\n}\n\n.skm-work__art{\n  display:block;\n  width:100%;\n  height:100%;\n  object-fit:contain;\n  transition:transform .35s ease;\n}\n\n.skm-work__item:hover .skm-work__art{\n  transform:scale(1.012);\n}\n\n.skm-work__caption{\n  padding:24px 26px 27px;\n  color:var(--skm-ink);\n}\n\n.skm-work__caption small,\n.skm-work__caption strong,\n.skm-work__caption span{\n  display:block;\n}\n\n.skm-work__caption small{\n  margin-bottom:8px;\n  color:var(--skm-gold);\n  font-size:.66rem;\n  font-weight:850;\n  letter-spacing:.14em;\n  text-transform:uppercase;\n}\n\n.skm-work__caption strong{\n  margin-bottom:7px;\n  font-size:clamp(1.2rem,1.8vw,1.55rem);\n  line-height:1.15;\n}\n\n.skm-work__caption span{\n  max-width:570px;\n  color:var(--skm-text);\n  font-size:.85rem;\n  line-height:1.55;\n}\n\n.skm-work__links{\n  display:flex;\n  flex-wrap:wrap;\n  gap:18px 28px;\n  align-items:center;\n  margin-top:28px;\n}\n\n.skm-proof{\n  display:grid;\n  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);\n  gap:34px;\n  align-items:center;\n  margin-top:54px;\n  padding-top:42px;\n  border-top:1px solid var(--skm-line);\n}\n\n.skm-proof img{\n  display:block;\n  width:100%;\n  max-height:390px;\n  object-fit:contain;\n  border:1px solid var(--skm-line);\n  border-radius:18px;\n  background:#0f1115;\n}\n\n.skm-proof p{\n  margin-bottom:18px;\n  color:var(--skm-text);\n  font-size:.94rem;\n  line-height:1.7;\n}\n\n\n\/* =========================================================\n   HINNAT\n   ========================================================= *\/\n\n.skm-prices{\n  padding:102px 0;\n  background:var(--skm-soft);\n}\n\n.skm-price-groups{\n  display:grid;\n  gap:58px;\n  margin-top:54px;\n}\n\n.skm-price-group{\n  display:grid;\n  grid-template-columns:minmax(250px,.45fr) minmax(0,1.55fr);\n  gap:54px;\n  padding-top:28px;\n  border-top:1px solid var(--skm-line);\n}\n\n.skm-price-group>div:first-child p{\n  max-width:330px;\n  color:var(--skm-text);\n  font-size:.9rem;\n  line-height:1.6;\n}\n\n.skm-price-list{\n  display:grid;\n}\n\n.skm-price{\n  display:grid;\n  grid-template-columns:minmax(0,1fr) 150px;\n  gap:28px;\n  padding:20px 0;\n  border-bottom:1px solid var(--skm-line);\n}\n\n.skm-price:first-child{\n  padding-top:2px;\n}\n\n.skm-price strong,\n.skm-price span{\n  display:block;\n}\n\n.skm-price strong{\n  margin-bottom:5px;\n  font-size:1.02rem;\n}\n\n.skm-price small{\n  color:var(--skm-text);\n  font-size:.82rem;\n  line-height:1.5;\n}\n\n.skm-price__sum{\n  text-align:right;\n  color:var(--skm-blue-deep);\n  font-size:1.05rem;\n  font-weight:850;\n  white-space:nowrap;\n}\n\n.skm-price-note{\n  max-width:820px;\n  margin:42px 0 0;\n  color:var(--skm-text);\n  font-size:.82rem;\n  line-height:1.6;\n}\n\n\n\/* =========================================================\n   PROSESSI\n   ========================================================= *\/\n\n.skm-process{\n  padding:98px 0;\n}\n\n.skm-process__steps{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  margin-top:50px;\n  border-top:1px solid var(--skm-line);\n  border-bottom:1px solid var(--skm-line);\n}\n\n.skm-step{\n  min-height:190px;\n  padding:28px 26px 28px 0;\n}\n\n.skm-step+.skm-step{\n  padding-left:26px;\n  border-left:1px solid var(--skm-line);\n}\n\n.skm-step b{\n  display:block;\n  margin-bottom:25px;\n  color:var(--skm-gold);\n  font-size:.68rem;\n  letter-spacing:.12em;\n}\n\n.skm-step strong{\n  display:block;\n  margin-bottom:8px;\n  font-size:1.03rem;\n}\n\n.skm-step p{\n  margin-bottom:0;\n  color:var(--skm-text);\n  font-size:.86rem;\n  line-height:1.6;\n}\n\n\n\/* =========================================================\n   CTA\n   ========================================================= *\/\n\n.skm-cta{\n  padding:82px 0 88px;\n  background:linear-gradient(\n    120deg,\n    var(--skm-blue-deep),\n    #47658e\n  );\n  color:#fff;\n}\n\n.skm-cta__grid{\n  display:grid;\n  grid-template-columns:minmax(0,1.08fr) minmax(340px,.7fr);\n  gap:clamp(60px,8vw,104px);\n  align-items:end;\n}\n\n.skm-cta .skm-kicker{\n  color:#dec580;\n}\n\n.skm-cta h2{\n  max-width:720px;\n  color:#fff;\n}\n\n.skm-cta p{\n  margin-bottom:25px;\n  color:rgba(255,255,255,.8);\n  font-size:1.02rem;\n  line-height:1.68;\n}\n\n.skm-cta .skm-link{\n  border-color:rgba(255,255,255,.45);\n  color:#fff;\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media(max-width:900px){\n\n  .skm-hero__grid{\n    grid-template-columns:1fr minmax(340px,.78fr);\n    gap:42px;\n  }\n\n  .skm-digital__grid{\n    grid-template-columns:1fr 1fr;\n  }\n\n  .skm-work__media{\n    height:340px;\n  }\n\n  .skm-process__steps{\n    grid-template-columns:1fr 1fr;\n  }\n\n  .skm-step:nth-child(3){\n    border-left:0;\n    border-top:1px solid var(--skm-line);\n  }\n\n  .skm-step:nth-child(4){\n    border-top:1px solid var(--skm-line);\n  }\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:760px){\n\n  .skm-wrap{\n    width:min(calc(100% - 40px),1180px);\n  }\n\n  .skm-hero{\n    padding-top:48px;\n  }\n\n  .skm-hero__grid,\n  .skm-two,\n  .skm-section-head,\n  .skm-websites__grid,\n  .skm-cottage__grid,\n  .skm-work__intro,\n  .skm-price-group,\n  .skm-cta__grid,\n  .skm-proof{\n    grid-template-columns:1fr;\n  }\n\n  .skm-hero h1{\n    font-size:clamp(2.8rem,12vw,4rem);\n  }\n\n  .skm-hero__visual{\n    min-height:440px;\n  }\n\n  .skm-browser--main{\n    inset:0 8% 8% 0;\n  }\n\n  .skm-browser--small{\n    width:48%;\n    height:44%;\n  }\n\n  .skm-pillars{\n    grid-template-columns:1fr;\n  }\n\n  .skm-pillars>div,\n  .skm-pillars>div+div{\n    padding:17px 0;\n    border-top:1px solid var(--skm-line);\n    border-left:0;\n  }\n\n  .skm-pillars>div:first-child{\n    border-top:0;\n  }\n\n  .skm-intro,\n  .skm-services,\n  .skm-websites,\n  .skm-digital,\n  .skm-cottage,\n  .skm-work,\n  .skm-prices,\n  .skm-process,\n  .skm-cta{\n    padding-block:72px;\n  }\n\n  .skm-intro__text{\n    padding-top:0;\n  }\n\n  .skm-section-head{\n    gap:22px;\n    margin-bottom:44px;\n  }\n\n  .skm-service{\n    grid-template-columns:38px 1fr 22px;\n    gap:10px;\n  }\n\n  .skm-service p{\n    grid-column:2\/4;\n  }\n\n  .skm-websites__copy{\n    position:static;\n  }\n\n  .skm-package__top{\n    display:grid;\n    gap:6px;\n  }\n\n  .skm-digital__grid{\n    grid-template-columns:1fr;\n  }\n\n  .skm-cottage__grid{\n    gap:45px;\n  }\n\n  .skm-cottage__photo{\n    min-height:480px;\n  }\n\n  .skm-gallery{\n    grid-template-columns:1fr;\n  }\n\n  .skm-work__media{\n    height:390px;\n  }\n\n  .skm-price-group{\n    gap:26px;\n  }\n\n  .skm-process__steps{\n    grid-template-columns:1fr;\n  }\n\n  .skm-step,\n  .skm-step+.skm-step{\n    min-height:0;\n    padding:25px 0;\n    border-top:1px solid var(--skm-line);\n    border-left:0;\n  }\n\n  .skm-step:first-child{\n    border-top:0;\n  }\n}\n\n@media(max-width:500px){\n\n  .skm-wrap{\n    width:min(calc(100% - 30px),1180px);\n  }\n\n  .skm-actions,\n  .skm-button{\n    width:100%;\n  }\n\n  .skm-actions .skm-link{\n    width:auto;\n  }\n\n  .skm-hero__visual{\n    min-height:355px;\n  }\n\n  .skm-browser--small{\n    border-width:5px;\n  }\n\n  .skm-page h2{\n    font-size:clamp(2.05rem,10vw,2.75rem);\n  }\n\n  .skm-cottage__photo{\n    min-height:390px;\n  }\n\n  .skm-work__media{\n    height:300px;\n  }\n\n  .skm-price{\n    grid-template-columns:1fr;\n  }\n\n  .skm-price__sum{\n    text-align:left;\n  }\n}\n\n@media(prefers-reduced-motion:reduce){\n\n  .skm-page *,\n  .skm-page *:before,\n  .skm-page *:after{\n    transition:none!important;\n  }\n}\n<\/style>\n\n\n<main class=\"skm-page\" id=\"skm-page\">\n\n\n<!-- ======================================================\n     HERO\n     ====================================================== -->\n\n<section class=\"skm-hero\" aria-labelledby=\"skm-title\">\n\n  <div class=\"skm-wrap skm-hero__grid\">\n\n    <div>\n\n      <span class=\"skm-kicker\">\n        Suomen Kompassi Oy \u00b7 Digitaaliset palvelut\n      <\/span>\n\n      <h1 id=\"skm-title\">\n        Verkkosivut ja digitaaliset ratkaisut yrityksesi kasvuun.\n      <\/h1>\n\n      <p class=\"skm-hero__lead\">\n        Suunnittelen ja toteutan moderneja verkkosivuja sek\u00e4 digitaalisia\n        ratkaisuja yrityksille. Tarvittaessa rakennan samaan kokonaisuuteen\n        sis\u00e4ll\u00f6t, monikielisen viestinn\u00e4n, markkinointimateriaalit ja\n        jatkuvan yll\u00e4pidon.\n      <\/p>\n\n      <div class=\"skm-actions\">\n\n        <a class=\"skm-button\" href=\"\/index.php\/yhteystiedot\/\">\n          Pyyd\u00e4 tarjous\n          <span aria-hidden=\"true\">\u2192<\/span>\n        <\/a>\n\n        <a class=\"skm-link\" href=\"#verkkosivut\">\n          Tutustu verkkosivupalveluihin\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"skm-hero__visual\" aria-label=\"Esimerkki yrityksen verkkosivuratkaisusta\">\n\n      <div class=\"skm-browser skm-browser--main\">\n\n        <div class=\"skm-browser__top\">\n          <span><\/span>\n          <span><\/span>\n          <span><\/span>\n        <\/div>\n\n        <div class=\"skm-browser__screen\">\n\n          <div class=\"skm-demo\">\n\n            <span class=\"skm-demo__label\">\n              VERKKOSIVUT YRITYKSELLE\n            <\/span>\n\n            <h3>\n              Selke\u00e4 verkkoidentiteetti alkaa hyv\u00e4st\u00e4 rakenteesta.\n            <\/h3>\n\n            <p>\n              Yrityksen palvelut, sis\u00e4lt\u00f6 ja yhteydenotto rakennetaan\n              asiakkaalle helposti ymm\u00e4rrett\u00e4v\u00e4ksi kokonaisuudeksi.\n            <\/p>\n\n            <span class=\"skm-demo__button\">\n              Tutustu palveluihin\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"skm-browser skm-browser--small\">\n\n        <div class=\"skm-browser__top\">\n          <span><\/span>\n          <span><\/span>\n          <span><\/span>\n        <\/div>\n\n        <div class=\"skm-browser__screen\">\n\n          <div class=\"skm-demo-small\">\n\n            <div>\n\n              <strong>\n                Mobiiliyst\u00e4v\u00e4llinen\n              <\/strong>\n\n              <span>\n                Sivusto toimii sujuvasti my\u00f6s puhelimella.\n              <\/span>\n\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"skm-wrap skm-pillars\">\n\n    <div>\n      <b>01<\/b>\n      <strong>Verkkosivut<\/strong>\n      <small>Suunnittelu ja toteutus<\/small>\n    <\/div>\n\n    <div>\n      <b>02<\/b>\n      <strong>Digitaaliset ratkaisut<\/strong>\n      <small>Toiminnot, automaatiot ja integraatiot<\/small>\n    <\/div>\n\n    <div>\n      <b>03<\/b>\n      <strong>Sis\u00e4lt\u00f6 ja n\u00e4kyvyys<\/strong>\n      <small>Tekstit, kuvat ja markkinointimateriaalit<\/small>\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ======================================================\n     INTRO\n     ====================================================== -->\n\n<section class=\"skm-intro\" aria-labelledby=\"skm-intro-title\">\n\n  <div class=\"skm-wrap skm-two\">\n\n    <div>\n\n      <span class=\"skm-kicker\">\n        SELKE\u00c4 KOKONAISUUS\n      <\/span>\n\n      <h2 id=\"skm-intro-title\">\n        Yrityksesi ei tarvitse vain verkkosivua. Se tarvitsee toimivan kokonaisuuden.\n      <\/h2>\n\n    <\/div>\n\n\n    <div class=\"skm-intro__text\">\n\n      <p class=\"skm-lead\">\n        Hyv\u00e4 verkkosivusto kertoo nopeasti, mit\u00e4 yritys tekee,\n        kenelle palvelu on tarkoitettu ja miksi juuri t\u00e4h\u00e4n yritykseen\n        kannattaa ottaa yhteytt\u00e4.\n      <\/p>\n\n      <p>\n        Rakennan sivuston rakenteen, sis\u00e4ll\u00f6n ja visuaalisen ilmeen\n        saman tavoitteen ymp\u00e4rille. Tarvittaessa kokonaisuuteen voidaan\n        yhdist\u00e4\u00e4 monikieliset sis\u00e4ll\u00f6t, markkinointi, kuvat,\n        automaatiot ja muut digitaaliset ratkaisut.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ======================================================\n     PALVELUT\n     ====================================================== -->\n\n<section class=\"skm-services\" aria-labelledby=\"skm-services-title\">\n\n  <div class=\"skm-wrap\">\n\n    <div class=\"skm-section-head\">\n\n      <div>\n\n        <span class=\"skm-kicker\">\n          PALVELUT\n        <\/span>\n\n        <h2 id=\"skm-services-title\">\n          Digitaaliset palvelut saman katon alta.\n        <\/h2>\n\n      <\/div>\n\n      <p>\n        Voit tilata yksitt\u00e4isen ty\u00f6n tai pyyt\u00e4\u00e4 yrityksellesi\n        rakennetun kokonaisuuden.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"skm-service-list\">\n\n\n      <a class=\"skm-service\" href=\"#verkkosivut\">\n\n        <span class=\"skm-num\">01<\/span>\n\n        <h3>\n          Verkkosivut yrityksille\n        <\/h3>\n\n        <p>\n          Modernit, mobiiliyst\u00e4v\u00e4lliset ja yrityksen ilmeeseen\n          suunnitellut verkkosivut rakenteesta julkaisuun.\n        <\/p>\n\n        <span class=\"skm-arrow\">\u2198<\/span>\n\n      <\/a>\n\n\n      <a class=\"skm-service\" href=\"#digitaaliset-ratkaisut\">\n\n        <span class=\"skm-num\">02<\/span>\n\n        <h3>\n          Digitaaliset ratkaisut\n        <\/h3>\n\n        <p>\n          Lomakkeet, integraatiot, automaatiot ja yrityksen arkea\n          helpottavat digitaaliset ratkaisut.\n        <\/p>\n\n        <span class=\"skm-arrow\">\u2198<\/span>\n\n      <\/a>\n\n\n      <a class=\"skm-service\" href=\"#sisallot\">\n\n        <span class=\"skm-num\">03<\/span>\n\n        <h3>\n          Sis\u00e4ll\u00f6t ja monikielisyys\n        <\/h3>\n\n        <p>\n          Verkkosivujen tekstit, sis\u00e4lt\u00f6rakenne ja monikieliset\n          sis\u00e4ll\u00f6t suomeksi, englanniksi ja ven\u00e4j\u00e4ksi.\n        <\/p>\n\n        <span class=\"skm-arrow\">\u2198<\/span>\n\n      <\/a>\n\n\n      <a class=\"skm-service\" href=\"#markkinointi\">\n\n        <span class=\"skm-num\">04<\/span>\n\n        <h3>\n          Markkinointi ja visuaalinen viestint\u00e4\n        <\/h3>\n\n        <p>\n          Sosiaalinen media, valokuvaus, esitteet,\n          kampanjamateriaalit ja muu yrityksen n\u00e4kyvyytt\u00e4 tukeva sis\u00e4lt\u00f6.\n        <\/p>\n\n        <span class=\"skm-arrow\">\u2198<\/span>\n\n      <\/a>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ======================================================\n     VERKKOSIVUT\n     ====================================================== -->\n\n<section class=\"skm-websites\" id=\"verkkosivut\" aria-labelledby=\"skm-websites-title\">\n\n  <div class=\"skm-wrap skm-websites__grid\">\n\n\n    <div class=\"skm-websites__copy\">\n\n      <span class=\"skm-kicker\">\n        VERKKOSIVUT YRITYKSILLE\n      <\/span>\n\n      <h2 id=\"skm-websites-title\">\n        Yrityksellesi rakennettu verkkosivusto \u2013 ei vain valmis pohja.\n      <\/h2>\n\n      <p>\n        Sivusto suunnitellaan yrityksesi palvelujen,\n        asiakkaiden ja tavoitteiden ymp\u00e4rille.\n        Tavoitteena on uskottava, selke\u00e4 ja helppok\u00e4ytt\u00f6inen kokonaisuus,\n        joka toimii my\u00f6s mobiilissa.\n      <\/p>\n\n      <ul class=\"skm-checks\">\n\n        <li>\n          sivuston rakenne ja visuaalinen suunnittelu\n        <\/li>\n\n        <li>\n          mobiili- ja tablettin\u00e4kym\u00e4\n        <\/li>\n\n        <li>\n          yhteydenottolomakkeet ja selke\u00e4 asiakaspolku\n        <\/li>\n\n        <li>\n          perus-SEO ja hakukoneyst\u00e4v\u00e4llinen rakenne\n        <\/li>\n\n        <li>\n          tarvittaessa monikielinen toteutus\n        <\/li>\n\n        <li>\n          mahdollisuus jatkuvaan yll\u00e4pitoon ja kehitt\u00e4miseen\n        <\/li>\n\n      <\/ul>\n\n      <a class=\"skm-button\" href=\"\/index.php\/yhteystiedot\/\">\n        Keskustele projektista\n        <span aria-hidden=\"true\">\u2192<\/span>\n      <\/a>\n\n    <\/div>\n\n\n    <div class=\"skm-package-list\">\n\n\n      <div class=\"skm-package\">\n\n        <div class=\"skm-package__top\">\n\n          <strong>\n            Startti\n          <\/strong>\n\n          <span class=\"skm-package__price\">\n            alkaen 800 \u20ac + ALV\n          <\/span>\n\n        <\/div>\n\n        <p>\n          Selke\u00e4 verkkosivusto pienelle yritykselle tai yritt\u00e4j\u00e4lle,\n          joka tarvitsee uskottavan ja toimivan verkkon\u00e4kyvyyden.\n        <\/p>\n\n        <ul>\n\n          <li>\n            yrityksen tarpeisiin suunniteltu rakenne\n          <\/li>\n\n          <li>\n            etusivu ja keskeiset sis\u00e4lt\u00f6osiot\n          <\/li>\n\n          <li>\n            mobiiliyst\u00e4v\u00e4llinen toteutus\n          <\/li>\n\n          <li>\n            yhteystiedot ja yhteydenottopolku\n          <\/li>\n\n          <li>\n            perus-SEO\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n\n      <div class=\"skm-package\">\n\n        <div class=\"skm-package__top\">\n\n          <strong>\n            Yritys\n          <\/strong>\n\n          <span class=\"skm-package__price\">\n            alkaen 1 200 \u20ac + ALV\n          <\/span>\n\n        <\/div>\n\n        <p>\n          Laajempi kokonaisuus yritykselle, jolla on useita palveluja,\n          enemm\u00e4n sis\u00e4lt\u00f6\u00e4 tai tarve vahvemmalle verkkon\u00e4kyvyydelle.\n        <\/p>\n\n        <ul>\n\n          <li>\n            useita sivuja ja palvelukokonaisuuksia\n          <\/li>\n\n          <li>\n            sis\u00e4lt\u00f6rakenteen suunnittelu\n          <\/li>\n\n          <li>\n            yhteydenottolomakkeet\n          <\/li>\n\n          <li>\n            hakukoneyst\u00e4v\u00e4llinen sivurakenne\n          <\/li>\n\n          <li>\n            tarvittaessa monikielisyys\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n\n      <div class=\"skm-package\">\n\n        <div class=\"skm-package__top\">\n\n          <strong>\n            R\u00e4\u00e4t\u00e4l\u00f6ity\n          <\/strong>\n\n          <span class=\"skm-package__price\">\n            alkaen 1 700 \u20ac + ALV\n          <\/span>\n\n        <\/div>\n\n        <p>\n          Yritykselle, joka tarvitsee tavallista verkkosivustoa\n          laajemman digitaalisen kokonaisuuden.\n        <\/p>\n\n        <ul>\n\n          <li>\n            yksil\u00f6llinen rakenne ja laajempi suunnittelu\n          <\/li>\n\n          <li>\n            integraatiot ja erityistoiminnot\n          <\/li>\n\n          <li>\n            automaatiot tarpeen mukaan\n          <\/li>\n\n          <li>\n            laajempi monikielinen sis\u00e4lt\u00f6\n          <\/li>\n\n          <li>\n            jatkokehitys ja yll\u00e4pito sovittaessa\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ======================================================\n     DIGITAALISET RATKAISUT\n     ====================================================== -->\n\n<section class=\"skm-digital\" id=\"digitaaliset-ratkaisut\" aria-labelledby=\"skm-digital-title\">\n\n  <div class=\"skm-wrap\">\n\n    <div class=\"skm-digital__head\">\n\n      <span class=\"skm-kicker\">\n        DIGITAALISET RATKAISUT\n      <\/span>\n\n      <h2 id=\"skm-digital-title\">\n        Sivusto voi tehd\u00e4 enemm\u00e4n kuin vain n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4.\n      <\/h2>\n\n      <p>\n        Verkkosivustoon voidaan rakentaa yrityksen toimintaa\n        helpottavia ratkaisuja ja asiakkaan asiointia sujuvoittavia toimintoja.\n        Toteutus suunnitellaan aina todellisen tarpeen mukaan.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"skm-digital__grid\">\n\n\n      <div class=\"skm-digital-card\">\n\n        <b>01<\/b>\n\n        <h3>\n          Lomakkeet ja yhteydenotot\n        <\/h3>\n\n        <p>\n          Tarjouspyynn\u00f6t, yhteydenotot, ilmoittautumiset\n          ja muut yrityksen tarpeisiin rakennetut lomakkeet.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"skm-digital-card\">\n\n        <b>02<\/b>\n\n        <h3>\n          Automaatiot\n        <\/h3>\n\n        <p>\n          Toistuvia ty\u00f6vaiheita voidaan automatisoida,\n          jotta aikaa j\u00e4\u00e4 varsinaiseen asiakasty\u00f6h\u00f6n.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"skm-digital-card\">\n\n        <b>03<\/b>\n\n        <h3>\n          Integraatiot\n        <\/h3>\n\n        <p>\n          Verkkosivusto voidaan yhdist\u00e4\u00e4 tarpeen mukaan\n          muihin yrityksen k\u00e4ytt\u00e4miin palveluihin ja j\u00e4rjestelmiin.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"skm-digital-card\">\n\n        <b>04<\/b>\n\n        <h3>\n          Monikieliset sivustot\n        <\/h3>\n\n        <p>\n          Sis\u00e4ll\u00f6t voidaan rakentaa suomeksi,\n          englanniksi ja ven\u00e4j\u00e4ksi ilman ett\u00e4 viestin selkeys k\u00e4rsii.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"skm-digital-card\">\n\n        <b>05<\/b>\n\n        <h3>\n          Yll\u00e4pito ja muutokset\n        <\/h3>\n\n        <p>\n          Sivustoa voidaan p\u00e4ivitt\u00e4\u00e4 ja kehitt\u00e4\u00e4 my\u00f6s julkaisun j\u00e4lkeen\n          yrityksen toiminnan muuttuessa.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"skm-digital-card\">\n\n        <b>06<\/b>\n\n        <h3>\n          Kehittyv\u00e4t AI-ratkaisut\n        <\/h3>\n\n        <p>\n          Tarpeen mukaan voidaan suunnitella my\u00f6s\n          teko\u00e4ly\u00e4 hy\u00f6dynt\u00e4vi\u00e4 toimintoja ja uusia digitaalisia palvelupolkuja.\n        <\/p>\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ======================================================\n     SIS\u00c4LT\u00d6 JA MARKKINOINTI\n     ====================================================== -->\n\n<section class=\"skm-cottage\" id=\"sisallot\" aria-labelledby=\"skm-cottage-title\">\n\n  <div class=\"skm-wrap skm-cottage__grid\">\n\n\n    <div\n      class=\"skm-cottage__photo\"\n      role=\"img\"\n      aria-label=\"Villa Unelmaloman markkinointimateriaali\">\n    <\/div>\n\n\n    <div class=\"skm-cottage__copy\">\n\n      <span class=\"skm-kicker\">\n        SIS\u00c4LT\u00d6 JA N\u00c4KYVYYS\n      <\/span>\n\n      <h2 id=\"skm-cottage-title\">\n        Verkkosivun ymp\u00e4rille voidaan rakentaa koko yrityksen n\u00e4kyvyys.\n      <\/h2>\n\n      <p>\n        Tarvittaessa toteutan my\u00f6s sivuston tekstit,\n        kuvat ja muuta yrityksen n\u00e4kyvyytt\u00e4 tukevaa materiaalia.\n        N\u00e4in verkkosivu, sosiaalinen media ja painetut materiaalit\n        muodostavat yhten\u00e4isen kokonaisuuden.\n      <\/p>\n\n      <ul class=\"skm-checks\">\n\n        <li>\n          verkkosivujen sis\u00e4ll\u00f6t ja myyv\u00e4t palvelutekstit\n        <\/li>\n\n        <li>\n          suomen-, englannin- ja ven\u00e4j\u00e4nkieliset sis\u00e4ll\u00f6t\n        <\/li>\n\n        <li>\n          sosiaalisen median sis\u00e4lt\u00f6\n        <\/li>\n\n        <li>\n          yritys- ja kohdekuvaus\n        <\/li>\n\n        <li>\n          flyerit, esitteet ja kampanjamateriaalit\n        <\/li>\n\n        <li>\n          yhten\u00e4inen visuaalinen viestint\u00e4\n        <\/li>\n\n      <\/ul>\n\n      <a class=\"skm-link\" href=\"#tyonaytteet\">\n        Katso ty\u00f6n\u00e4ytteet\n        <span aria-hidden=\"true\">\u2193<\/span>\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ======================================================\n     TY\u00d6N\u00c4YTTEET\n     ====================================================== -->\n\n<section class=\"skm-work\" id=\"tyonaytteet\" aria-labelledby=\"skm-work-title\">\n\n  <div class=\"skm-wrap\">\n\n\n    <div class=\"skm-work__intro\">\n\n      <div>\n\n        <span class=\"skm-kicker\">\n          TY\u00d6N\u00c4YTTEET\n        <\/span>\n\n        <h2 id=\"skm-work-title\">\n          Valittuja toteutuksia ja yhteisty\u00f6projekteja.\n        <\/h2>\n\n      <\/div>\n\n      <p>\n        Esimerkeiss\u00e4 n\u00e4kyv\u00e4t majoituskohteen markkinointi,\n        esitteet, sosiaalisen median sis\u00e4lt\u00f6 ja visuaalinen suunnittelu.\n        Verkkosivuprojekteja lis\u00e4t\u00e4\u00e4n portfolioon valmistumisen my\u00f6t\u00e4.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"skm-gallery\">\n\n\n      <article class=\"skm-work__item\">\n\n        <div class=\"skm-work__media\">\n\n          <img decoding=\"async\"\n            class=\"skm-work__art\"\n            src=\"https:\/\/www.suomenkompassi.fi\/wp-content\/uploads\/2026\/08\/esim3.png\"\n            alt=\"Villa Unelmaloman kuusisivuisen esitteen ensimm\u00e4inen puoli\"\n            loading=\"lazy\">\n\n        <\/div>\n\n        <div class=\"skm-work__caption\">\n\n          <small>\n            M\u00f6kkikuvaus \u00b7 esite \u00b7 varausmateriaali\n          <\/small>\n\n          <strong>\n            Villa Unelmaloma \u2014 esitteen ensimm\u00e4inen puoli\n          <\/strong>\n\n          <span>\n            Kuvat, palvelut ja kohteen tunnelma on koottu\n            helposti hahmotettavaksi majoitusesitteeksi.\n          <\/span>\n\n        <\/div>\n\n      <\/article>\n\n\n      <article class=\"skm-work__item\">\n\n        <div class=\"skm-work__media\">\n\n          <img decoding=\"async\"\n            class=\"skm-work__art\"\n            src=\"https:\/\/www.suomenkompassi.fi\/wp-content\/uploads\/2026\/08\/esim4.png\"\n            alt=\"Villa Unelmaloman kuusisivuisen esitteen toinen puoli\"\n            loading=\"lazy\">\n\n        <\/div>\n\n        <div class=\"skm-work__caption\">\n\n          <small>\n            M\u00f6kkimarkkinointi \u00b7 kartta \u00b7 QR-ohjaus\n          <\/small>\n\n          <strong>\n            Villa Unelmaloma \u2014 esitteen toinen puoli\n          <\/strong>\n\n          <span>\n            Tilat, ymp\u00e4rist\u00f6, saavutettavuus ja varauspolku\n            jatkuvat yhten\u00e4isell\u00e4 visuaalisella ilmeell\u00e4.\n          <\/span>\n\n        <\/div>\n\n      <\/article>\n\n\n      <article class=\"skm-work__item\">\n\n        <div class=\"skm-work__media\">\n\n          <img decoding=\"async\"\n            class=\"skm-work__art\"\n            src=\"https:\/\/www.suomenkompassi.fi\/wp-content\/uploads\/2026\/08\/cv-kurs.png\"\n            alt=\"Suomen Kompassin ty\u00f6nhakukurssin mainos\"\n            loading=\"lazy\">\n\n        <\/div>\n\n        <div class=\"skm-work__caption\">\n\n          <small>\n            Koulutus \u00b7 kampanja \u00b7 sosiaalinen media\n          <\/small>\n\n          <strong>\n            Ty\u00f6nhakukurssin markkinointimateriaali\n          <\/strong>\n\n          <span>\n            Kurssin sis\u00e4lt\u00f6, hy\u00f6dyt ja yhteydenotto on j\u00e4sennetty\n            yhteen selke\u00e4\u00e4n julkaisuun.\n          <\/span>\n\n        <\/div>\n\n      <\/article>\n\n\n      <article class=\"skm-work__item\">\n\n        <div class=\"skm-work__media\">\n\n          <img decoding=\"async\"\n            class=\"skm-work__art\"\n            src=\"https:\/\/www.suomenkompassi.fi\/wp-content\/uploads\/2026\/08\/esim5.png\"\n            alt=\"VH-Agentuurin majoituspalvelujen kampanjamateriaali\"\n            loading=\"lazy\">\n\n        <\/div>\n\n        <div class=\"skm-work__caption\">\n\n          <small>\n            Matkailumarkkinointi \u00b7 yhteisty\u00f6projekti\n          <\/small>\n\n          <strong>\n            Majoituspalvelujen kampanjamateriaali\n          <\/strong>\n\n          <span>\n            El\u00e4myksellinen kuvakollaasi ja myyntiteksti.\n            Toteutus yhteisty\u00f6ss\u00e4 VH-Agentuurin kanssa.\n          <\/span>\n\n        <\/div>\n\n      <\/article>\n\n\n    <\/div>\n\n\n    <div class=\"skm-work__links\">\n\n      <a\n        class=\"skm-link\"\n        href=\"https:\/\/www.suomenkompassi.fi\/wp-content\/uploads\/2026\/08\/CANVA_PROOF_FuROFMAY7QVe_44cce5677fb8cad254371cfe35c2a7443dc86e3e199953f4a59757589f885488-1.pdf\"\n        target=\"_blank\"\n        rel=\"noopener\">\n\n        Avaa Villa Unelmaloman painovalmis esite (PDF)\n\n        <span aria-hidden=\"true\">\u2197<\/span>\n\n      <\/a>\n\n    <\/div>\n\n\n    <div class=\"skm-proof\" id=\"markkinointi\">\n\n      <img decoding=\"async\"\n        src=\"https:\/\/www.suomenkompassi.fi\/wp-content\/uploads\/2026\/08\/esim1.png\"\n        alt=\"Puula Resortin Instagram-profiilin sis\u00e4lt\u00f6j\u00e4\"\n        loading=\"lazy\">\n\n\n      <div>\n\n        <span class=\"skm-kicker\">\n          SIS\u00c4LT\u00d6 K\u00c4YT\u00d6SS\u00c4\n        <\/span>\n\n        <h3>\n          Puula Resortin sosiaalisen median n\u00e4kyvyys\n        <\/h3>\n\n        <p>\n          Esimerkki majoituskohteen julkaisuista ja\n          yhten\u00e4isest\u00e4 somen\u00e4kyvyydest\u00e4.\n          Projekti on toteutettu yhteisty\u00f6ss\u00e4 VH-Agentuurin kanssa.\n        <\/p>\n\n        <a\n          class=\"skm-link\"\n          href=\"https:\/\/www.vh-agentuuri.fi\/\"\n          target=\"_blank\"\n          rel=\"noopener\">\n\n          Tutustu yhteisty\u00f6kumppaniin\n\n          <span aria-hidden=\"true\">\u2197<\/span>\n\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ======================================================\n     HINNASTO\n     ====================================================== -->\n\n<section class=\"skm-prices\" id=\"hinnat\" aria-labelledby=\"skm-prices-title\">\n\n  <div class=\"skm-wrap\">\n\n    <span class=\"skm-kicker\">\n      PALVELUHINNASTO 2026\n    <\/span>\n\n    <h2 id=\"skm-prices-title\">\n      Selke\u00e4t paketit ja hinnat.\n    <\/h2>\n\n\n    <div class=\"skm-price-groups\">\n\n\n      <!-- VERKKOSIVUT -->\n\n      <div class=\"skm-price-group\">\n\n        <div>\n\n          <h3>\n            Verkkosivut yrityksille\n          <\/h3>\n\n          <p>\n            Lopullinen hinta m\u00e4\u00e4r\u00e4ytyy sivuston laajuuden,\n            sis\u00e4ll\u00f6n ja tarvittavien toimintojen mukaan.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"skm-price-list\">\n\n\n          <div class=\"skm-price\">\n\n            <div>\n\n              <strong>\n                Startti\n              <\/strong>\n\n              <small>\n                Pienen yrityksen selke\u00e4 ja mobiiliyst\u00e4v\u00e4llinen\n                verkkosivukokonaisuus.\n              <\/small>\n\n            <\/div>\n\n            <span class=\"skm-price__sum\">\n              alkaen 800 \u20ac + ALV\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"skm-price\">\n\n            <div>\n\n              <strong>\n                Yritys\n              <\/strong>\n\n              <small>\n                Laajempi sivusto useilla palvelu- ja sis\u00e4lt\u00f6sivuilla,\n                yhteydenottotoiminnoilla ja hakukoneyst\u00e4v\u00e4llisell\u00e4 rakenteella.\n              <\/small>\n\n            <\/div>\n\n            <span class=\"skm-price__sum\">\n              alkaen 1 200 \u20ac + ALV\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"skm-price\">\n\n            <div>\n\n              <strong>\n                R\u00e4\u00e4t\u00e4l\u00f6ity\n              <\/strong>\n\n              <small>\n                Laajempi digitaalinen kokonaisuus,\n                johon voidaan liitt\u00e4\u00e4 integraatioita,\n                automaatioita ja muita erityistoimintoja.\n              <\/small>\n\n            <\/div>\n\n            <span class=\"skm-price__sum\">\n              alkaen 1 700 \u20ac + ALV\n            <\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n      <\/div>\n\n\n\n      <!-- MAJOITUS -->\n\n      <div class=\"skm-price-group\">\n\n        <div>\n\n          <h3>\n            Majoituskohteen n\u00e4kyvyyspaketit\n          <\/h3>\n\n          <p>\n            M\u00f6keille, huoneistoille, pienille hotelleille\n            ja muille majoituskohteille.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"skm-price-list\">\n\n\n          <div class=\"skm-price\">\n\n            <div>\n\n              <strong>\n                N\u00e4kyv\u00e4\n              <\/strong>\n\n              <small>\n                Kuvaus kohteessa enint\u00e4\u00e4n 1,5 h,\n                enint\u00e4\u00e4n 15 viimeistelty\u00e4 kuvaa,\n                sis\u00e4- ja ulkotilat sek\u00e4 t\u00e4rkeimm\u00e4t yksityiskohdat,\n                kohde-esittely suomeksi ja yksi pieni tekstikorjaus.\n              <\/small>\n\n            <\/div>\n\n            <span class=\"skm-price__sum\">\n              390 \u20ac + ALV\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"skm-price\">\n\n            <div>\n\n              <strong>\n                Vaikuttava\n              <\/strong>\n\n              <small>\n                Kuvaus enint\u00e4\u00e4n 3 h,\n                enint\u00e4\u00e4n 30 kuvaa,\n                kohde-esittely suomeksi ja asiakkaan valitsemalla kielell\u00e4,\n                otsikon, kuvaj\u00e4rjestyksen ja tekstirakenteen suunnittelu\n                sek\u00e4 QR-koodi.\n              <\/small>\n\n            <\/div>\n\n            <span class=\"skm-price__sum\">\n              690 \u20ac + ALV\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"skm-price\">\n\n            <div>\n\n              <strong>\n                Unohtumaton\n              <\/strong>\n\n              <small>\n                Laaja kuvaus enint\u00e4\u00e4n 4 h,\n                enint\u00e4\u00e4n 40 kuvaa,\n                kohde-esittely kahdella kielell\u00e4,\n                ilmoituksen kokonaisuudistus,\n                QR-koodi,\n                kolme valmista somejulkaisua\n                ja kaksi tekstikorjauskierrosta.\n              <\/small>\n\n            <\/div>\n\n            <span class=\"skm-price__sum\">\n              990 \u20ac + ALV\n            <\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n      <\/div>\n\n\n\n      <!-- SOME -->\n\n      <div class=\"skm-price-group\">\n\n        <div>\n\n          <h3>\n            Sosiaalisen median hallinta\n          <\/h3>\n\n          <p>\n            Kuukausipaketit yrityksen jatkuvaan digitaaliseen n\u00e4kyvyyteen.\n            Maksettu mainonta ei sis\u00e4lly paketteihin.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"skm-price-list\">\n\n\n          <div class=\"skm-price\">\n\n            <div>\n\n              <strong>\n                Startti\n              <\/strong>\n\n              <small>\n                Facebook-sivun k\u00e4ytt\u00f6\u00f6notto ja optimointi,\n                yritystiedot, profiili- ja kansikuva,\n                sis\u00e4lt\u00f6suunnitelma, julkaisukalenteri,\n                nelj\u00e4 julkaisua,\n                yksi kuvausk\u00e4ynti ja kuukausiraportti.\n              <\/small>\n\n            <\/div>\n\n            <span class=\"skm-price__sum\">\n              390 \u20ac + ALV\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"skm-price\">\n\n            <div>\n\n              <strong>\n                Kasvu\n              <\/strong>\n\n              <small>\n                Kaikki Startti-paketin palvelut,\n                Facebook ja Instagram,\n                kahdeksan julkaisua,\n                kaksi kuvausk\u00e4ynti\u00e4,\n                Stories-sis\u00e4lt\u00f6,\n                laajempi sis\u00e4lt\u00f6suunnitelma\n                sek\u00e4 kehitysehdotukset.\n              <\/small>\n\n            <\/div>\n\n            <span class=\"skm-price__sum\">\n              690 \u20ac + ALV\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"skm-price\">\n\n            <div>\n\n              <strong>\n                Premium\n              <\/strong>\n\n              <small>\n                Kaikki Kasvu-paketin palvelut,\n                12 julkaisua,\n                Reels-videot,\n                valokuva- ja videosis\u00e4ll\u00f6t,\n                sesonkikampanjat,\n                priorisoitu palvelu sek\u00e4\n                laajempi raportointi ja analyysi.\n              <\/small>\n\n            <\/div>\n\n            <span class=\"skm-price__sum\">\n              990 \u20ac + ALV\n            <\/span>\n\n          <\/div>\n\n\n        <\/div>\n\n      <\/div>\n\n\n\n      <!-- PAINOMATERIAALIT -->\n\n      <div class=\"skm-price-group\">\n\n        <div>\n\n          <h3>\n            Esitteet ja painomateriaalit\n          <\/h3>\n\n          <p>\n            Hintaan sis\u00e4ltyv\u00e4t suunnittelu,\n            asiakkaan toimittamien tekstien ja kuvien asettelu\n            sek\u00e4 kaksi korjauskierrosta.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"skm-price-list\">\n\n\n          <div class=\"skm-price\">\n            <div>\n              <strong>Flyer A6 \/ DL<\/strong>\n              <small>Yksi- tai kaksipuolinen, painovalmis PDF.<\/small>\n            <\/div>\n            <span class=\"skm-price__sum\">alkaen 85 \u20ac + ALV<\/span>\n          <\/div>\n\n\n          <div class=\"skm-price\">\n            <div>\n              <strong>Flyer A5<\/strong>\n              <small>Yksi- tai kaksipuolinen, painovalmis PDF.<\/small>\n            <\/div>\n            <span class=\"skm-price__sum\">alkaen 110 \u20ac + ALV<\/span>\n          <\/div>\n\n\n          <div class=\"skm-price\">\n            <div>\n              <strong>Flyer A4<\/strong>\n              <small>Yksi- tai kaksipuolinen, painovalmis PDF.<\/small>\n            <\/div>\n            <span class=\"skm-price__sum\">alkaen 140 \u20ac + ALV<\/span>\n          <\/div>\n\n\n          <div class=\"skm-price\">\n            <div>\n              <strong>Taitettava esite<\/strong>\n              <small>\n                Esimerkiksi A4-kokoinen kolmiosainen esite,\n                kuusi paneelia.\n              <\/small>\n            <\/div>\n            <span class=\"skm-price__sum\">alkaen 220 \u20ac + ALV<\/span>\n          <\/div>\n\n\n          <div class=\"skm-price\">\n            <div>\n              <strong>Juliste<\/strong>\n              <small>A4, A3 tai muu sovittu koko.<\/small>\n            <\/div>\n            <span class=\"skm-price__sum\">alkaen 95 \u20ac + ALV<\/span>\n          <\/div>\n\n\n          <div class=\"skm-price\">\n            <div>\n              <strong>K\u00e4yntikortin suunnittelu<\/strong>\n              <small>Kaksipuolinen k\u00e4yntikortti, painovalmis tiedosto.<\/small>\n            <\/div>\n            <span class=\"skm-price__sum\">90 \u20ac + ALV<\/span>\n          <\/div>\n\n\n          <div class=\"skm-price\">\n            <div>\n              <strong>Tuote- ja tarjouslehti<\/strong>\n              <small>\n                Enint\u00e4\u00e4n 33 tuotetta:\n                taitto, hinnat, tekstit, kuvat ja painovalmis PDF.\n              <\/small>\n            <\/div>\n            <span class=\"skm-price__sum\">350 \u20ac + ALV<\/span>\n          <\/div>\n\n\n          <div class=\"skm-price\">\n            <div>\n              <strong>Digitaalinen versio someen<\/strong>\n              <small>\n                Flyerista, esitteest\u00e4 tai kampanjasta.\n              <\/small>\n            <\/div>\n            <span class=\"skm-price__sum\">30 \u20ac \/ koko + ALV<\/span>\n          <\/div>\n\n\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <p class=\"skm-price-note\">\n      <strong>Hinnat ovat alv 0 %.<\/strong>\n      ALV lis\u00e4t\u00e4\u00e4n laskulle voimassa olevan verokannan mukaisesti.\n      Verkkosivuprojektin lopullinen hinta vahvistetaan aina ennen ty\u00f6n aloittamista\n      projektin laajuuden ja tarvittavien toimintojen perusteella.\n      Kuvien tavallinen toimitusaika on 5\u20137 arkip\u00e4iv\u00e4\u00e4.\n      Majoituspaketit sis\u00e4lt\u00e4v\u00e4t kuvauksen Kangasniemen alueella;\n      muualla matkakulut sovitaan erikseen.\n      Painatus, toimitus, maksulliset kuvapankkikuvat,\n      maksettu mainonta sek\u00e4 erikseen sovittavat palvelut\n      veloitetaan erikseen, ellei niit\u00e4 ole sis\u00e4llytetty tarjoukseen.\n    <\/p>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ======================================================\n     PROSESSI\n     ====================================================== -->\n\n<section class=\"skm-process\" aria-labelledby=\"skm-process-title\">\n\n  <div class=\"skm-wrap\">\n\n    <span class=\"skm-kicker\">\n      N\u00c4IN ETENEMME\n    <\/span>\n\n    <h2 id=\"skm-process-title\">\n      Tarpeesta valmiiseen ratkaisuun.\n    <\/h2>\n\n\n    <div class=\"skm-process__steps\">\n\n\n      <div class=\"skm-step\">\n\n        <b>01<\/b>\n\n        <strong>\n          Kartoitus\n        <\/strong>\n\n        <p>\n          K\u00e4ymme l\u00e4pi yrityksen,\n          kohderyhm\u00e4n, tavoitteet ja sen,\n          mit\u00e4 sivuston tai muun ty\u00f6n pit\u00e4\u00e4 saada aikaan.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"skm-step\">\n\n        <b>02<\/b>\n\n        <strong>\n          Suunnitelma\n        <\/strong>\n\n        <p>\n          Sovimme rakenteen,\n          sis\u00e4ll\u00f6n, toimintojen,\n          aikataulun, hinnan ja tarvittavat l\u00e4ht\u00f6materiaalit.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"skm-step\">\n\n        <b>03<\/b>\n\n        <strong>\n          Toteutus\n        <\/strong>\n\n        <p>\n          Rakennan ja viimeistelen kokonaisuuden\n          sovitun suunnitelman mukaisesti.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"skm-step\">\n\n        <b>04<\/b>\n\n        <strong>\n          Julkaisu ja jatko\n        <\/strong>\n\n        <p>\n          Valmis ratkaisu julkaistaan\n          ja tarvittaessa sovimme yll\u00e4pidosta,\n          muutoksista ja jatkokehityksest\u00e4.\n        <\/p>\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ======================================================\n     CTA\n     ====================================================== -->\n\n<section class=\"skm-cta\" aria-labelledby=\"skm-cta-title\">\n\n  <div class=\"skm-wrap skm-cta__grid\">\n\n\n    <div>\n\n      <span class=\"skm-kicker\">\n        SUUNNITELLAAN YHDESS\u00c4\n      <\/span>\n\n      <h2 id=\"skm-cta-title\">\n        Millaisen digitaalisen kokonaisuuden yrityksesi tarvitsee?\n      <\/h2>\n\n    <\/div>\n\n\n    <div>\n\n      <p>\n        Kerro lyhyesti yrityksest\u00e4si ja siit\u00e4,\n        mit\u00e4 haluaisit parantaa.\n        Suunnitellaan tarpeeseen sopiva ratkaisu ilman turhaa monimutkaisuutta.\n      <\/p>\n\n\n      <div class=\"skm-actions\">\n\n        <a\n          class=\"skm-button skm-button--gold\"\n          href=\"\/index.php\/yhteystiedot\/\">\n\n          Pyyd\u00e4 tarjous\n\n          <span aria-hidden=\"true\">\u2192<\/span>\n\n        <\/a>\n\n\n        <a\n          class=\"skm-link\"\n          href=\"mailto:suomen.kompassi@outlook.com?subject=Tarjouspyynt\u00f6%20verkkosivuista%20tai%20digitaalisista%20palveluista\">\n\n          L\u00e4het\u00e4 s\u00e4hk\u00f6postia\n\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<\/main>\n","protected":false},"excerpt":{"rendered":"<p>Suomen Kompassi Oy \u00b7 Digitaaliset palvelut Verkkosivut ja digitaaliset ratkaisut yrityksesi kasvuun. Suunnittelen ja toteutan moderneja verkkosivuja sek\u00e4 digitaalisia ratkaisuja yrityksille. Tarvittaessa rakennan samaan kokonaisuuteen sis\u00e4ll\u00f6t, monikielisen viestinn\u00e4n, markkinointimateriaalit ja jatkuvan yll\u00e4pidon. Pyyd\u00e4 tarjous \u2192 Tutustu verkkosivupalveluihin VERKKOSIVUT YRITYKSELLE Selke\u00e4 verkkoidentiteetti alkaa hyv\u00e4st\u00e4 rakenteesta. Yrityksen palvelut, sis\u00e4lt\u00f6 ja yhteydenotto rakennetaan asiakkaalle helposti ymm\u00e4rrett\u00e4v\u00e4ksi kokonaisuudeksi. Tutustu&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-44","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.suomenkompassi.fi\/index.php\/wp-json\/wp\/v2\/pages\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.suomenkompassi.fi\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.suomenkompassi.fi\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.suomenkompassi.fi\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.suomenkompassi.fi\/index.php\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":4,"href":"https:\/\/www.suomenkompassi.fi\/index.php\/wp-json\/wp\/v2\/pages\/44\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/www.suomenkompassi.fi\/index.php\/wp-json\/wp\/v2\/pages\/44\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/www.suomenkompassi.fi\/index.php\/wp-json\/wp\/v2\/media?parent=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}