{"id":91,"date":"2026-05-03T15:11:58","date_gmt":"2026-05-03T15:11:58","guid":{"rendered":"https:\/\/kasvumarkkinoija.fi\/?page_id=91"},"modified":"2026-05-03T15:33:34","modified_gmt":"2026-05-03T15:33:34","slug":"91-2","status":"publish","type":"page","link":"https:\/\/kasvumarkkinoija.fi\/","title":{"rendered":""},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"91\" class=\"elementor elementor-91\">\n\t\t\t\t<div class=\"elementor-element elementor-element-698802e e-flex e-con-boxed e-con e-parent\" data-id=\"698802e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dff84d1 elementor-widget elementor-widget-html\" data-id=\"dff84d1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cabinet+Grotesk:wght@400;500;700;800;900&family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n:root {\r\n  --ink: #0d0d0d;\r\n  --cream: #f5f2eb;\r\n  --lime: #c8f135;\r\n  --lime-dark: #9bbf1a;\r\n  --mist: #e8e4dc;\r\n  --stone: #6b6560;\r\n  --white: #fafaf8;\r\n}\r\n\r\n\/* Ylikirjoita WordPressin valkoinen tausta *\/\r\nhtml, body,\r\n.wp-site-blocks, .site, .site-content,\r\n#page, #content, #primary, #main,\r\n.entry-content, .post, .page,\r\n.elementor, .elementor-section-wrap,\r\n.elementor-widget-container,\r\n.wp-block-post-content {\r\n  background: #0d0d0d !important;\r\n  padding: 0 !important;\r\n  margin: 0 !important;\r\n  max-width: 100% !important;\r\n  width: 100% !important;\r\n}\r\n\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n.km2 {\r\n  font-family: 'DM Sans', sans-serif;\r\n  overflow-x: hidden;\r\n  width: 100%;\r\n  max-width: 100%;\r\n  background: var(--ink);\r\n  color: var(--white);\r\n}\r\n\r\n.km2 * { max-width: 100%; }\r\n.km2 a { text-decoration: none; }\r\n\r\n\/* ===================== HERO ===================== *\/\r\n.km2-hero {\r\n  min-height: 100svh;\r\n  background: var(--ink);\r\n  display: grid;\r\n  grid-template-rows: 1fr auto;\r\n  padding: 80px 6% 48px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* Animated grid background *\/\r\n.km2-hero::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image:\r\n    linear-gradient(rgba(200,241,53,0.04) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(200,241,53,0.04) 1px, transparent 1px);\r\n  background-size: 60px 60px;\r\n  animation: gridShift 20s linear infinite;\r\n  pointer-events: none;\r\n}\r\n\r\n@keyframes gridShift {\r\n  0% { transform: translateY(0); }\r\n  100% { transform: translateY(60px); }\r\n}\r\n\r\n\/* Glow orb *\/\r\n.km2-hero::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: -20%;\r\n  right: -10%;\r\n  width: 60vw;\r\n  height: 60vw;\r\n  background: radial-gradient(circle, rgba(200,241,53,0.08) 0%, transparent 65%);\r\n  pointer-events: none;\r\n  animation: orbPulse 6s ease-in-out infinite;\r\n}\r\n\r\n@keyframes orbPulse {\r\n  0%, 100% { transform: scale(1); opacity: 0.8; }\r\n  50% { transform: scale(1.1); opacity: 1; }\r\n}\r\n\r\n.km2-hero-content {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n  width: 100%;\r\n  display: grid;\r\n  grid-template-columns: 1.2fr 0.8fr;\r\n  gap: 60px;\r\n  align-items: center;\r\n}\r\n\r\n.km2-eyebrow {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-size: 0.72rem;\r\n  font-weight: 500;\r\n  letter-spacing: 0.12em;\r\n  text-transform: uppercase;\r\n  color: var(--lime);\r\n  margin-bottom: 32px;\r\n  opacity: 0;\r\n  animation: fadeUp 0.8s ease forwards 0.2s;\r\n}\r\n\r\n.km2-eyebrow::before {\r\n  content: '';\r\n  display: block;\r\n  width: 24px;\r\n  height: 1px;\r\n  background: var(--lime);\r\n}\r\n\r\n.km2-hero h1 {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: clamp(2.4rem, 5.5vw, 5.5rem);\r\n  font-weight: 900;\r\n  line-height: 1.0;\r\n  letter-spacing: -0.03em;\r\n  margin-bottom: 28px;\r\n  opacity: 0;\r\n  animation: fadeUp 0.8s ease forwards 0.4s;\r\n}\r\n\r\n.km2-hero h1 .italic {\r\n  font-family: 'Instrument Serif', serif;\r\n  font-style: italic;\r\n  font-weight: 400;\r\n  color: var(--lime);\r\n}\r\n\r\n.km2-hero-sub {\r\n  font-size: 1.05rem;\r\n  line-height: 1.75;\r\n  color: rgba(250,250,248,0.6);\r\n  font-weight: 300;\r\n  max-width: 480px;\r\n  margin-bottom: 44px;\r\n  opacity: 0;\r\n  animation: fadeUp 0.8s ease forwards 0.6s;\r\n}\r\n\r\n.km2-cta-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px;\r\n  flex-wrap: wrap;\r\n  opacity: 0;\r\n  animation: fadeUp 0.8s ease forwards 0.8s;\r\n}\r\n\r\n.km2-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  background: var(--lime);\r\n  color: var(--ink);\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-weight: 800;\r\n  font-size: 0.95rem;\r\n  padding: 16px 28px;\r\n  border-radius: 100px;\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s;\r\n  letter-spacing: -0.01em;\r\n}\r\n\r\n.km2-btn:hover {\r\n  transform: translateY(-3px) scale(1.02);\r\n  box-shadow: 0 12px 40px rgba(200,241,53,0.35);\r\n}\r\n\r\n.km2-btn-arrow {\r\n  width: 18px; height: 18px;\r\n  background: var(--ink);\r\n  border-radius: 50%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 0.75rem;\r\n  transition: transform 0.2s;\r\n}\r\n\r\n.km2-btn:hover .km2-btn-arrow { transform: rotate(45deg); }\r\n\r\n.km2-link {\r\n  font-size: 0.9rem;\r\n  color: rgba(250,250,248,0.5);\r\n  font-weight: 500;\r\n  transition: color 0.2s;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n.km2-link:hover { color: var(--white); }\r\n\r\n\/* Hero right \u2014 floating card *\/\r\n.km2-hero-card {\r\n  background: rgba(255,255,255,0.04);\r\n  border: 1px solid rgba(255,255,255,0.08);\r\n  border-radius: 20px;\r\n  padding: 28px;\r\n  backdrop-filter: blur(10px);\r\n  opacity: 0;\r\n  animation: fadeUp 0.8s ease forwards 1s;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.km2-hero-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 10%; right: 10%;\r\n  height: 1px;\r\n  background: linear-gradient(90deg, transparent, var(--lime), transparent);\r\n  opacity: 0.5;\r\n}\r\n\r\n.km2-card-tag {\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.1em;\r\n  text-transform: uppercase;\r\n  color: var(--lime);\r\n  margin-bottom: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n.km2-card-tag::before {\r\n  content: '';\r\n  width: 6px; height: 6px;\r\n  background: var(--lime);\r\n  border-radius: 50%;\r\n  animation: blink 2s ease infinite;\r\n}\r\n\r\n@keyframes blink {\r\n  0%, 100% { opacity: 1; }\r\n  50% { opacity: 0.3; }\r\n}\r\n\r\n.km2-hero-card h3 {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: 1.25rem;\r\n  font-weight: 800;\r\n  margin-bottom: 6px;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.km2-hero-card p {\r\n  font-size: 0.82rem;\r\n  color: rgba(250,250,248,0.5);\r\n  line-height: 1.6;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.km2-browser {\r\n  background: #111;\r\n  border-radius: 10px;\r\n  overflow: hidden;\r\n  border: 1px solid rgba(255,255,255,0.06);\r\n}\r\n\r\n.km2-browser-bar {\r\n  background: #1a1a1a;\r\n  padding: 10px 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n.km2-browser-dots { display: flex; gap: 5px; }\r\n.km2-browser-dots span { width: 8px; height: 8px; border-radius: 50%; }\r\n.km2-browser-dots span:nth-child(1) { background: #ff5f57; }\r\n.km2-browser-dots span:nth-child(2) { background: #febc2e; }\r\n.km2-browser-dots span:nth-child(3) { background: #28c840; }\r\n\r\n.km2-browser-url {\r\n  flex: 1;\r\n  background: rgba(255,255,255,0.04);\r\n  border-radius: 4px;\r\n  padding: 4px 10px;\r\n  font-size: 0.65rem;\r\n  color: rgba(255,255,255,0.25);\r\n  font-family: monospace;\r\n}\r\n\r\n.km2-browser-body { padding: 16px; }\r\n.km2-bline { height: 7px; background: rgba(200,241,53,0.25); border-radius: 4px; width: 75%; margin-bottom: 8px; }\r\n.km2-bline-s { height: 5px; background: rgba(255,255,255,0.07); border-radius: 4px; margin-bottom: 6px; }\r\n.km2-bline-s.w55 { width: 55%; }\r\n.km2-bline-s.w80 { width: 80%; }\r\n.km2-binput { height: 24px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; margin-bottom: 7px; }\r\n.km2-bbtn { height: 28px; background: var(--lime); border-radius: 5px; margin-top: 6px; }\r\n\r\n.km2-card-link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  font-size: 0.8rem;\r\n  color: var(--lime);\r\n  font-weight: 600;\r\n  margin-top: 16px;\r\n  transition: gap 0.2s;\r\n}\r\n\r\n.km2-card-link:hover { gap: 10px; }\r\n\r\n\/* Hero bottom bar *\/\r\n.km2-hero-bar {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n  width: 100%;\r\n  border-top: 1px solid rgba(255,255,255,0.08);\r\n  padding-top: 28px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: 20px;\r\n  flex-wrap: wrap;\r\n  opacity: 0;\r\n  animation: fadeUp 0.8s ease forwards 1.2s;\r\n}\r\n\r\n.km2-trust-items {\r\n  display: flex;\r\n  gap: 32px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.km2-trust-item {\r\n  font-size: 0.8rem;\r\n  color: rgba(250,250,248,0.4);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n.km2-trust-item::before {\r\n  content: '\u2713';\r\n  color: var(--lime);\r\n  font-size: 0.75rem;\r\n}\r\n\r\n@keyframes fadeUp {\r\n  from { opacity: 0; transform: translateY(24px); }\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* ===================== MARQUEE ===================== *\/\r\n.km2-marquee {\r\n  background: var(--lime);\r\n  padding: 14px 0;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n}\r\n\r\n.km2-marquee-track {\r\n  display: inline-flex;\r\n  animation: marqueeScroll 20s linear infinite;\r\n}\r\n\r\n.km2-marquee-item {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: 0.85rem;\r\n  font-weight: 700;\r\n  color: var(--ink);\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n  padding: 0 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n}\r\n\r\n.km2-marquee-item::after {\r\n  content: '\u25c6';\r\n  font-size: 0.5rem;\r\n  opacity: 0.5;\r\n}\r\n\r\n@keyframes marqueeScroll {\r\n  from { transform: translateX(0); }\r\n  to { transform: translateX(-50%); }\r\n}\r\n\r\n\/* ===================== SECTIONS ===================== *\/\r\n.km2-section { padding: 100px 6%; }\r\n.km2-inner { max-width: 1200px; margin: 0 auto; }\r\n\r\n.km2-section-label {\r\n  font-size: 0.72rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.12em;\r\n  text-transform: uppercase;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.km2-section-label::before {\r\n  content: '';\r\n  width: 20px; height: 1px;\r\n}\r\n\r\n\/* ===================== PROBLEM ===================== *\/\r\n.km2-problem {\r\n  background: var(--cream);\r\n  color: var(--ink);\r\n  padding: 100px 6%;\r\n}\r\n\r\n.km2-problem .km2-section-label { color: var(--lime-dark); }\r\n.km2-problem .km2-section-label::before { background: var(--lime-dark); }\r\n\r\n.km2-problem h2 {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: clamp(2rem, 4vw, 3.5rem);\r\n  font-weight: 900;\r\n  line-height: 1.1;\r\n  letter-spacing: -0.03em;\r\n  margin-bottom: 20px;\r\n  max-width: 700px;\r\n}\r\n\r\n.km2-problem-grid {\r\n  display: grid;\r\n  grid-template-columns: 1.2fr 0.8fr;\r\n  gap: 80px;\r\n  align-items: start;\r\n  margin-top: 56px;\r\n}\r\n\r\n.km2-problem p {\r\n  font-size: 1.05rem;\r\n  line-height: 1.8;\r\n  color: #444;\r\n  font-weight: 300;\r\n  margin-bottom: 32px;\r\n}\r\n\r\n.km2-stats-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 16px;\r\n}\r\n\r\n.km2-stat {\r\n  background: var(--ink);\r\n  border-radius: 16px;\r\n  padding: 24px 20px;\r\n  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);\r\n}\r\n\r\n.km2-stat:hover { transform: translateY(-4px); }\r\n\r\n.km2-stat-num {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: 2.4rem;\r\n  font-weight: 900;\r\n  color: var(--lime);\r\n  line-height: 1;\r\n  margin-bottom: 8px;\r\n  letter-spacing: -0.03em;\r\n}\r\n\r\n.km2-stat-desc { font-size: 0.78rem; color: rgba(250,250,248,0.5); line-height: 1.5; }\r\n\r\n\/* ===================== SERVICES ===================== *\/\r\n.km2-services {\r\n  background: var(--ink);\r\n  padding: 100px 6%;\r\n}\r\n\r\n.km2-services .km2-section-label { color: var(--lime); }\r\n.km2-services .km2-section-label::before { background: var(--lime); }\r\n\r\n.km2-services-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-end;\r\n  margin-bottom: 56px;\r\n  gap: 40px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.km2-services h2 {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: clamp(2rem, 4vw, 3.5rem);\r\n  font-weight: 900;\r\n  line-height: 1.1;\r\n  letter-spacing: -0.03em;\r\n  max-width: 500px;\r\n}\r\n\r\n.km2-services-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3,1fr);\r\n  gap: 20px;\r\n}\r\n\r\n.km2-service {\r\n  background: rgba(255,255,255,0.03);\r\n  border: 1px solid rgba(255,255,255,0.07);\r\n  border-radius: 20px;\r\n  padding: 36px 28px;\r\n  transition: background 0.3s, border-color 0.3s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.km2-service::before {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: 0; left: 0; right: 0;\r\n  height: 2px;\r\n  background: var(--lime);\r\n  transform: scaleX(0);\r\n  transform-origin: left;\r\n  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);\r\n}\r\n\r\n.km2-service:hover {\r\n  background: rgba(200,241,53,0.04);\r\n  border-color: rgba(200,241,53,0.2);\r\n  transform: translateY(-6px);\r\n}\r\n\r\n.km2-service:hover::before { transform: scaleX(1); }\r\n\r\n.km2-service-num {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: 0.72rem;\r\n  font-weight: 700;\r\n  color: rgba(200,241,53,0.3);\r\n  letter-spacing: 0.1em;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.km2-service-icon {\r\n  font-size: 2rem;\r\n  margin-bottom: 20px;\r\n  display: block;\r\n}\r\n\r\n.km2-service h3 {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: 1.2rem;\r\n  font-weight: 800;\r\n  margin-bottom: 12px;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.km2-service p { font-size: 0.875rem; line-height: 1.7; color: rgba(250,250,248,0.5); }\r\n\r\n\/* ===================== DEMO ===================== *\/\r\n.km2-demo {\r\n  background: var(--cream);\r\n  color: var(--ink);\r\n  padding: 100px 6%;\r\n}\r\n\r\n.km2-demo .km2-section-label { color: var(--lime-dark); }\r\n.km2-demo .km2-section-label::before { background: var(--lime-dark); }\r\n\r\n.km2-demo-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 80px;\r\n  align-items: center;\r\n  margin-top: 56px;\r\n}\r\n\r\n.km2-demo h2 {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: clamp(2rem, 3.5vw, 3rem);\r\n  font-weight: 900;\r\n  line-height: 1.1;\r\n  letter-spacing: -0.03em;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.km2-demo p {\r\n  font-size: 1rem;\r\n  line-height: 1.8;\r\n  color: #555;\r\n  font-weight: 300;\r\n  margin-bottom: 32px;\r\n}\r\n\r\n.km2-demo-note {\r\n  font-size: 0.75rem !important;\r\n  color: #aaa !important;\r\n  margin-top: 12px !important;\r\n}\r\n\r\n.km2-demo-mockup {\r\n  background: var(--ink);\r\n  border-radius: 20px;\r\n  overflow: hidden;\r\n  box-shadow: 0 40px 80px rgba(0,0,0,0.2);\r\n  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);\r\n}\r\n\r\n.km2-demo-mockup:hover { transform: translateY(-8px) rotate(1deg); }\r\n\r\n\/* ===================== PRICING ===================== *\/\r\n.km2-pricing {\r\n  background: var(--ink);\r\n  padding: 100px 6%;\r\n}\r\n\r\n.km2-pricing .km2-section-label { color: var(--lime); }\r\n.km2-pricing .km2-section-label::before { background: var(--lime); }\r\n\r\n.km2-pricing h2 {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: clamp(2rem, 4vw, 3.5rem);\r\n  font-weight: 900;\r\n  line-height: 1.1;\r\n  letter-spacing: -0.03em;\r\n  margin-bottom: 56px;\r\n}\r\n\r\n.km2-pricing-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 24px;\r\n  max-width: 760px;\r\n}\r\n\r\n.km2-price-card {\r\n  border-radius: 24px;\r\n  padding: 40px 36px;\r\n  border: 1px solid rgba(255,255,255,0.08);\r\n  background: rgba(255,255,255,0.03);\r\n  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);\r\n}\r\n\r\n.km2-price-card:hover { transform: translateY(-6px); }\r\n\r\n.km2-price-card.featured {\r\n  background: var(--lime);\r\n  color: var(--ink);\r\n  border-color: transparent;\r\n}\r\n\r\n.km2-price-card.featured .km2-plabel { color: rgba(13,13,13,0.5); }\r\n.km2-price-card.featured .km2-price-val { color: var(--ink); }\r\n.km2-price-card.featured .km2-price-per { color: rgba(13,13,13,0.6); }\r\n.km2-price-card.featured li { color: rgba(13,13,13,0.75); }\r\n.km2-price-card.featured li::before { color: var(--ink); }\r\n\r\n.km2-plabel {\r\n  font-size: 0.72rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.1em;\r\n  text-transform: uppercase;\r\n  color: rgba(250,250,248,0.4);\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.km2-price-val {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: 3rem;\r\n  font-weight: 900;\r\n  color: var(--lime);\r\n  line-height: 1;\r\n  letter-spacing: -0.04em;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.km2-price-per {\r\n  font-size: 0.8rem;\r\n  color: rgba(250,250,248,0.4);\r\n  margin-bottom: 32px;\r\n}\r\n\r\n.km2-price-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }\r\n\r\n.km2-price-card li {\r\n  font-size: 0.875rem;\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 10px;\r\n  line-height: 1.4;\r\n  color: rgba(250,250,248,0.65);\r\n}\r\n\r\n.km2-price-card li::before {\r\n  content: '\u2192';\r\n  color: var(--lime);\r\n  font-weight: 700;\r\n  flex-shrink: 0;\r\n}\r\n\r\n\/* ===================== PROCESS ===================== *\/\r\n.km2-process {\r\n  background: var(--cream);\r\n  color: var(--ink);\r\n  padding: 100px 6%;\r\n}\r\n\r\n.km2-process .km2-section-label { color: var(--lime-dark); }\r\n.km2-process .km2-section-label::before { background: var(--lime-dark); }\r\n\r\n.km2-process h2 {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: clamp(2rem, 4vw, 3.5rem);\r\n  font-weight: 900;\r\n  line-height: 1.1;\r\n  letter-spacing: -0.03em;\r\n  margin-bottom: 56px;\r\n}\r\n\r\n.km2-process-steps {\r\n  display: grid;\r\n  grid-template-columns: repeat(4,1fr);\r\n  gap: 0;\r\n  border: 1px solid rgba(0,0,0,0.1);\r\n  border-radius: 20px;\r\n  overflow: hidden;\r\n}\r\n\r\n.km2-step {\r\n  padding: 36px 28px;\r\n  border-right: 1px solid rgba(0,0,0,0.1);\r\n  transition: background 0.3s;\r\n  position: relative;\r\n}\r\n\r\n.km2-step:last-child { border-right: none; }\r\n.km2-step:hover { background: var(--ink); color: var(--white); }\r\n.km2-step:hover .km2-step-desc { color: rgba(250,250,248,0.5); }\r\n\r\n.km2-step-n {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: 0.72rem;\r\n  font-weight: 700;\r\n  color: rgba(13,13,13,0.25);\r\n  letter-spacing: 0.1em;\r\n  margin-bottom: 40px;\r\n  transition: color 0.3s;\r\n}\r\n\r\n.km2-step:hover .km2-step-n { color: rgba(200,241,53,0.4); }\r\n\r\n.km2-step h3 {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: 1rem;\r\n  font-weight: 800;\r\n  margin-bottom: 10px;\r\n  letter-spacing: -0.01em;\r\n}\r\n\r\n.km2-step-desc { font-size: 0.82rem; color: #777; line-height: 1.6; transition: color 0.3s; }\r\n\r\n\/* ===================== CONTACT ===================== *\/\r\n.km2-contact {\r\n  background: var(--ink);\r\n  padding: 100px 6%;\r\n}\r\n\r\n.km2-contact .km2-section-label { color: var(--lime); }\r\n.km2-contact .km2-section-label::before { background: var(--lime); }\r\n\r\n.km2-contact h2 {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-size: clamp(2rem, 4vw, 3.5rem);\r\n  font-weight: 900;\r\n  line-height: 1.1;\r\n  letter-spacing: -0.03em;\r\n  margin-bottom: 56px;\r\n  max-width: 700px;\r\n}\r\n\r\n.km2-contact-grid {\r\n  display: grid;\r\n  grid-template-columns: 0.8fr 1.2fr;\r\n  gap: 80px;\r\n  align-items: start;\r\n}\r\n\r\n.km2-contact-info p {\r\n  font-size: 1rem;\r\n  line-height: 1.8;\r\n  color: rgba(250,250,248,0.55);\r\n  font-weight: 300;\r\n  margin-bottom: 36px;\r\n}\r\n\r\n.km2-contact-detail {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 14px;\r\n  margin-bottom: 18px;\r\n}\r\n\r\n.km2-contact-icon {\r\n  width: 40px; height: 40px;\r\n  background: rgba(200,241,53,0.1);\r\n  border: 1px solid rgba(200,241,53,0.2);\r\n  border-radius: 10px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 1rem;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.km2-contact-detail a {\r\n  font-size: 0.9rem;\r\n  color: rgba(250,250,248,0.7);\r\n  transition: color 0.2s;\r\n}\r\n\r\n.km2-contact-detail a:hover { color: var(--lime); }\r\n\r\n\/* Form *\/\r\n.km2-form-group { margin-bottom: 16px; }\r\n\r\n.km2-form-group label {\r\n  display: block;\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n  color: rgba(250,250,248,0.4);\r\n  margin-bottom: 8px;\r\n  letter-spacing: 0.06em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.km2-form-group input,\r\n.km2-form-group textarea {\r\n  width: 100%;\r\n  padding: 14px 18px;\r\n  background: rgba(255,255,255,0.04);\r\n  border: 1px solid rgba(255,255,255,0.1);\r\n  border-radius: 12px;\r\n  font-family: 'DM Sans', sans-serif;\r\n  font-size: 0.95rem;\r\n  color: var(--white);\r\n  outline: none;\r\n  transition: border-color 0.2s, background 0.2s;\r\n}\r\n\r\n.km2-form-group input::placeholder,\r\n.km2-form-group textarea::placeholder { color: rgba(250,250,248,0.2); }\r\n\r\n.km2-form-group input:focus,\r\n.km2-form-group textarea:focus {\r\n  border-color: rgba(200,241,53,0.4);\r\n  background: rgba(200,241,53,0.03);\r\n}\r\n\r\n.km2-form-group textarea { height: 130px; resize: vertical; }\r\n.km2-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n\r\n.km2-submit {\r\n  width: 100%;\r\n  padding: 18px;\r\n  background: var(--lime);\r\n  color: var(--ink);\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-weight: 800;\r\n  font-size: 1rem;\r\n  border: none;\r\n  border-radius: 100px;\r\n  cursor: pointer;\r\n  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s;\r\n  margin-top: 8px;\r\n  letter-spacing: -0.01em;\r\n}\r\n\r\n.km2-submit:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 12px 40px rgba(200,241,53,0.3);\r\n}\r\n\r\n\/* ===================== FOOTER ===================== *\/\r\n.km2-footer {\r\n  background: #080808;\r\n  padding: 36px 6%;\r\n  border-top: 1px solid rgba(255,255,255,0.06);\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 16px;\r\n}\r\n\r\n.km2-footer-logo {\r\n  font-family: 'Cabinet Grotesk', sans-serif;\r\n  font-weight: 900;\r\n  font-size: 1.1rem;\r\n  color: var(--white);\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.km2-footer-logo span { color: var(--lime); }\r\n.km2-footer p { font-size: 0.78rem; color: rgba(250,250,248,0.3); }\r\n\r\n\/* ===================== SCROLL ANIMATIONS ===================== *\/\r\n.km2-reveal {\r\n  opacity: 0;\r\n  transform: translateY(32px);\r\n  transition: opacity 0.7s ease, transform 0.7s ease;\r\n}\r\n\r\n.km2-reveal.visible {\r\n  opacity: 1;\r\n  transform: none;\r\n}\r\n\r\n.km2-reveal-delay-1 { transition-delay: 0.1s; }\r\n.km2-reveal-delay-2 { transition-delay: 0.2s; }\r\n.km2-reveal-delay-3 { transition-delay: 0.3s; }\r\n\r\n\/* ===================== MOBILE ===================== *\/\r\n@media (max-width: 768px) {\r\n  .km2 { overflow-x: hidden; }\r\n  .km2 * { word-break: break-word; }\r\n\r\n  .km2-hero { padding: 48px 5% 40px; min-height: auto; }\r\n  .km2-hero-content { grid-template-columns: 1fr; gap: 0; }\r\n  .km2-hero-card { display: none; }\r\n  .km2-hero h1 { font-size: clamp(2rem, 9vw, 3rem); }\r\n  .km2-hero-sub { font-size: 0.95rem; }\r\n  .km2-cta-row { flex-direction: column; align-items: stretch; }\r\n  .km2-btn { justify-content: center; }\r\n  .km2-link { justify-content: center; }\r\n  .km2-hero-bar { display: none; }\r\n\r\n  .km2-section { padding: 64px 5%; }\r\n  .km2-problem { padding: 64px 5%; }\r\n  .km2-services { padding: 64px 5%; }\r\n  .km2-demo { padding: 64px 5%; }\r\n  .km2-pricing { padding: 64px 5%; }\r\n  .km2-process { padding: 64px 5%; }\r\n  .km2-contact { padding: 64px 5%; }\r\n\r\n  .km2-problem h2,\r\n  .km2-services h2,\r\n  .km2-demo h2,\r\n  .km2-pricing h2,\r\n  .km2-process h2,\r\n  .km2-contact h2 {\r\n    font-size: clamp(1.8rem, 8vw, 2.5rem);\r\n  }\r\n\r\n  .km2-problem-grid { grid-template-columns: 1fr; gap: 40px; }\r\n  .km2-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }\r\n  .km2-stat-num { font-size: 2rem; }\r\n\r\n  .km2-services-grid { grid-template-columns: 1fr; gap: 14px; }\r\n  .km2-services-header { flex-direction: column; align-items: flex-start; }\r\n\r\n  .km2-demo-grid { grid-template-columns: 1fr; gap: 40px; }\r\n  .km2-demo-mockup { display: none; }\r\n\r\n  .km2-pricing-grid { grid-template-columns: 1fr; max-width: 100%; }\r\n  .km2-price-val { font-size: 2.4rem; }\r\n\r\n  .km2-process-steps { grid-template-columns: 1fr 1fr; border-radius: 16px; }\r\n  .km2-step { border-bottom: 1px solid rgba(0,0,0,0.1); }\r\n  .km2-step:nth-child(2n) { border-right: none; }\r\n  .km2-step:nth-last-child(-n+2) { border-bottom: none; }\r\n\r\n  .km2-contact-grid { grid-template-columns: 1fr; gap: 40px; }\r\n  .km2-form-row { grid-template-columns: 1fr; }\r\n\r\n  .km2-footer { flex-direction: column; text-align: center; gap: 8px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"km2\">\r\n\r\n<!-- HERO -->\r\n<div class=\"km2-hero\">\r\n  <div class=\"km2-hero-content\">\r\n    <div>\r\n      <div class=\"km2-eyebrow\">Nettisivut pienyrityksille<\/div>\r\n      <h1>Myyv\u00e4t sivut,<br>jotka tuovat<br><span class=\"italic\">yhteydenottoja<\/span><\/h1>\r\n      <p class=\"km2-hero-sub\">Rakennan pienyrityksille selke\u00e4t nettisivut, liidisivut ja lomakkeet \u2014 ilman raskasta mainostoimistoprojektia.<\/p>\r\n      <div class=\"km2-cta-row\">\r\n        <a href=\"#yhteys\" class=\"km2-btn\">\r\n          Pyyd\u00e4 tarjous\r\n          <span class=\"km2-btn-arrow\">\u2192<\/span>\r\n        <\/a>\r\n        <a href=\"#demot\" class=\"km2-link\">Katso demot \u2193<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"km2-hero-card\">\r\n      <div class=\"km2-card-tag\">Live demo<\/div>\r\n      <h3>Kattotarjous24<\/h3>\r\n      <p>Tarjouspyynt\u00f6sivu kattoremonttiyritykselle \u2014 ker\u00e4\u00e4 liidit suoraan s\u00e4hk\u00f6postiin.<\/p>\r\n      <div class=\"km2-browser\">\r\n        <div class=\"km2-browser-bar\">\r\n          <div class=\"km2-browser-dots\"><span><\/span><span><\/span><span><\/span><\/div>\r\n          <div class=\"km2-browser-url\">kattotarjous24.fi<\/div>\r\n        <\/div>\r\n        <div class=\"km2-browser-body\">\r\n          <div class=\"km2-bline\"><\/div>\r\n          <div class=\"km2-bline-s w80\"><\/div>\r\n          <div class=\"km2-bline-s w55\"><\/div>\r\n          <div class=\"km2-binput\"><\/div>\r\n          <div class=\"km2-binput\"><\/div>\r\n          <div class=\"km2-binput\"><\/div>\r\n          <div class=\"km2-bbtn\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <a href=\"#demot\" class=\"km2-card-link\">Avaa demo \u2192<\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"km2-hero-bar\">\r\n    <div class=\"km2-trust-items\">\r\n      <span class=\"km2-trust-item\">Toimitus 1 viikossa<\/span>\r\n      <span class=\"km2-trust-item\">Mobiilioptimoitu<\/span>\r\n      <span class=\"km2-trust-item\">Lomake toimii heti<\/span>\r\n      <span class=\"km2-trust-item\">Ei pitk\u00e4\u00e4 projektia<\/span>\r\n    <\/div>\r\n    <div style=\"font-size:0.8rem;color:rgba(250,250,248,0.3);\">alkaen 390 \u20ac<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- MARQUEE -->\r\n<div class=\"km2-marquee\">\r\n  <div class=\"km2-marquee-track\">\r\n    <span class=\"km2-marquee-item\">Kattourakoitsijat<\/span>\r\n    <span class=\"km2-marquee-item\">Siivousyritykset<\/span>\r\n    <span class=\"km2-marquee-item\">Parturit<\/span>\r\n    <span class=\"km2-marquee-item\">Kuntosalit<\/span>\r\n    <span class=\"km2-marquee-item\">Remonttifirmat<\/span>\r\n    <span class=\"km2-marquee-item\">Kahvilat<\/span>\r\n    <span class=\"km2-marquee-item\">Kattourakoitsijat<\/span>\r\n    <span class=\"km2-marquee-item\">Siivousyritykset<\/span>\r\n    <span class=\"km2-marquee-item\">Parturit<\/span>\r\n    <span class=\"km2-marquee-item\">Kuntosalit<\/span>\r\n    <span class=\"km2-marquee-item\">Remonttifirmat<\/span>\r\n    <span class=\"km2-marquee-item\">Kahvilat<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- PROBLEM -->\r\n<div class=\"km2-problem\" id=\"palvelut\">\r\n  <div class=\"km2-inner\">\r\n    <div class=\"km2-section-label km2-reveal\">Miksi t\u00e4ll\u00e4 on v\u00e4li\u00e4<\/div>\r\n    <h2 class=\"km2-reveal km2-reveal-delay-1\">Hyv\u00e4 yritys menett\u00e4\u00e4 asiakkaita, jos sivu ei her\u00e4t\u00e4 luottamusta<\/h2>\r\n    <div class=\"km2-problem-grid\">\r\n      <div class=\"km2-reveal km2-reveal-delay-2\">\r\n        <p>Monella pienyrityksell\u00e4 nettisivu on vanha, sekava tai sit\u00e4 ei ole ollenkaan. Asiakas ei l\u00f6yd\u00e4 palvelua, ei ymm\u00e4rr\u00e4 mit\u00e4 yritys tarjoaa eik\u00e4 j\u00e4t\u00e4 yhteydenottoa.<\/p>\r\n        <p>Kasvumarkkinoija tekee sivusta selke\u00e4n ja yhteydenoton helpoksi \u2014 ilman kallista mainostoimistoprojektia.<\/p>\r\n      <\/div>\r\n      <div class=\"km2-stats-grid km2-reveal km2-reveal-delay-3\">\r\n        <div class=\"km2-stat\"><div class=\"km2-stat-num\">75%<\/div><div class=\"km2-stat-desc\">kuluttajista arvioi luotettavuuden nettisivun perusteella<\/div><\/div>\r\n        <div class=\"km2-stat\"><div class=\"km2-stat-num\">3s<\/div><div class=\"km2-stat-desc\">aikaa her\u00e4tt\u00e4\u00e4 kiinnostus ennen kuin asiakas siirtyy<\/div><\/div>\r\n        <div class=\"km2-stat\"><div class=\"km2-stat-num\">390\u20ac<\/div><div class=\"km2-stat-desc\">alkaen \u2014 sivu joka tuo yhteydenottoja<\/div><\/div>\r\n        <div class=\"km2-stat\"><div class=\"km2-stat-num\">1vko<\/div><div class=\"km2-stat-desc\">tyypillinen toimitusaika ensimm\u00e4iseen versioon<\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- SERVICES -->\r\n<div class=\"km2-services\">\r\n  <div class=\"km2-inner\">\r\n    <div class=\"km2-services-header\">\r\n      <div>\r\n        <div class=\"km2-section-label km2-reveal\">Mit\u00e4 teen<\/div>\r\n        <h2 class=\"km2-reveal km2-reveal-delay-1\">Kolme tapaa auttaa yrityst\u00e4si<\/h2>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"km2-services-grid\">\r\n      <div class=\"km2-service km2-reveal\">\r\n        <div class=\"km2-service-num\">01<\/div>\r\n        <span class=\"km2-service-icon\">\ud83c\udf10<\/span>\r\n        <h3>Nettisivut pienyrityksille<\/h3>\r\n        <p>Selke\u00e4 ja mobiiliyst\u00e4v\u00e4llinen sivu yritykselle, joka haluaa n\u00e4ytt\u00e4\u00e4 luotettavalta ja saada enemm\u00e4n yhteydenottoja.<\/p>\r\n      <\/div>\r\n      <div class=\"km2-service km2-reveal km2-reveal-delay-1\">\r\n        <div class=\"km2-service-num\">02<\/div>\r\n        <span class=\"km2-service-icon\">\ud83c\udfaf<\/span>\r\n        <h3>Liidisivut ja kampanjasivut<\/h3>\r\n        <p>Yksitt\u00e4inen sivu tietylle palvelulle, kuten kattoremontti, siivous, parturi tai remonttipalvelu.<\/p>\r\n      <\/div>\r\n      <div class=\"km2-service km2-reveal km2-reveal-delay-2\">\r\n        <div class=\"km2-service-num\">03<\/div>\r\n        <span class=\"km2-service-icon\">\ud83d\udcec<\/span>\r\n        <h3>Yhteydenottolomakkeet<\/h3>\r\n        <p>Lomake, joka ker\u00e4\u00e4 asiakkaan tiedot suoraan s\u00e4hk\u00f6postiin. Nopea tapa alkaa vastaanottaa liidej\u00e4.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- DEMO -->\r\n<div class=\"km2-demo\" id=\"demot\">\r\n  <div class=\"km2-inner\">\r\n    <div class=\"km2-section-label km2-reveal\">Esimerkkidemo<\/div>\r\n    <div class=\"km2-demo-grid\">\r\n      <div class=\"km2-reveal km2-reveal-delay-1\">\r\n        <h2>Katso milt\u00e4 valmis liidisivu n\u00e4ytt\u00e4\u00e4<\/h2>\r\n        <p>Kattotarjous24-demo n\u00e4ytt\u00e4\u00e4, miten kattoremonttipalvelulle voidaan rakentaa sivu, joka ker\u00e4\u00e4 asiakkaalta katon tiedot, paikkakunnan, aikataulun ja yhteystiedot \u2014 suoraan s\u00e4hk\u00f6postiin.<\/p>\r\n        <a href=\"https:\/\/kattotarjous24.fi\" target=\"_blank\" class=\"km2-btn\" style=\"background:var(--ink);color:var(--white);\">\r\n          Katso Kattotarjous24-demo\r\n          <span class=\"km2-btn-arrow\" style=\"background:var(--lime);color:var(--ink);\">\u2192<\/span>\r\n        <\/a>\r\n        <p class=\"km2-demo-note\">Demo on esimerkkisivusto, ei oikea kattoremonttiyritys.<\/p>\r\n      <\/div>\r\n      <div class=\"km2-demo-mockup km2-reveal km2-reveal-delay-2\">\r\n        <div class=\"km2-browser-bar\" style=\"background:#1a1a1a;\">\r\n          <div class=\"km2-browser-dots\"><span><\/span><span><\/span><span><\/span><\/div>\r\n          <div class=\"km2-browser-url\">kattotarjous24.fi<\/div>\r\n        <\/div>\r\n        <div style=\"padding:28px;background:#111;\">\r\n          <div class=\"km2-bline\"><\/div>\r\n          <div class=\"km2-bline-s w80\"><\/div>\r\n          <div class=\"km2-bline-s w55\"><\/div>\r\n          <div style=\"margin-top:16px;display:grid;gap:10px;\">\r\n            <div class=\"km2-binput\"><\/div>\r\n            <div class=\"km2-binput\"><\/div>\r\n            <div class=\"km2-binput\"><\/div>\r\n            <div class=\"km2-binput\"><\/div>\r\n            <div class=\"km2-bbtn\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- PRICING -->\r\n<div class=\"km2-pricing\" id=\"hinnat\">\r\n  <div class=\"km2-inner\">\r\n    <div class=\"km2-section-label km2-reveal\">Hinnoittelu<\/div>\r\n    <h2 class=\"km2-reveal km2-reveal-delay-1\">Selke\u00e4 hinnoittelu alkuun<\/h2>\r\n    <div class=\"km2-pricing-grid\">\r\n      <div class=\"km2-price-card featured km2-reveal km2-reveal-delay-1\">\r\n        <div class=\"km2-plabel\">Aloituspaketti<\/div>\r\n        <div class=\"km2-price-val\">390\u20ac<\/div>\r\n        <div class=\"km2-price-per\">kertamaksu<\/div>\r\n        <ul>\r\n          <li>Yhden sivun sivusto<\/li>\r\n          <li>Mobiilioptimointi<\/li>\r\n          <li>Yhteydenottolomake<\/li>\r\n          <li>Julkaisu omalle domainille<\/li>\r\n          <li>Perustekstit mukana<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n      <div class=\"km2-price-card km2-reveal km2-reveal-delay-2\">\r\n        <div class=\"km2-plabel\">Yll\u00e4pito<\/div>\r\n        <div class=\"km2-price-val\">49\u20ac<\/div>\r\n        <div class=\"km2-price-per\">kuukaudessa<\/div>\r\n        <ul>\r\n          <li>Pienet tekstimuutokset<\/li>\r\n          <li>Lomakkeen toiminnan tarkistus<\/li>\r\n          <li>Tekninen yll\u00e4pito<\/li>\r\n          <li>Kevyt raportointi<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- PROCESS -->\r\n<div class=\"km2-process\">\r\n  <div class=\"km2-inner\">\r\n    <div class=\"km2-section-label km2-reveal\">Miten se toimii<\/div>\r\n    <h2 class=\"km2-reveal km2-reveal-delay-1\">N\u00e4in etenemme<\/h2>\r\n    <div class=\"km2-process-steps km2-reveal km2-reveal-delay-2\">\r\n      <div class=\"km2-step\">\r\n        <div class=\"km2-step-n\">01<\/div>\r\n        <h3>Katsotaan tarve<\/h3>\r\n        <p class=\"km2-step-desc\">Selvitet\u00e4\u00e4n millainen sivu sopii yrityksellesi.<\/p>\r\n      <\/div>\r\n      <div class=\"km2-step\">\r\n        <div class=\"km2-step-n\">02<\/div>\r\n        <h3>Sivurakenne ja tekstit<\/h3>\r\n        <p class=\"km2-step-desc\">Teen nopean ehdotuksen jota voit muokata.<\/p>\r\n      <\/div>\r\n      <div class=\"km2-step\">\r\n        <div class=\"km2-step-n\">03<\/div>\r\n        <h3>Julkaisu ja testaus<\/h3>\r\n        <p class=\"km2-step-desc\">Sivusto julkaistaan domainillesi ja lomake testataan.<\/p>\r\n      <\/div>\r\n      <div class=\"km2-step\">\r\n        <div class=\"km2-step-n\">04<\/div>\r\n        <h3>Yhteydenottoja sis\u00e4\u00e4n<\/h3>\r\n        <p class=\"km2-step-desc\">Voit ohjata asiakkaat suoraan sivulle.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- CONTACT -->\r\n<div class=\"km2-contact\" id=\"yhteys\">\r\n  <div class=\"km2-inner\">\r\n    <div class=\"km2-section-label km2-reveal\">Ota yhteytt\u00e4<\/div>\r\n    <h2 class=\"km2-reveal km2-reveal-delay-1\">Haluatko sivun, joka tuo enemm\u00e4n yhteydenottoja?<\/h2>\r\n    <div class=\"km2-contact-grid\">\r\n      <div class=\"km2-reveal km2-reveal-delay-1\">\r\n        <p>L\u00e4het\u00e4 viesti, niin katsotaan nopeasti millainen sivu sopisi yrityksellesi. Ei sitoumuksia, ei pitk\u00e4\u00e4 projektia.<\/p>\r\n        <div class=\"km2-contact-detail\">\r\n          <div class=\"km2-contact-icon\">\u2709\ufe0f<\/div>\r\n          <a href=\"mailto:info@kasvumarkkinoija.fi\">info@kasvumarkkinoija.fi<\/a>\r\n        <\/div>\r\n        <div class=\"km2-contact-detail\">\r\n          <div class=\"km2-contact-icon\">\ud83d\udcf1<\/div>\r\n          <a href=\"tel:+358451528637\">+358 45 152 8637<\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <form action=\"https:\/\/formspree.io\/f\/xdabajke\" method=\"POST\" class=\"km2-reveal km2-reveal-delay-2\">\r\n        <div class=\"km2-form-row\">\r\n          <div class=\"km2-form-group\"><label>Nimi<\/label><input type=\"text\" name=\"nimi\" required placeholder=\"Matti Meik\u00e4l\u00e4inen\"><\/div>\r\n          <div class=\"km2-form-group\"><label>Yritys<\/label><input type=\"text\" name=\"yritys\" placeholder=\"Yritys Oy\"><\/div>\r\n        <\/div>\r\n        <div class=\"km2-form-row\">\r\n          <div class=\"km2-form-group\"><label>S\u00e4hk\u00f6posti<\/label><input type=\"email\" name=\"email\" required placeholder=\"matti@yritys.fi\"><\/div>\r\n          <div class=\"km2-form-group\"><label>Puhelin<\/label><input type=\"tel\" name=\"puhelin\" placeholder=\"+358 40 123 4567\"><\/div>\r\n        <\/div>\r\n        <div class=\"km2-form-group\"><label>Viesti<\/label><textarea name=\"viesti\" placeholder=\"Kerro lyhyesti millaista sivua tarvitset...\"><\/textarea><\/div>\r\n        <button type=\"submit\" class=\"km2-submit\">L\u00e4het\u00e4 yhteydenotto \u2192<\/button>\r\n      <\/form>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- FOOTER -->\r\n<div class=\"km2-footer\">\r\n  <div class=\"km2-footer-logo\">Kasvu<span>markkinoija<\/span><\/div>\r\n  <p>Nettisivut ja liidisivut pienyrityksille.<\/p>\r\n  <p>\u00a9 2026 Kasvumarkkinoija<\/p>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst observer = new IntersectionObserver((entries) => {\r\n  entries.forEach(e => {\r\n    if (e.isIntersecting) {\r\n      e.target.classList.add('visible');\r\n    }\r\n  });\r\n}, { threshold: 0.08 });\r\n\r\ndocument.querySelectorAll('.km2-reveal').forEach(el => observer.observe(el));\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nettisivut pienyrityksille Myyv\u00e4t sivut,jotka tuovatyhteydenottoja Rakennan pienyrityksille selke\u00e4t nettisivut, liidisivut ja lomakkeet \u2014 ilman raskasta mainostoimistoprojektia. Pyyd\u00e4 tarjous \u2192 Katso demot \u2193 Live demo Kattotarjous24 Tarjouspyynt\u00f6sivu kattoremonttiyritykselle \u2014 ker\u00e4\u00e4 liidit suoraan s\u00e4hk\u00f6postiin. kattotarjous24.fi Avaa demo \u2192 Toimitus 1 viikossa Mobiilioptimoitu Lomake toimii heti Ei pitk\u00e4\u00e4 projektia alkaen 390 \u20ac Kattourakoitsijat Siivousyritykset Parturit Kuntosalit Remonttifirmat Kahvilat [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-91","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kasvumarkkinoija.fi\/index.php?rest_route=\/wp\/v2\/pages\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kasvumarkkinoija.fi\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kasvumarkkinoija.fi\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kasvumarkkinoija.fi\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kasvumarkkinoija.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=91"}],"version-history":[{"count":10,"href":"https:\/\/kasvumarkkinoija.fi\/index.php?rest_route=\/wp\/v2\/pages\/91\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/kasvumarkkinoija.fi\/index.php?rest_route=\/wp\/v2\/pages\/91\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/kasvumarkkinoija.fi\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}