{"id":7312,"date":"2026-09-27T15:39:57","date_gmt":"2026-09-27T12:39:57","guid":{"rendered":"https:\/\/digiverkosto.fi\/?page_id=7312"},"modified":"2026-11-08T16:04:11","modified_gmt":"2026-11-08T14:04:11","slug":"verkkosivut","status":"publish","type":"page","link":"https:\/\/digiverkosto.fi\/en\/verkkosivut\/","title":{"rendered":"Websites"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-container-core-group-is-layout-9f310aa7 wp-block-group-is-layout-flow\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<style data-wp-block-html=\"css\">\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@1,600&display=swap');\n\n.hero-script {\n  font-family: 'Cormorant Garamond', serif;\n  font-style: italic;\n  font-weight: 600;\n  font-size: 1.25em;\n  letter-spacing: -0.01em;\n  display: inline-block;\n  padding: 0 4px;\n}\n\n.hero-section {\n  background: transparent;\n  width: 100%;\n  padding: 80px 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  box-sizing: border-box;\n}\n\n.hero-content {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.hero-subtitle {\n  font-size: 1.1rem;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n  margin-bottom: 12px;\n  opacity: 0.9;\n}\n\n.hero-title {\n  font-size: 3rem;\n  line-height: 1.2;\n  margin-bottom: 20px;\n  font-weight: 700;\n}\n\n.hero-description {\n  font-size: 1.2rem;\n  line-height: 1.6;\n  margin-bottom: 35px;\n  opacity: 0.85;\n  max-width: 650px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.hero-actions {\n  display: flex;\n  justify-content: center;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n.c-button {\n  background: linear-gradient(140deg, rgba(75, 118, 200, 1) 0%, rgba(31, 70, 145, 1) 100%);\n  border-radius: 45px;\n  font-size: 22px;\n  text-align: left;\n  padding: 11px 0px 11px 0px;\n  border: 4px solid rgb(37, 37, 37) !important;\n  border-style: outset;\n  box-shadow: -6px -5px 18px rgba(255, 255, 255, 0.1);\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.c-button .c-main {\n  border-radius: 45px;\n  color: rgba(255, 255, 255, 1);\n  padding: 11px 25px 11px 2px;\n  box-shadow: inset 0px 0px 5px rgba(17, 17, 17, 0);\n  transition: all 0.5s ease-in-out;\n  border: 1px solid transparent;\n}\n\n.c-ico {\n  position: relative;\n  margin-right: 20px;\n}\n\n.c-ico .c-blur {\n  background: linear-gradient(318deg, rgba(75, 118, 200, 1) 0%, rgba(31, 70, 145, 1) 100%);\n  border-radius: 100%;\n  margin-left: 0;\n  padding: 8px 23px;\n  filter: blur(1px);\n  text-align: center;\n}\n\n.c-ico .ico-text {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.c-button .c-main:hover {\n  box-shadow: inset 0px 0px 5px rgba(17, 17, 17, 0.6);\n  border: 1px solid rgba(26, 26, 26, 0.5);\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.c-button-secondary {\n  background: linear-gradient(140deg, rgba(45, 45, 45, 1) 0%, rgba(20, 20, 20, 1) 100%);\n}\n\n.c-button-secondary .c-blur {\n  background: linear-gradient(318deg, rgba(65, 65, 65, 1) 0%, rgba(35, 35, 35, 1) 100%);\n}\n\n@media (max-width: 768px) {\n  .hero-section {\n    padding: 50px 15px;\n  }\n  .hero-title {\n    font-size: 2.1rem;\n  }\n  .hero-description {\n    font-size: 1rem;\n  }\n  .hero-actions {\n    flex-direction: column;\n    align-items: center;\n    gap: 15px;\n  }\n  .c-button {\n    font-size: 20px;\n    width: 100%;\n    max-width: 280px;\n  }\n}\n<\/style>\n\n<section class=\"hero-section\">\n  <div class=\"hero-content\">\n    <h1 class=\"hero-title\">\n      Verkkosivut <span class=\"hero-script\">ilman s\u00e4\u00e4t\u00f6\u00e4<\/span>\n    <\/h1>\n    <p class=\"hero-description\">\n      Unohda turhat ongelmat, mystiset virheet ja piilokulut. Rakennamme Digiverkostolla sivut, jotka n\u00e4ytt\u00e4v\u00e4t hyv\u00e4lt\u00e4, toimivat aina ja tuovat tuloksia.\n    <\/p>\n    <div class=\"hero-actions\">\n      <a href=\"\/ota-yhteytta\" class=\"dv-button\">\n        Ota yhteytt\u00e4\n        <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" class=\"dv-btn-icon\">\n          <path clip-rule=\"evenodd\" d=\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z\" fill-rule=\"evenodd\"><\/path>\n        <\/svg>\n      <\/a>\n      <a href=\"\/referenssit\" class=\"dv-button outline-button\">\n        Referenssit\n        <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" class=\"dv-btn-icon\">\n          <path clip-rule=\"evenodd\" d=\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z\" fill-rule=\"evenodd\"><\/path>\n        <\/svg>\n      <\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n  \/* Koko n\u00e4yt\u00f6n korkeus, flex-keskitys ja ylivuodon estot *\/\n  .hero-section {\n    width: 100%;\n    max-width: 100vw;\n    min-height: 100vh;\n    min-height: 100dvh; \/* Huomioi mobiiliselaimien osoiterivit dynaamisesti *\/\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    overflow-x: hidden; \/* Est\u00e4\u00e4 vaakavierityksen *\/\n    padding: 6vh 5vw; \/* Turvamarginaalit *\/\n    background: transparent !important;\n    background-color: transparent !important;\n  }\n\n  .hero-content {\n    width: 100%;\n    max-width: 900px;\n    margin: 0 auto;\n    text-align: center; \/* Keskitt\u00e4\u00e4 kaiken sis\u00e4ll\u00f6n vaakasuunnassa *\/\n    box-sizing: border-box;\n    background: transparent !important;\n    background-color: transparent !important;\n  }\n\n  .hero-title {\n    font-size: clamp(38px, 6vw, 64px);\n    font-weight: 800;\n    color: #ffffff;\n    margin-bottom: 20px;\n    letter-spacing: -0.02em;\n    line-height: 1.1;\n  }\n\n  .hero-script {\n    color: #0071e3;\n  }\n\n  .hero-description {\n    color: #86868b;\n    font-size: clamp(17px, 2vw, 20px);\n    line-height: 1.6;\n    max-width: 700px;\n    margin: 0 auto 35px auto;\n    word-wrap: break-word;\n  }\n\n  .hero-actions {\n    display: flex;\n    flex-wrap: wrap; \/* Rivitt\u00e4\u00e4 napit allekkain mobiilissa tarvittaessa *\/\n    justify-content: center;\n    gap: 15px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  \/* Napit *\/\n  .hero-actions .dv-button {\n    position: relative;\n    transition: all 0.3s ease-in-out;\n    box-shadow: 0px 10px 20px rgba(0, 113, 227, 0.25);\n    padding-block: 15px;\n    padding-inline: 32px;\n    background-color: rgb(0, 113, 227);\n    border-radius: 9999px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: #ffffff !important;\n    gap: 10px;\n    font-weight: 700;\n    border: 2px solid rgba(255, 255, 255, 0.2);\n    outline: none;\n    overflow: hidden;\n    font-size: 16px;\n    cursor: pointer;\n    width: fit-content;\n    max-width: 100%;\n    text-decoration: none !important;\n  }\n\n  .hero-actions .dv-btn-icon {\n    width: 20px;\n    height: 20px;\n    transition: all 0.3s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  .hero-actions .dv-button:hover {\n    transform: scale(1.05);\n    border-color: rgba(255, 255, 255, 0.6);\n    box-shadow: 0px 15px 30px rgba(0, 113, 227, 0.4);\n  }\n\n  .hero-actions .dv-button:hover .dv-btn-icon {\n    transform: translate(4px);\n  }\n\n  .hero-actions .dv-button:hover::before {\n    animation: dv-shine 1.5s ease-out infinite;\n  }\n\n  .hero-actions .dv-button::before {\n    content: \"\";\n    position: absolute;\n    width: 100px;\n    height: 100%;\n    background-image: linear-gradient(\n        120deg,\n        rgba(255, 255, 255, 0) 30%,\n        rgba(255, 255, 255, 0.6),\n        rgba(255, 255, 255, 0) 70%\n    );\n    top: 0;\n    left: -100px;\n    opacity: 0.6;\n  }\n  \n  .hero-actions .outline-button {\n    background-color: rgba(255, 255, 255, 0.05);\n    border: 2px solid rgba(255, 255, 255, 0.15);\n    box-shadow: none;\n  }\n  \n  .hero-actions .outline-button:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n    border-color: rgba(255, 255, 255, 0.3);\n  }\n\n  @keyframes dv-shine {\n    0% { left: -100px; }\n    60% { left: 100%; }\n    to { left: 100%; }\n  }\n\n  \/* Mobiilissa napit mukautuvat leve\u00e4mmiksi ja mukavammiksi painaa *\/\n  @media (max-width: 600px) {\n    .hero-actions {\n      flex-direction: column;\n      align-items: stretch;\n      padding: 0 10px;\n    }\n    .hero-actions .dv-button {\n      width: 100%;\n      text-align: center;\n      justify-content: center;\n      padding-block: 16px;\n    }\n  }\n<\/style>\n\n\n\n<section id=\"digiverkosto-arvostelut\">\n    <style>\n        #digiverkosto-arvostelut {\n            padding: 100px 6vw;\n            text-align: center;\n            overflow: hidden;\n            background-color: #070707;\n            color: #ffffff;\n            font-family: inherit, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            position: relative;\n        }\n\n        \/* Taustalle tuotu hienovarainen el\u00e4v\u00e4 sininen hehku *\/\n        #digiverkosto-arvostelut::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 800px;\n            height: 500px;\n            background: radial-gradient(circle, rgba(0, 113, 227, 0.1) 0%, transparent 70%);\n            z-index: 1;\n            pointer-events: none;\n        }\n\n        #digiverkosto-arvostelut .reviews-header,\n        #digiverkosto-arvostelut .reviews-grid {\n            position: relative;\n            z-index: 2;\n        }\n\n        #digiverkosto-arvostelut .reviews-header {\n            margin-bottom: 60px;\n        }\n\n        #digiverkosto-arvostelut .reviews-pre-title {\n            display: block;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.1em;\n            margin-bottom: 15px;\n            color: rgb(0, 113, 227);\n            font-size: 14px;\n        }\n\n        #digiverkosto-arvostelut h2 {\n            font-weight: 800;\n            margin: 0;\n            letter-spacing: -0.02em;\n            font-size: clamp(28px, 4vw, 42px);\n            color: #ffffff;\n        }\n\n        \/* Animoitu Grid *\/\n        #digiverkosto-arvostelut .reviews-grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 25px;\n            max-width: 1400px;\n            margin: 0 auto;\n        }\n\n        #digiverkosto-arvostelut .review-card {\n            background: linear-gradient(145deg, #121214 0%, #0d0d0f 100%);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            border-radius: 20px;\n            padding: 35px 30px;\n            display: flex;\n            flex-direction: column;\n            text-align: left;\n            backdrop-filter: blur(10px);\n            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);\n            animation: float 6s ease-in-out infinite;\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* Yl\u00e4reunan korostusviiva korteille *\/\n        #digiverkosto-arvostelut .review-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 3px;\n            background: linear-gradient(90deg, transparent, rgb(0, 113, 227), transparent);\n            opacity: 0.5;\n            transition: opacity 0.3s ease;\n        }\n\n        \/* Animaatio *\/\n        @keyframes float {\n            0% { transform: translateY(0px); }\n            50% { transform: translateY(-10px); }\n            100% { transform: translateY(0px); }\n        }\n\n        #digiverkosto-arvostelut .review-card:nth-child(2) { animation-delay: 1s; }\n        #digiverkosto-arvostelut .review-card:nth-child(3) { animation-delay: 2s; }\n        #digiverkosto-arvostelut .review-card:nth-child(4) { animation-delay: 1.5s; }\n\n        #digiverkosto-arvostelut .review-card:hover {\n            border-color: rgba(0, 113, 227, 0.5);\n            transform: scale(1.03) translateY(-6px) !important;\n            box-shadow: 0 20px 45px rgba(0, 113, 227, 0.15);\n            animation-play-state: paused;\n        }\n\n        #digiverkosto-arvostelut .review-card:hover::before {\n            opacity: 1;\n        }\n\n        #digiverkosto-arvostelut .stars {\n            margin-bottom: 12px;\n            color: #ffc700;\n            font-size: 1.1rem;\n            letter-spacing: 2px;\n        }\n\n        #digiverkosto-arvostelut .review-text {\n            line-height: 1.6;\n            margin-bottom: 25px;\n            flex-grow: 1;\n            color: #86868b;\n            font-size: 15px;\n        }\n\n        #digiverkosto-arvostelut .review-author {\n            font-weight: 700;\n            color: #ffffff;\n            font-size: 15px;\n        }\n\n        \/* Responsiivisuus *\/\n        @media (max-width: 1024px) {\n            #digiverkosto-arvostelut .reviews-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n\n        @media (max-width: 600px) {\n            #digiverkosto-arvostelut .reviews-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n    <\/style>\n\n    <div class=\"reviews-header\">\n        <span class=\"reviews-pre-title\">Asiakkaiden kokemuksia<\/span>\n        <h2>Mit\u00e4 yritt\u00e4j\u00e4t sanovat?<\/h2>\n    <\/div>\n\n    <div class=\"reviews-grid\">\n        <!-- Arvostelu 1 -->\n        <div class=\"review-card\">\n            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n            <p class=\"review-text\">&#8220;Digiverkosto tekee todella nopeaa, tarkkaa ja yst\u00e4v\u00e4llist\u00e4 palvelua! Saivat tosi hyvin kiinni ajatuksestani ja sivuista tuli juuri sellaiset kuin olin halunnutkin ja sain apua my\u00f6s sis\u00e4ll\u00f6iss\u00e4. Iso suositus!!&#8221;<\/p>\n            <div class=\"review-author\">\u2014 Roosa S<\/div>\n        <\/div>\n\n        <!-- Arvostelu 2 -->\n        <div class=\"review-card\">\n            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n            <p class=\"review-text\">&#8220;Olen eritt\u00e4in tyytyv\u00e4inen Digiverkoston tekemiin nettisivuihin Lev\u00e4hdyshetkelle. Sivut ovat selke\u00e4t, kauniit ja toimivat moitteettomasti kaikilla laitteilla. Tekij\u00e4t ymm\u00e4rsiv\u00e4t hyvin visioni ja pystyiv\u00e4t tuomaan sen verkkosivuille juuri niin kuin halusin. Ammattitaitoista palvelua, joustavuutta ja nopeaa reagointia \u2013 suosittelen l\u00e4mpim\u00e4sti!&#8221;<\/p>\n            <div class=\"review-author\">\u2014 Hannele S<\/div>\n        <\/div>\n\n        <!-- Arvostelu 3 -->\n        <div class=\"review-card\">\n            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n            <p class=\"review-text\">&#8220;Kiitos koulutuksesta kotisivujen muokkaamiseen. Kouluttaja oli perehtynyt muokattavaan kohteeseen ja neuvoi t\u00e4rkeimm\u00e4t asiat muokkauksessa. Oli my\u00f6s mahdollisuus esitt\u00e4\u00e4 lis\u00e4kysymyksi\u00e4. K\u00e4rsiv\u00e4llinen ja selke\u00e4 opetustyyli.&#8221;<\/p>\n            <div class=\"review-author\">\u2014 Marja T<\/div>\n        <\/div>\n\n        <!-- Arvostelu 4 -->\n        <div class=\"review-card\">\n            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n            <p class=\"review-text\">&#8220;Olen todella tyytyv\u00e4inen nettisivuista, jotka Digiverkosto teki yritykselleni Sallamarin Jalkaterapia. Yhteisty\u00f6 oli vaivatonta ja helppoa. Sivuista tuli toiveideni mukaiset ja ne palvelevat hyvin yrityst\u00e4ni. Palvelu oli nopeaa, suosittelen!&#8221;<\/p>\n            <div class=\"review-author\">\u2014 Sallamari P<\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<!-- DIGIVERKOSTO - ONGELMAT -->\n<div id=\"digiverkosto-ongelmat\">\n    <style>\n        #digiverkosto-ongelmat {\n            margin: 0;\n            padding: 0;\n            line-height: 1.6;\n            background-color: transparent;\n            color: #ffffff;\n            font-family: inherit, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* Taustalle tuotu hienovarainen el\u00e4v\u00e4 sininen hehku *\/\n        #digiverkosto-ongelmat::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 600px;\n            height: 400px;\n            background: radial-gradient(circle, rgba(0, 113, 227, 0.12) 0%, transparent 70%);\n            z-index: 1;\n            pointer-events: none;\n        }\n\n        #digiverkosto-ongelmat .container {\n            max-width: 1100px;\n            margin: 0 auto;\n            padding: 0 20px;\n            position: relative;\n            z-index: 2;\n        }\n\n        #digiverkosto-ongelmat section {\n            padding: 100px 0;\n            position: relative;\n        }\n\n        #digiverkosto-ongelmat h2 {\n            text-align: center;\n            margin-bottom: 60px;\n            letter-spacing: -0.02em;\n            font-weight: 800;\n            font-size: clamp(28px, 4vw, 40px);\n            color: #ffffff;\n        }\n\n        #digiverkosto-ongelmat .grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n            gap: 30px;\n        }\n\n        #digiverkosto-ongelmat .card {\n            background: linear-gradient(145deg, #121214 0%, #0d0d0f 100%);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            border-radius: 20px;\n            padding: 40px 35px;\n            position: relative;\n            overflow: hidden;\n            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);\n            display: flex;\n            flex-direction: column;\n            gap: 15px;\n        }\n\n        \/* Tyylik\u00e4s sininen h\u00e4ivytysreuna kortin yl\u00e4reunaan *\/\n        #digiverkosto-ongelmat .card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 3px;\n            background: linear-gradient(90deg, transparent, rgb(0, 113, 227), transparent);\n            opacity: 0.8;\n            transition: opacity 0.3s ease;\n        }\n\n        #digiverkosto-ongelmat .card:hover {\n            border-color: rgba(0, 113, 227, 0.4);\n            transform: translateY(-6px);\n            box-shadow: 0 20px 45px rgba(0, 113, 227, 0.15);\n        }\n\n        \/* Pieni visuaalinen pallo \/ aksentti kortin sis\u00e4lle tuomaan v\u00e4ri\u00e4 *\/\n        #digiverkosto-ongelmat .card-icon-badge {\n            width: 42px;\n            height: 42px;\n            background: rgba(0, 113, 227, 0.1);\n            border: 1px solid rgba(0, 113, 227, 0.25);\n            border-radius: 12px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-bottom: 5px;\n            color: rgb(0, 113, 227);\n            font-weight: 700;\n            font-size: 16px;\n        }\n\n        #digiverkosto-ongelmat .card h3 {\n            margin: 0;\n            font-weight: 700;\n            font-size: 1.25rem;\n            letter-spacing: -0.01em;\n            color: #ffffff;\n        }\n\n        #digiverkosto-ongelmat .card p {\n            margin: 0;\n            line-height: 1.6;\n            color: #86868b;\n            font-size: 15px;\n        }\n\n        @media (max-width: 768px) {\n            #digiverkosto-ongelmat section {\n                padding: 60px 0;\n            }\n        }\n    <\/style>\n\n    <main class=\"container\">\n        <section>\n            <h2>Mit\u00e4 ongelmia Digiverkoston verkkosivut ratkaisevat?<\/h2>\n            <div class=\"grid\">\n                <div class=\"card\">\n                    <div class=\"card-icon-badge\">01<\/div>\n                    <h3>Lev\u00e4ll\u00e4\u00e4n olevat projektit<\/h3>\n                    <p>S\u00e4\u00e4st\u00e4t hermosi. Ei en\u00e4\u00e4 kuukausien odottelua, katoavia tekij\u00f6it\u00e4 tai ep\u00e4selvi\u00e4 aikatauluja. Meill\u00e4 homma etenee suoraviivaisesti maaliin.<\/p>\n                <\/div>\n                <div class=\"card\">\n                    <div class=\"card-icon-badge\">02<\/div>\n                    <h3>Tekninen stressi ja kaatumiset<\/h3>\n                    <p>Unohda tilanteet, joissa sivut lakkaavat toimimasta p\u00e4ivityksen yhteydess\u00e4. Me pid\u00e4mme huolen siit\u00e4, ett\u00e4 sivusi ovat aina pystyss\u00e4 ja turvassa.<\/p>\n                <\/div>\n                <div class=\"card\">\n                    <div class=\"card-icon-badge\">03<\/div>\n                    <h3>Kalliit yll\u00e4tykset ja lis\u00e4maksut<\/h3>\n                    <p>Perinteinen verkkosivubisnes on pullollaan piilokuluja. Digiverkoston ratkaisussa tied\u00e4t tasan tarkkaan mit\u00e4 maksat, ilman ik\u00e4vi\u00e4 yll\u00e4tyksi\u00e4.<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n<\/div>\n\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/Draggable.min.js\"><\/script>\n\n<section class=\"dv-portfolio-section\">\n    <div class=\"dv-portfolio-container-top\">\n        <span class=\"section-tag-blue\">PORTFOLIO<\/span>\n        <h2 class=\"dv-services-title\">K\u00e4denj\u00e4lkemme.<\/h2>\n        <p class=\"section-subtitle-dark\">\n            Poimintoja viimeisimmist\u00e4 projekteistamme: verkkosivuja,<br> \n            br\u00e4ndi-ilmeit\u00e4 ja visuaalista tarinankerrontaa.\n        <\/p>\n    <\/div>\n\n    <!-- Karuselli kulkee t\u00e4ysleve\u00e4n\u00e4 reunasta reunaan -->\n    <div class=\"dv-portfolio-carousel-area\">\n        <div class=\"dv-portfolio-window\" id=\"carouselWindow\">\n            <div class=\"dv-portfolio-track\" id=\"carouselTrack\">\n                <div class=\"dv-portfolio-card\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/02\/sivusta-referenssit-kemora.png\" alt=\"Verkkosivut\">\n                    <div class=\"card-info\"><span>Verkkosivut<\/span><\/div>\n                <\/div>\n                <div class=\"dv-portfolio-card\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/01\/sivusta-referenssit-Ap-Autokorjaamo.png\" alt=\"Verkkosivut\">\n                    <div class=\"card-info\"><span>Verkkosivut<\/span><\/div>\n                <\/div>\n                <div class=\"dv-portfolio-card\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/01\/DJI_0039-2-scaled.jpg\" alt=\"Drone\">\n                    <div class=\"card-info\"><span>Dronekuvaus<\/span><\/div>\n                <\/div>\n                <div class=\"dv-portfolio-card\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/01\/DSC0379-scaled.jpg\" alt=\"Valokuvaus\">\n                    <div class=\"card-info\"><span>Valokuvaus<\/span><\/div>\n                <\/div>\n                <div class=\"dv-portfolio-card\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/04\/taksi-kayntikortti-mocup-e1777098237868.png\" alt=\"K\u00e4yntikortit\">\n                    <div class=\"card-info\"><span>K\u00e4yntikortit<\/span><\/div>\n                <\/div>\n                <div class=\"dv-portfolio-card\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/04\/ap_autokorjaamo_rst_2024-Mar-23_03-14-14PM-000_CustomizedView4553037699.png\" alt=\"3D mallinnus\">\n                    <div class=\"card-info\"><span>3D mallinnus<\/span><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"dv-portfolio-cta\">\n        <a href=\"https:\/\/digiverkosto.fi\/referenssit\/\" class=\"neu-button\">\n            Katso kaikki ty\u00f6t\n        <\/a>\n    <\/div>\n<\/section>\n\n<style>\n    :root {\n        --dv-accent-blue: rgb(0, 113, 227);\n        --dv-border: rgba(0, 113, 227, 0.2);\n    }\n\n    .dv-portfolio-section {\n        width: 100vw;\n        position: relative;\n        left: 50%;\n        margin-left: -50vw;\n        padding: 120px 0;\n        overflow: hidden;\n    }\n\n    .dv-portfolio-container-top {\n        max-width: 1400px;\n        margin: 0 auto;\n        text-align: center;\n        padding: 0 20px;\n    }\n\n    .section-tag-blue {\n        font-weight: 700;\n        color: var(--dv-accent-blue);\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        margin-bottom: 25px;\n        display: block;\n    }\n\n    .dv-services-title { \n        font-weight: 800;\n        margin-bottom: 15px;\n        letter-spacing: -0.02em;\n    }\n\n    .section-subtitle-dark {\n        margin: 0 auto 60px;\n        line-height: 1.5;\n    }\n\n    .dv-portfolio-carousel-area {\n        position: relative;\n        width: 100vw;\n        left: 50%;\n        transform: translateX(-50%);\n        margin: 20px 0 50px 0;\n        cursor: grab;\n        touch-action: pan-y;\n    }\n    \n    .dv-portfolio-carousel-area:active { cursor: grabbing; }\n\n    .dv-portfolio-window {\n        overflow: hidden;\n        width: 100%;\n        padding: 30px 0;\n        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);\n        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);\n    }\n\n    .dv-portfolio-track {\n        display: flex;\n        gap: 30px;\n        width: max-content;\n        padding-left: 20px;\n    }\n\n    .dv-portfolio-card {\n        width: 420px;\n        height: 280px;\n        border-radius: 20px;\n        overflow: hidden;\n        position: relative;\n        flex-shrink: 0;\n        border: 1px solid var(--dv-border);\n        backdrop-filter: blur(10px);\n        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n        animation: portfolioFloat 6s ease-in-out infinite;\n    }\n\n    @keyframes portfolioFloat {\n        0% { transform: translateY(0px); }\n        50% { transform: translateY(-10px); }\n        100% { transform: translateY(0px); }\n    }\n\n    .dv-portfolio-card:nth-child(even) { animation-delay: 1.5s; }\n\n    .dv-portfolio-card:hover { \n        border-color: rgba(0, 113, 227, 0.6); \n        transform: scale(1.03) translateY(-6px) !important; \n        animation-play-state: paused;\n    }\n\n    .dv-portfolio-card img { \n        width: 100%; \n        height: 100%; \n        object-fit: cover; \n        pointer-events: none;\n        opacity: 0.85; \n        transition: 0.3s; \n    }\n    .dv-portfolio-card:hover img { opacity: 1; }\n\n    .card-info {\n        position: absolute;\n        bottom: 20px;\n        left: 20px;\n        background: rgba(0, 0, 0, 0.6);\n        backdrop-filter: blur(10px);\n        padding: 6px 16px;\n        border-radius: 50px;\n        font-weight: 700;\n        color: #fff;\n        text-transform: uppercase;\n        border: 1px solid rgba(0, 113, 227, 0.4);\n    }\n\n    .dv-portfolio-cta { text-align: center; display: flex; justify-content: center; }\n\n    \/* Neumorphic Button Styles *\/\n    .neu-button {\n        background-color: #e0e0e0;\n        border-radius: 50px;\n        box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff;\n        color: #4d4d4d;\n        cursor: pointer;\n        font-size: 18px;\n        font-weight: 600;\n        padding: 15px 40px;\n        transition: all 0.2s ease-in-out;\n        border: 2px solid rgb(206, 206, 206);\n        text-decoration: none;\n        display: inline-block;\n    }\n\n    .neu-button:hover {\n        box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;\n    }\n\n    .neu-button:focus {\n        outline: none;\n        box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;\n    }\n\n    @media (max-width: 768px) {\n        .dv-portfolio-card { width: 300px; height: 200px; }\n    }\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const track = document.getElementById('carouselTrack');\n    const cards = Array.from(track.children);\n    \n    cards.forEach(card => {\n        track.appendChild(card.cloneNode(true));\n    });\n\n    let trackWidth = track.offsetWidth;\n    let scrollSpeed = window.innerWidth < 768 ? 1.0 : 0.6;\n    let currentX = 0;\n    let isPaused = false;\n\n    function animate() {\n        if (!isPaused) {\n            currentX -= scrollSpeed;\n            if (Math.abs(currentX) >= trackWidth \/ 2) {\n                currentX = 0;\n            }\n            gsap.set(track, { x: currentX });\n        }\n        requestAnimationFrame(animate);\n    }\n    animate();\n\n    Draggable.create(track, {\n        type: \"x\",\n        inertia: true,\n        bounds: { minX: -trackWidth \/ 2, maxX: 0 },\n        allowNativeTouchScroll: \"y\",\n        dragClickables: true,\n        onPress: () => isPaused = true,\n        onRelease: () => {\n            isPaused = false;\n            currentX = gsap.getProperty(track, \"x\");\n        },\n        onDrag: function() { currentX = this.x; },\n        onThrowUpdate: function() { currentX = this.x; }\n    });\n\n    track.addEventListener('mouseenter', () => isPaused = true);\n    track.addEventListener('mouseleave', () => isPaused = false);\n\n    window.addEventListener('resize', () => {\n        trackWidth = track.offsetWidth;\n        scrollSpeed = window.innerWidth < 768 ? 1.0 : 0.6;\n    });\n});\n<\/script>\n\n\n\n<!-- DIGIVERKOSTO - MIKSI VALITA MEID\u00c4T -->\n<div id=\"digiverkosto-miksi\">\n    <style>\n        #digiverkosto-miksi {\n            margin: 0;\n            padding: 0;\n            line-height: 1.6;\n            background-color: transparent;\n            color: #ffffff;\n            font-family: inherit, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            position: relative;\n        }\n\n        #digiverkosto-miksi .container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 20px;\n        }\n\n        #digiverkosto-miksi section {\n            padding: 90px 0;\n        }\n\n        \/* Taustalle tuotu hienovarainen el\u00e4v\u00e4 sininen hehku *\/\n        #digiverkosto-miksi .miksi-wrapper {\n            background: linear-gradient(145deg, #0d0d0f 0%, #09090b 100%);\n            border-radius: 28px;\n            border: 1px solid rgba(0, 113, 227, 0.25);\n            padding: 60px 50px;\n            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);\n            backdrop-filter: blur(10px);\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* Korostusvalo wrapperin kulmaan *\/\n        #digiverkosto-miksi .miksi-wrapper::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            right: 0;\n            width: 400px;\n            height: 400px;\n            background: radial-gradient(circle, rgba(0, 113, 227, 0.1) 0%, transparent 70%);\n            pointer-events: none;\n        }\n\n        #digiverkosto-miksi h2 {\n            text-align: center;\n            margin-bottom: 50px;\n            letter-spacing: -0.02em;\n            font-weight: 800;\n            font-size: clamp(30px, 4vw, 44px);\n            color: #ffffff;\n        }\n\n        #digiverkosto-miksi .grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n            gap: 24px;\n            position: relative;\n            z-index: 2;\n        }\n\n        #digiverkosto-miksi .card {\n            background: linear-gradient(145deg, #141417 0%, #0f0f12 100%);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            border-radius: 18px;\n            padding: 35px;\n            position: relative;\n            overflow: hidden;\n            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n            display: flex;\n            flex-direction: column;\n            gap: 15px;\n        }\n\n        \/* Tyylik\u00e4s sininen h\u00e4ivytysreuna kortin yl\u00e4reunaan *\/\n        #digiverkosto-miksi .card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 3px;\n            background: linear-gradient(90deg, transparent, rgb(0, 113, 227), transparent);\n            opacity: 0.6;\n            transition: opacity 0.3s ease;\n        }\n\n        #digiverkosto-miksi .card:hover {\n            border-color: rgba(0, 113, 227, 0.5);\n            transform: translateY(-6px);\n            box-shadow: 0 20px 40px rgba(0, 113, 227, 0.15);\n        }\n\n        #digiverkosto-miksi .card:hover::before {\n            opacity: 1;\n        }\n\n        \/* Numerobadge tuomaan identiteetti\u00e4 ja v\u00e4ri\u00e4 *\/\n        #digiverkosto-miksi .card-badge {\n            width: 40px;\n            height: 40px;\n            background: rgba(0, 113, 227, 0.12);\n            border: 1px solid rgba(0, 113, 227, 0.3);\n            border-radius: 10px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: rgb(0, 113, 227);\n            font-weight: 800;\n            font-size: 14px;\n            letter-spacing: 0.5px;\n            margin-bottom: 5px;\n        }\n\n        #digiverkosto-miksi .card h3 {\n            margin: 0;\n            font-weight: 700;\n            font-size: 1.2rem;\n            letter-spacing: -0.01em;\n            color: #ffffff;\n        }\n\n        #digiverkosto-miksi .card p {\n            margin: 0;\n            line-height: 1.6;\n            color: #86868b;\n            font-size: 15px;\n        }\n\n        @media (max-width: 768px) {\n            #digiverkosto-miksi .miksi-wrapper {\n                padding: 30px 20px;\n                border-radius: 20px;\n            }\n            #digiverkosto-miksi section {\n                padding: 60px 0;\n            }\n        }\n    <\/style>\n\n    <main class=\"container\">\n        <section>\n            <div class=\"miksi-wrapper\">\n                <h2>Miksi valita meid\u00e4t?<\/h2>\n                <div class=\"grid\">\n                    <div class=\"card\">\n                        <div class=\"card-badge\">01<\/div>\n                        <h3>Nopea toimitus<\/h3>\n                        <p>Aika on yritt\u00e4j\u00e4lle rahaa. Siksi emme jumita kuukausia palavereissa, vaan toimittamme valmiit, laadukkaat sivut ripe\u00e4sti ilman kompromisseja laadusta.<\/p>\n                    <\/div>\n                    <div class=\"card\">\n                        <div class=\"card-badge\">02<\/div>\n                        <h3>Luotettava tekij\u00e4<\/h3>\n                        <p>Seisomme ty\u00f6mme takana sataprosenttisesti. Meihin voit luottaa niin projektin aikana kuin pitk\u00e4lle tulevaisuuteen.<\/p>\n                    <\/div>\n                    <div class=\"card\">\n                        <div class=\"card-badge\">03<\/div>\n                        <h3>Tyytyv\u00e4isyystakuu<\/h3>\n                        <p>Sivut ovat valmiit vasta kun olet tyytyv\u00e4inen. Hiomme yksityiskohdat kuntoon niin kauan, ett\u00e4 lopputulos vastaa t\u00e4ydellisesti visiotasi.<\/p>\n                    <\/div>\n                    <div class=\"card\">\n                        <div class=\"card-badge\">04<\/div>\n                        <h3>Aina verkossa ja toimii<\/h3>\n                        <p>Vakaa ja nopea alusta varmistaa, ett\u00e4 asiakkaasi l\u00f6yt\u00e4v\u00e4t sinut vuorokauden jokaisena tuntina \u2013 ilman k\u00e4ytt\u00f6katkoja.<\/p>\n                    <\/div>\n                    <div class=\"card\">\n                        <div class=\"card-badge\">05<\/div>\n                        <h3>Kattavat custom ty\u00f6kalut<\/h3>\n                        <p>Tarvitsetko kalenteritoimintoja, ajanvarauksen tai muita r\u00e4\u00e4t\u00e4l\u00f6ityj\u00e4 ratkaisuja? Rakennamme tarvitsemasi ty\u00f6kalut toimimaan juuri tarpeidesi mukaan.<\/p>\n                    <\/div>\n                    <div class=\"card\">\n                        <div class=\"card-badge\">06<\/div>\n                        <h3>Edullinen ratkaisu yritt\u00e4j\u00e4lle<\/h3>\n                        <p>R\u00e4\u00e4t\u00e4l\u00f6ity ammattilaistason ratkaisu ei saa maksaa maltaita. Tarjoamme budjettiyst\u00e4v\u00e4llisen tavan hy\u00f6ty\u00e4 n\u00e4kyvyydest\u00e4 verkossa.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n<\/div>\n\n\n\n<section class=\"section pricing-section\" id=\"digiverkosto-hinnasto\">\n    <style>\n        #digiverkosto-hinnasto {\n            padding: 100px 6vw;\n            text-align: center;\n            background-color: #070707;\n            color: #ffffff;\n            font-family: inherit, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* Hienovarainen el\u00e4v\u00e4 sininen hehku taustalle *\/\n        #digiverkosto-hinnasto::before {\n            content: '';\n            position: absolute;\n            top: 30%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 700px;\n            height: 500px;\n            background: radial-gradient(circle, rgba(0, 113, 227, 0.1) 0%, transparent 70%);\n            z-index: 1;\n            pointer-events: none;\n        }\n\n        #digiverkosto-hinnasto .pricing-header,\n        #digiverkosto-hinnasto .pricing-grid,\n        #digiverkosto-hinnasto .maintenance-micro-card,\n        #digiverkosto-hinnasto .dropdown-container,\n        #digiverkosto-hinnasto .section-cta-container {\n            position: relative;\n            z-index: 2;\n        }\n\n        #digiverkosto-hinnasto .pricing-pre-title {\n            display: block;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.1em;\n            color: rgb(0, 113, 227);\n            margin-bottom: 15px;\n            font-size: 14px;\n        }\n\n        #digiverkosto-hinnasto .pricing-main-title {\n            font-weight: 800;\n            margin-bottom: 15px;\n            letter-spacing: -0.02em;\n            font-size: clamp(30px, 4vw, 44px);\n        }\n\n        #digiverkosto-hinnasto .pricing-intro {\n            margin-bottom: 60px;\n            color: #86868b;\n            font-size: 17px;\n        }\n\n        #digiverkosto-hinnasto .pricing-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 25px;\n            max-width: 1200px;\n            margin: 0 auto;\n            align-items: stretch;\n        }\n\n        #digiverkosto-hinnasto .pricing-card {\n            background: linear-gradient(145deg, #121214 0%, #0d0d0f 100%);\n            padding: 50px 35px;\n            border-radius: 20px;\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            display: flex;\n            flex-direction: column;\n            text-align: left;\n            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n            backdrop-filter: blur(10px);\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* Yl\u00e4reunan korostusviiva korteille *\/\n        #digiverkosto-hinnasto .pricing-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 3px;\n            background: linear-gradient(90deg, transparent, rgb(0, 113, 227), transparent);\n            opacity: 0.5;\n            transition: opacity 0.3s ease;\n        }\n\n        #digiverkosto-hinnasto .pricing-card:hover {\n            border-color: rgba(0, 113, 227, 0.5);\n            transform: translateY(-8px);\n            box-shadow: 0 20px 45px rgba(0, 113, 227, 0.15);\n        }\n\n        #digiverkosto-hinnasto .pricing-card:hover::before {\n            opacity: 1;\n        }\n\n        \/* Korostettu kortti (Kasvu) erottuu upeasti *\/\n        #digiverkosto-hinnasto .highlighted-card {\n            border-color: rgba(0, 113, 227, 0.6);\n            background: linear-gradient(145deg, #151821 0%, #0d111a 100%);\n            box-shadow: 0 20px 45px rgba(0, 113, 227, 0.2);\n        }\n\n        #digiverkosto-hinnasto .highlighted-card::before {\n            opacity: 1;\n            background: rgb(0, 113, 227);\n        }\n\n        #digiverkosto-hinnasto .p-label {\n            font-size: 11px;\n            text-transform: uppercase;\n            font-weight: 700;\n            letter-spacing: 1.5px;\n            margin-bottom: 12px;\n            display: block;\n            opacity: 0.8;\n            color: #86868b;\n        }\n\n        #digiverkosto-hinnasto .highlighted-card .p-label {\n            color: rgb(0, 113, 227);\n            opacity: 1;\n        }\n\n        #digiverkosto-hinnasto .p-header h3 {\n            margin: 0 0 8px 0;\n            font-weight: 700;\n            font-size: 1.5rem;\n            color: #ffffff;\n        }\n\n        #digiverkosto-hinnasto .p-header p {\n            margin: 0 0 30px 0;\n            min-height: 40px;\n            color: #86868b;\n            font-size: 15px;\n        }\n\n        #digiverkosto-hinnasto .p-price {\n            font-size: 2.5rem;\n            font-weight: 800;\n            margin-bottom: 30px;\n            color: #ffffff;\n        }\n\n        #digiverkosto-hinnasto .p-price .currency {\n            font-size: 1rem;\n            font-weight: 400;\n            color: #86868b;\n        }\n\n        #digiverkosto-hinnasto .p-price .plus {\n            color: rgb(0, 113, 227);\n        }\n\n        #digiverkosto-hinnasto .p-features {\n            list-style: none;\n            padding: 0;\n            margin: 0 0 25px 0;\n            border-top: 1px solid rgba(255, 255, 255, 0.08);\n            padding-top: 25px;\n        }\n\n        #digiverkosto-hinnasto .p-features li {\n            margin-bottom: 12px;\n            padding-left: 24px;\n            position: relative;\n            color: #ffffff;\n            font-size: 15px;\n        }\n\n        #digiverkosto-hinnasto .p-features li::before {\n            content: \"\u2713\";\n            position: absolute;\n            left: 0;\n            color: rgb(0, 113, 227);\n            font-weight: bold;\n        }\n\n        \/* LIS\u00c4PALVELUT OSIO KORTIN SIS\u00c4LL\u00c4 *\/\n        #digiverkosto-hinnasto .p-addons {\n            margin-top: 10px;\n            margin-bottom: 35px;\n            padding-top: 20px;\n            border-top: 1px dashed rgba(255, 255, 255, 0.15);\n        }\n\n        #digiverkosto-hinnasto .p-addons-title {\n            font-size: 0.85rem;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            font-weight: 700;\n            color: rgb(0, 113, 227);\n            margin-bottom: 15px;\n            display: block;\n        }\n\n        #digiverkosto-hinnasto .p-addons-list {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        #digiverkosto-hinnasto .p-addons-list li {\n            font-size: 0.9rem;\n            margin-bottom: 10px;\n            padding-left: 20px;\n            position: relative;\n            color: #86868b;\n        }\n\n        #digiverkosto-hinnasto .p-addons-list li::before {\n            content: \"+\";\n            position: absolute;\n            left: 0;\n            color: rgb(0, 113, 227);\n            font-weight: bold;\n        }\n\n        \/* YLL\u00c4PITO MIKROKORTTI *\/\n        #digiverkosto-hinnasto .maintenance-micro-card {\n            max-width: 1200px;\n            margin: 30px auto 0;\n            background: linear-gradient(145deg, #121214 0%, #0d0d0f 100%);\n            border: 1px solid rgba(0, 113, 227, 0.3);\n            border-radius: 20px;\n            padding: 25px 35px;\n            text-align: left;\n            backdrop-filter: blur(10px);\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);\n        }\n\n        #digiverkosto-hinnasto .m-flex {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        #digiverkosto-hinnasto .m-info h4 {\n            margin: 0 0 5px 0;\n            font-weight: 700;\n            color: #ffffff;\n            font-size: 1.15rem;\n        }\n\n        #digiverkosto-hinnasto .m-info p {\n            margin: 0;\n            color: #86868b;\n            font-size: 15px;\n        }\n\n        #digiverkosto-hinnasto .m-right {\n            display: flex;\n            align-items: center;\n            gap: 25px;\n        }\n\n        #digiverkosto-hinnasto .m-price {\n            font-size: 2rem;\n            font-weight: 800;\n            white-space: nowrap;\n            color: #ffffff;\n        }\n\n        #digiverkosto-hinnasto .m-price span {\n            font-size: 0.95rem;\n            color: rgb(0, 113, 227);\n            font-weight: 600;\n        }\n\n        \/* DROPDOWN TYYLIT *\/\n        #digiverkosto-hinnasto .dropdown-container {\n            margin: 40px auto 0;\n            max-width: 1200px;\n        }\n\n        #digiverkosto-hinnasto .dropdown-item {\n            background: linear-gradient(145deg, #121214 0%, #0d0d0f 100%);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            border-radius: 20px;\n            overflow: hidden;\n            transition: all 0.3s ease;\n            backdrop-filter: blur(10px);\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);\n        }\n\n        #digiverkosto-hinnasto .dropdown-item:hover {\n            border-color: rgba(0, 113, 227, 0.4);\n        }\n\n        #digiverkosto-hinnasto .dropdown-item.is-open {\n            border-color: rgba(0, 113, 227, 0.5);\n        }\n\n        #digiverkosto-hinnasto .dropdown-header {\n            width: 100%;\n            padding: 24px 32px;\n            background: transparent;\n            border: none;\n            display: flex;\n            align-items: center;\n            cursor: pointer;\n            text-align: left;\n            justify-content: space-between;\n        }\n\n        #digiverkosto-hinnasto .dropdown-title {\n            font-weight: 600;\n            margin: 0;\n            color: #ffffff;\n            font-size: 1.1rem;\n        }\n\n        #digiverkosto-hinnasto .dropdown-icon {\n            color: rgb(0, 113, 227);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            flex-shrink: 0;\n            background: rgba(0, 113, 227, 0.1);\n            width: 36px;\n            height: 36px;\n            border-radius: 50%;\n            border: 1px solid rgba(0, 113, 227, 0.2);\n        }\n\n        #digiverkosto-hinnasto .dropdown-item.is-open .dropdown-icon {\n            transform: rotate(180deg);\n            background: rgba(0, 113, 227, 0.2);\n        }\n\n        #digiverkosto-hinnasto .dropdown-content {\n            max-height: 0;\n            overflow: hidden;\n            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        #digiverkosto-hinnasto .dropdown-inner {\n            padding: 0 32px 32px 32px;\n            opacity: 0;\n            transform: translateY(-10px);\n            transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;\n        }\n\n        #digiverkosto-hinnasto .dropdown-item.is-open .dropdown-inner {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        #digiverkosto-hinnasto .dropdown-divider {\n            height: 1px;\n            background: rgba(255, 255, 255, 0.08);\n            margin-bottom: 24px;\n        }\n\n        #digiverkosto-hinnasto .dropdown-intro-text {\n            line-height: 1.7;\n            margin: 0 0 24px 0;\n            color: #86868b;\n        }\n\n        #digiverkosto-hinnasto .dropdown-list {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        #digiverkosto-hinnasto .dropdown-list li {\n            line-height: 1.6;\n            margin-bottom: 14px;\n            padding-left: 28px;\n            position: relative;\n            color: #86868b;\n        }\n\n        #digiverkosto-hinnasto .dropdown-list li strong {\n            font-weight: 600;\n            color: #ffffff;\n        }\n\n        #digiverkosto-hinnasto .dropdown-list li::before {\n            content: \"\u2713\";\n            position: absolute;\n            left: 0;\n            top: 0;\n            color: rgb(0, 113, 227);\n            font-weight: 800;\n            font-size: 1rem;\n        }\n\n        \/* YHTEYDENOTTO CTA LOPUSSA *\/\n        #digiverkosto-hinnasto .section-cta-container {\n            margin-top: 60px;\n            text-align: center;\n        }\n\n        #digiverkosto-hinnasto .section-cta-title {\n            font-weight: 700;\n            margin-bottom: 25px;\n            color: #ffffff;\n            font-size: clamp(22px, 3vw, 30px);\n        }\n\n        \/* Modernisoidut tyylikk\u00e4\u00e4t napit *\/\n        #digiverkosto-hinnasto .neu-button {\n            background-color: rgb(0, 113, 227);\n            color: #ffffff;\n            border-radius: 100px;\n            box-shadow: 0 10px 25px rgba(0, 113, 227, 0.3);\n            cursor: pointer;\n            font-size: 16px;\n            font-weight: 600;\n            padding: 16px 36px;\n            transition: all 0.3s ease;\n            border: none;\n            text-decoration: none;\n            display: inline-block;\n        }\n\n        #digiverkosto-hinnasto .neu-button:hover {\n            background-color: #005bbd;\n            transform: translateY(-2px);\n            box-shadow: 0 15px 30px rgba(0, 113, 227, 0.4);\n            color: #ffffff;\n        }\n\n        #digiverkosto-hinnasto .neu-button:focus {\n            outline: none;\n        }\n\n        @media (max-width: 1000px) {\n            #digiverkosto-hinnasto .pricing-grid { grid-template-columns: 1fr; }\n            #digiverkosto-hinnasto .m-flex { flex-direction: column; text-align: center; gap: 20px; }\n            #digiverkosto-hinnasto .m-right { flex-direction: column; gap: 15px; }\n        }\n\n        @media (max-width: 600px) {\n            #digiverkosto-hinnasto .dropdown-header { padding: 20px; }\n            #digiverkosto-hinnasto .dropdown-inner { padding: 0 20px 24px 20px; }\n        }\n    <\/style>\n\n    <div class=\"pricing-header reveal\">\n        <span class=\"pricing-pre-title\">Verkkosivujen hinnat<\/span>\n        <h2 class=\"pricing-main-title\">Valitse kasvusuunnitelmasi.<\/h2>\n        <p class=\"pricing-intro\">R\u00e4\u00e4t\u00e4l\u00f6idyt verkkosivupaketit yrityksesi tavoitteiden mukaan.<\/p>\n    <\/div>\n\n    <div class=\"pricing-grid\">\n        <!-- STARTTI -->\n        <div class=\"pricing-card reveal\">\n            <div class=\"p-header\">\n                <span class=\"p-label\">Perusn\u00e4kyvyys<\/span>\n                <h3>Startti<\/h3>\n                <p>Pienyritykset ja freelancerit.<\/p>\n            <\/div>\n            <div class=\"p-price\">\n                <span class=\"currency\">Alk.<\/span> 259 \u20ac\n            <\/div>\n            <ul class=\"p-features\">\n                <li>1\u20134 sivun kokonaisuus<\/li>\n                <li>WordPress-alusta<\/li>\n                <li>Responsiivinen design<\/li>\n                <li>T\u00e4ysin customoitavissa<\/li>\n            <\/ul>\n\n            <div class=\"p-addons\">\n                <span class=\"p-addons-title\">Saatavilla lis\u00e4palveluna:<\/span>\n                <ul class=\"p-addons-list\">\n                    <li>K\u00e4\u00e4nn\u00f6s 1 tai useammalle kielle<\/li>\n                    <li>Ajanvarausj\u00e4rjestelm\u00e4n integraatio<\/li>\n                    <li>Sis\u00e4ll\u00f6ntuotanto &amp; Tekstit<\/li>\n                    <li>Analytiikan asennus<\/li>\n                <\/ul>\n            <\/div>\n\n            <a href=\"https:\/\/digiverkosto.fi\/tarjouspyynto\/\" class=\"neu-button\" style=\"margin-top: auto; font-size: 16px; padding: 12px 28px;\">Pyyd\u00e4 tarjous<\/a>\n        <\/div>\n\n        <!-- KASVU -->\n        <div class=\"pricing-card reveal highlighted-card\">\n            <div class=\"p-header\">\n                <span class=\"p-label\">Aktiivinen kasvu<\/span>\n                <h3>Kasvu<\/h3>\n                <p>PK-yritykset, jotka haluavat vaativammat sivut.<\/p>\n            <\/div>\n            <div class=\"p-price\">\n                <span class=\"currency\">Alk.<\/span> 760 \u20ac\n            <\/div>\n            <ul class=\"p-features\">\n                <li>5\u201310 sivun kokonaisuus<\/li>\n                <li>WordPress-alusta<\/li>\n                <li>Responsiivinen design<\/li>\n                <li>T\u00e4ysin customoitavissa<\/li>\n                <li>Monipuoliset sis\u00e4lt\u00f6osiot<\/li>\n            <\/ul>\n\n            <div class=\"p-addons\">\n                <span class=\"p-addons-title\">Saatavilla lis\u00e4palveluna:<\/span>\n                <ul class=\"p-addons-list\">\n                    <li>K\u00e4\u00e4nn\u00f6s 1 tai useammalle kielle<\/li>\n                    <li>Ajanvarausj\u00e4rjestelm\u00e4n integraatio<\/li>\n                    <li>Sis\u00e4ll\u00f6ntuotanto &amp; Tekstit<\/li>\n                    <li>Analytiikan asennus<\/li>\n                <\/ul>\n            <\/div>\n\n            <a href=\"https:\/\/digiverkosto.fi\/tarjouspyynto\/\" class=\"neu-button\" style=\"margin-top: auto; font-size: 16px; padding: 12px 28px;\">Pyyd\u00e4 tarjous<\/a>\n        <\/div>\n\n        <!-- STRATEGINEN -->\n        <div class=\"pricing-card reveal\">\n            <div class=\"p-header\">\n                <span class=\"p-label\">Maksimaalinen teho<\/span>\n                <h3>Strateginen<\/h3>\n                <p>E-Commerce, laajat sivustot ja erikoisratkaisut.<\/p>\n            <\/div>\n            <div class=\"p-price\">\n                <span class=\"currency\">Alk.<\/span> 1099 \u20ac <span class=\"plus\">+<\/span>\n            <\/div>\n            <ul class=\"p-features\">\n                <li>10+ sivua tai Verkkokauppa<\/li>\n                <li>WordPress-alusta<\/li>\n                <li>WooCommerce<\/li>\n                <li>R\u00e4\u00e4t\u00e4l\u00f6idyt integraatiot<\/li>\n                <li>T\u00e4ysin customoitavissa<\/li>\n            <\/ul>\n\n            <div class=\"p-addons\">\n                <span class=\"p-addons-title\">Saatavilla lis\u00e4palveluna:<\/span>\n                <ul class=\"p-addons-list\">\n                    <li>K\u00e4\u00e4nn\u00f6kset useille kielille<\/li>\n                    <li>SEO &amp; Avainsanatutkimus<\/li>\n                    <li>Ajanvarausj\u00e4rjestelm\u00e4n integraatio<\/li>\n                    <li>Sis\u00e4ll\u00f6ntuotanto &amp; Tekstit<\/li>\n                    <li>Analytiikan asennus<\/li>\n                <\/ul>\n            <\/div>\n\n            <a href=\"https:\/\/digiverkosto.fi\/tarjouspyynto\/\" class=\"neu-button\" style=\"margin-top: auto; font-size: 16px; padding: 12px 28px;\">Pyyd\u00e4 tarjous<\/a>\n        <\/div>\n    <\/div>\n    <br>\n\n    <div class=\"maintenance-micro-card reveal\">\n        <div class=\"m-flex\">\n            <div class=\"m-info\">\n                <h4>Huoleton yll\u00e4pito<\/h4>\n                <p>Palvelintila, domain, tietoturvap\u00e4ivitykset, lis\u00e4osien ja teemojen s\u00e4\u00e4nn\u00f6lliset p\u00e4ivitykset, yhteydenotto saatavuus.<\/p>\n            <\/div>\n            <div class=\"m-right\">\n                <div class=\"m-price\">\n                    150\u20ac <span>\/ vuosi<\/span>\n                <\/div>\n                <a href=\"https:\/\/digiverkosto.fi\/verkkosivujen-yllapito\/\" class=\"neu-button\" style=\"font-size: 15px; padding: 10px 24px;\">Tutustu yll\u00e4pitoon<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"dropdown-container package-includes-dropdown reveal\">\n        <div class=\"dropdown-item\">\n            <button class=\"dropdown-header\">\n                <div class=\"dropdown-title-wrapper\">\n                    <h3 class=\"dropdown-title\">Mit\u00e4 verkkosivupaketti sis\u00e4lt\u00e4\u00e4?<\/h3>\n                <\/div>\n                <div class=\"dropdown-right-content\">\n                    <span class=\"dropdown-icon\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <polyline points=\"6 9 12 15 18 9\"><\/polyline>\n                        <\/svg>\n                    <\/span>\n                <\/div>\n            <\/button>\n            <div class=\"dropdown-content\">\n                <div class=\"dropdown-inner\">\n                    <div class=\"dropdown-divider\"><\/div>\n                    <p class=\"dropdown-intro-text\" style=\"text-align: left;\">\n                        Jokainen toteuttamamme sivusto sis\u00e4lt\u00e4\u00e4 aina:\n                    <\/p>\n                    <ul class=\"dropdown-list\" style=\"text-align: left;\">\n                        <li><strong>Moderni ja responsiivinen ulkoasu:<\/strong> Sivusto, joka k\u00e4\u00e4ntyy t\u00e4ydellisesti puhelimelle ja tietokoneelle.<\/li>\n                        <li><strong>Tekninen kevyt-SEO:<\/strong> Sivuston rakenne, otsikointi ja meta-tiedot optimoidaan heti oikein.<\/li>\n                        <li><strong>Kevyt sis\u00e4ll\u00f6nhallinta:<\/strong> Saat tunnukset, joilla voit itse muokata tekstej\u00e4 ja kuvia helposti.<\/li>\n                        <li><strong>SSL-suojaus &amp; GDPR-valmius:<\/strong> Turvallinen yhteys ja tietosuoja-asiat kunnossa.<\/li>\n                        <li><strong>Yhteydenottolomakkeet:<\/strong> Suunniteltu ohjaamaan k\u00e4vij\u00e4 ottamaan yhteytt\u00e4.<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"section-cta-container\">\n        <h3 class=\"section-cta-title\">Oletko valmis katsomaan sovimmeko yhteisty\u00f6h\u00f6n?<\/h3>\n        <a href=\"https:\/\/digiverkosto.fi\/ota-yhteytta\/\" class=\"neu-button\">Varaa maksuton puhelu<\/a>\n    <\/div>\n\n    <script>\n        document.querySelectorAll('#digiverkosto-hinnasto .package-includes-dropdown .dropdown-header').forEach(button => {\n            button.addEventListener('click', () => {\n                const item = button.parentElement;\n                const content = item.querySelector('.dropdown-content');\n\n                item.classList.toggle('is-open');\n                \n                if (item.classList.contains('is-open')) {\n                    content.style.maxHeight = content.scrollHeight + 50 + \"px\";\n                } else {\n                    content.style.maxHeight = \"0\";\n                }\n            });\n        });\n    <\/script>\n<\/section>\n\n\n\n<section id=\"digiverkosto-lisapalvelut\">\n    <style>\n        #digiverkosto-lisapalvelut {\n            padding: 100px 6vw;\n            text-align: center;\n            background-color: #070707;\n            color: #ffffff;\n            font-family: inherit, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* Taustalle tuotu hienovarainen el\u00e4v\u00e4 sininen hehku *\/\n        #digiverkosto-lisapalvelut::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 700px;\n            height: 400px;\n            background: radial-gradient(circle, rgba(0, 113, 227, 0.1) 0%, transparent 70%);\n            z-index: 1;\n            pointer-events: none;\n        }\n\n        #digiverkosto-lisapalvelut .services-header,\n        #digiverkosto-lisapalvelut .services-grid {\n            position: relative;\n            z-index: 2;\n        }\n\n        #digiverkosto-lisapalvelut .services-header {\n            max-width: 800px;\n            margin: 0 auto 60px auto;\n        }\n\n        #digiverkosto-lisapalvelut .services-pre-title {\n            display: block;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.1em;\n            color: rgb(0, 113, 227);\n            margin-bottom: 15px;\n            font-size: 14px;\n        }\n\n        #digiverkosto-lisapalvelut h2 {\n            font-weight: 800;\n            margin: 0;\n            letter-spacing: -0.02em;\n            font-size: clamp(28px, 4vw, 42px);\n            color: #ffffff;\n        }\n\n        #digiverkosto-lisapalvelut .services-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            gap: 25px;\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        #digiverkosto-lisapalvelut .service-card {\n            background: linear-gradient(145deg, #121214 0%, #0d0d0f 100%);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            border-radius: 20px;\n            padding: 40px 35px;\n            text-align: left;\n            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n            backdrop-filter: blur(10px);\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);\n            position: relative;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            gap: 15px;\n        }\n\n        \/* Yl\u00e4reunan korostusviiva korteille *\/\n        #digiverkosto-lisapalvelut .service-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 3px;\n            background: linear-gradient(90deg, transparent, rgb(0, 113, 227), transparent);\n            opacity: 0.5;\n            transition: opacity 0.3s ease;\n        }\n\n        #digiverkosto-lisapalvelut .service-card:hover {\n            border-color: rgba(0, 113, 227, 0.5);\n            transform: translateY(-8px);\n            box-shadow: 0 20px 45px rgba(0, 113, 227, 0.15);\n        }\n\n        #digiverkosto-lisapalvelut .service-card:hover::before {\n            opacity: 1;\n        }\n\n        #digiverkosto-lisapalvelut .service-card h3 {\n            margin: 0;\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            font-weight: 700;\n            font-size: 1.25rem;\n            color: #ffffff;\n        }\n\n        #digiverkosto-lisapalvelut .service-card p {\n            line-height: 1.6;\n            margin: 0;\n            color: #86868b;\n            font-size: 15px;\n        }\n    <\/style>\n\n    <div class=\"services-header\">\n        <span class=\"services-pre-title\">Valmiina kasvamaan?<\/span>\n        <h2>T\u00e4ydenn\u00e4 verkkosivusi tarpeidesi mukaan.<\/h2>\n        <p style=\"margin-top: 15px; color: #86868b; font-size: 17px;\">Haluatko enemm\u00e4n tuloksia? Voit liitt\u00e4\u00e4 sivustosi yhteyteen n\u00e4m\u00e4 tehopalvelut.<\/p>\n    <\/div>\n\n    <div class=\"services-grid\">\n        <div class=\"service-card\">\n            <h3>\u270d\ufe0f Kirjoitusapu<\/h3>\n            <p>S\u00e4\u00e4st\u00e4 aikaa ja varmista viestisi vaikuttavuus. Me kirjoitamme ammattimaiset tekstit puolestasi tai hiomme luonnoksesi myyntivoimaisiksi.<\/p>\n        <\/div>\n        <div class=\"service-card\">\n            <h3>\ud83d\udccd Google Yritysprofiili<\/h3>\n            <p>Varmista, ett\u00e4 l\u00f6ydyt kartalta. Optimoimme Google Yritysprofiilisi kuntoon ja yhdist\u00e4mme sen verkkosivuihisi, jotta paikallinen l\u00f6ydett\u00e4vyys maksimoidaan.<\/p>\n        <\/div>\n        <div class=\"service-card\">\n            <h3>\ud83d\ude80 Hakukoneoptimointi (SEO)<\/h3>\n            <p>Teemme sivustollesi teknisen SEO-rakenteen heti alusta alkaen. T\u00e4m\u00e4 parantaa orgaanista n\u00e4kyvyytt\u00e4si ja houkuttelee enemm\u00e4n laadukkaita k\u00e4vij\u00f6it\u00e4.<\/p>\n        <\/div>\n        <div class=\"service-card\">\n            <h3>\ud83d\udcf8 360- ja dronekuvaus<\/h3>\n            <p>Erotu kilpailijoistasi visuaalisesti. Tarjoamme korkealaatuista drone- ja 360-kuvausta, joilla teet sivustostasi vaikuttavan ja uniikin kokemuksen.<\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<section id=\"digiverkosto-prosessi\">\n    <style>\n        #digiverkosto-prosessi {\n            padding: 90px 6vw;\n            background-color: #070707;\n            color: #ffffff;\n            font-family: inherit, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        }\n\n        #digiverkosto-prosessi .process-header {\n            max-width: 800px;\n            margin: 0 auto 60px auto;\n            text-align: center;\n        }\n\n        #digiverkosto-prosessi .process-pre-title {\n            color: rgb(0, 113, 227);\n            font-size: 14px;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            display: block;\n            margin-bottom: 12px;\n        }\n\n        #digiverkosto-prosessi h2 {\n            font-size: clamp(28px, 4vw, 42px);\n            font-weight: 800;\n            margin: 0;\n            letter-spacing: -0.02em;\n            color: #ffffff;\n        }\n\n        #digiverkosto-prosessi .process-intro {\n            margin-bottom: 30px;\n            color: #86868b;\n        }\n\n        \/* Grid lukittu 3 sarakkeeseen ty\u00f6p\u00f6yd\u00e4ll\u00e4 *\/\n        #digiverkosto-prosessi .process-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 24px;\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        #digiverkosto-prosessi .step-card {\n            background: linear-gradient(145deg, #121214 0%, #0d0d0f 100%);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            border-radius: 20px;\n            padding: 35px 30px;\n            display: flex;\n            flex-direction: column;\n            gap: 20px;\n            transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* Tyylik\u00e4s sininen h\u00e4ivytyskoriste kortin yl\u00e4reunaan (oletuksena pois desktopilla) *\/\n        #digiverkosto-prosessi .step-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 3px;\n            background: linear-gradient(90deg, transparent, rgb(0, 113, 227), transparent);\n            opacity: 0;\n            transition: opacity 0.35s ease;\n        }\n\n        \/* Desktop hover -efektit *\/\n        @media (min-width: 993px) {\n            #digiverkosto-prosessi .step-card:hover {\n                border-color: rgba(0, 113, 227, 0.4);\n                transform: translateY(-6px);\n                box-shadow: 0 20px 40px rgba(0, 113, 227, 0.1);\n            }\n            #digiverkosto-prosessi .step-card:hover::before {\n                opacity: 1;\n            }\n        }\n\n        #digiverkosto-prosessi .step-number {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 48px;\n            height: 48px;\n            background: rgba(0, 113, 227, 0.1);\n            border: 1px solid rgba(0, 113, 227, 0.2);\n            border-radius: 12px;\n            font-size: 1.1rem;\n            font-weight: 800;\n            color: rgb(0, 113, 227);\n            letter-spacing: 0.5px;\n        }\n\n        #digiverkosto-prosessi .step-content h3 {\n            margin: 0 0 12px 0;\n            font-size: 1.25rem;\n            font-weight: 700;\n            color: #ffffff;\n            letter-spacing: -0.01em;\n        }\n\n        #digiverkosto-prosessi .step-content p {\n            line-height: 1.6;\n            margin: 0;\n            color: #86868b;\n            font-size: 15px;\n        }\n\n        #digiverkosto-prosessi .cta-container {\n            margin-top: 50px;\n            text-align: center;\n        }\n\n        \/* Modernisoitu ja tyylik\u00e4s nappi Apple-hengess\u00e4 *\/\n        #digiverkosto-prosessi .neu-button {\n            background-color: rgb(0, 113, 227);\n            color: #ffffff;\n            border-radius: 100px;\n            box-shadow: 0 10px 25px rgba(0, 113, 227, 0.3);\n            cursor: pointer;\n            font-size: 16px;\n            font-weight: 600;\n            padding: 16px 36px;\n            transition: all 0.3s ease;\n            border: none;\n            text-decoration: none;\n            display: inline-block;\n        }\n\n        #digiverkosto-prosessi .neu-button:hover {\n            background-color: #005bbd;\n            transform: translateY(-2px);\n            box-shadow: 0 15px 30px rgba(0, 113, 227, 0.4);\n            color: #ffffff;\n        }\n\n        #digiverkosto-prosessi .neu-button:focus {\n            outline: none;\n        }\n\n        \/* Responsiivisuus ja mobiililukitus (n\u00e4ytt\u00e4v\u00e4t \"hover\"-tyylilt\u00e4 koko ajan mobiilissa) *\/\n        @media (max-width: 992px) {\n            #digiverkosto-prosessi .process-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n            #digiverkosto-prosessi .step-card {\n                border-color: rgba(0, 113, 227, 0.4);\n                box-shadow: 0 20px 40px rgba(0, 113, 227, 0.1);\n            }\n            #digiverkosto-prosessi .step-card::before {\n                opacity: 1;\n            }\n        }\n\n        @media (max-width: 600px) {\n            #digiverkosto-prosessi .process-grid {\n                grid-template-columns: 1fr;\n            }\n            #digiverkosto-prosessi {\n                padding: 60px 1.5rem;\n            }\n            #digiverkosto-prosessi .step-card {\n                border-color: rgba(0, 113, 227, 0.4);\n                box-shadow: 0 20px 40px rgba(0, 113, 227, 0.1);\n            }\n            #digiverkosto-prosessi .step-card::before {\n                opacity: 1;\n            }\n        }\n    <\/style>\n\n    <div class=\"process-header\">\n        <span class=\"process-pre-title\">Miksi k\u00e4yt\u00e4mme WordPressi\u00e4?<\/span>\n        <h2>WordPress on suosituin verkkosivu alusta, ja syyst\u00e4!<\/h2>\n    <\/div>\n\n    <div class=\"process-grid\">\n        <div class=\"step-card\">\n            <div class=\"step-number\">01<\/div>\n            <div class=\"step-content\">\n                <h3>T\u00e4ydellinen vapaus ja omistajuus<\/h3>\n                <p>Avoimen l\u00e4hdekoodin ansiosta et j\u00e4\u00e4 loukkuun yhteen palveluntarjoajaan. Sin\u00e4 omistat sivustosi 100-prosenttisesti. Voit p\u00e4\u00e4tt\u00e4\u00e4 vapaasti, kenen palvelimella sivustoa pidet\u00e4\u00e4n, ja siirt\u00e4\u00e4 sen milloin tahansa toiselle serverille ilman, ett\u00e4 sivustoa tarvitsee rakentaa uudelleen.<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"step-card\">\n            <div class=\"step-number\">02<\/div>\n            <div class=\"step-content\">\n                <h3>Rajaton laajennettavuus ja kustomoidut ratkaisut<\/h3>\n                <p>WordPressille l\u00f6ytyy kattava valikoima valmiita lis\u00e4osia l\u00e4hes mihin tahansa tarpeeseen, oli kyseess\u00e4 ajanvaraus, verkkokauppa tai monikielisyys. Jos taas valmista ratkaisua ei l\u00f6ydy, me koodaamme sen sinulle. Sivusto mukautuu t\u00e4ysin liiketoimintasi tarpeisiin, eik\u00e4 toisin p\u00e4in.<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"step-card\">\n            <div class=\"step-number\">03<\/div>\n            <div class=\"step-content\">\n                <h3>Huippuluokan tietoturva<\/h3>\n                <p>Vastoin yleist\u00e4 luuloa WordPress on eritt\u00e4in turvallinen alusta, kun se yll\u00e4pidet\u00e4\u00e4n oikein. Hy\u00f6dynn\u00e4mme alan parhaita tietoturvalis\u00e4osia sek\u00e4 p\u00e4ivit\u00e4mme j\u00e4rjestelm\u00e4\u00e4 s\u00e4\u00e4nn\u00f6llisesti, jotta sivustosi pysyy suojattuna vuorokauden ymp\u00e4ri.<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"step-card\">\n            <div class=\"step-number\">04<\/div>\n            <div class=\"step-content\">\n                <h3>Maksimaalinen nopeus ja helppous<\/h3>\n                <p>Raskaat ja hitaat sivut menet\u00e4t k\u00e4vij\u00f6it\u00e4. Optimoimme WordPress sivustot niin, ett\u00e4 sivut latautuvat salamannopeasti kaikilla laitteilla. Lis\u00e4ksi sivuston p\u00e4ivitys ja uuden sis\u00e4ll\u00f6n lis\u00e4\u00e4minen on sinulle arjessa vaivatonta ja helppoa.<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"step-card\">\n            <div class=\"step-number\">05<\/div>\n            <div class=\"step-content\">\n                <h3>Ylivoimainen hakukoneoptimointi (SEO)<\/h3>\n                <p>WordPress on rakennettu hakukoneyst\u00e4v\u00e4lliseksi. Tehokkaiden SEO lis\u00e4osien ja puhtaan koodirakenteen ansiosta sivustollesi luodaan parhaat mahdolliset edellytykset nousta Googlen hakutulosten k\u00e4rkeen ja tuoda yrityksellesi uusia asiakkaita.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"cta-container\">\n        <a href=\"https:\/\/digiverkosto.fi\/referenssit\/\" class=\"neu-button\">Tutustu t\u00f6ihimme<\/a>\n    <\/div>\n<\/section>\n\n\n\n<section id=\"digiverkosto-prosessi\">\n    <style>\n        #digiverkosto-prosessi {\n            padding: 80px 6vw;\n        }\n\n        #digiverkosto-prosessi .process-header {\n            max-width: 800px;\n            margin: 0 auto 50px auto;\n            text-align: center;\n        }\n\n        #digiverkosto-prosessi .process-pre-title {\n            color: rgb(0, 113, 227);\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.1em;\n            display: block;\n            margin-bottom: 15px;\n        }\n\n        #digiverkosto-prosessi h2 {\n            font-weight: 800;\n            margin: 10px 0;\n            letter-spacing: -0.02em;\n        }\n\n        #digiverkosto-prosessi .process-intro {\n            margin-bottom: 30px;\n            opacity: 0.8;\n        }\n\n        \/* Grid lukittu 3x2 ty\u00f6p\u00f6yd\u00e4ll\u00e4 *\/\n        #digiverkosto-prosessi .process-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 20px;\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        #digiverkosto-prosessi .step-card {\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            border-radius: 16px;\n            padding: 30px;\n            display: flex;\n            gap: 20px;\n            transition: all 0.3s ease;\n            backdrop-filter: blur(10px);\n        }\n\n        #digiverkosto-prosessi .step-card:hover {\n            border-color: rgba(0, 113, 227, 0.5);\n            transform: translateY(-4px);\n        }\n\n        #digiverkosto-prosessi .step-number {\n            font-size: 1.5rem;\n            font-weight: 800;\n            color: rgb(0, 113, 227);\n            opacity: 0.8;\n        }\n\n        #digiverkosto-prosessi .step-content h3 {\n            margin: 0 0 8px 0;\n            font-weight: 700;\n        }\n\n        #digiverkosto-prosessi .step-content p {\n            line-height: 1.5;\n            margin: 0;\n            opacity: 0.8;\n        }\n\n        #digiverkosto-prosessi .cta-container {\n            margin-top: 60px;\n            text-align: center;\n        }\n\n        \/* Neumorphic Button Styles *\/\n        #digiverkosto-prosessi .neu-button {\n            background-color: #e0e0e0;\n            border-radius: 50px;\n            box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff;\n            color: #4d4d4d;\n            cursor: pointer;\n            font-size: 18px;\n            font-weight: 600;\n            padding: 15px 40px;\n            transition: all 0.2s ease-in-out;\n            border: 2px solid rgb(206, 206, 206);\n            text-decoration: none;\n            display: inline-block;\n        }\n\n        #digiverkosto-prosessi .neu-button:hover {\n            box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;\n        }\n\n        #digiverkosto-prosessi .neu-button:focus {\n            outline: none;\n            box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;\n        }\n\n        \/* Responsiivisuus mobiilille ja tableteille *\/\n        @media (max-width: 992px) {\n            #digiverkosto-prosessi .process-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n\n        @media (max-width: 600px) {\n            #digiverkosto-prosessi .process-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n    <\/style>\n\n    <div class=\"process-header\">\n        <span class=\"process-pre-title\">Ty\u00f6vaiheet<\/span>\n        <h2>L\u00e4pin\u00e4kyv\u00e4 prosessi.<\/h2>\n        <p class=\"process-intro\">Matkasi visiosta valmiiksi myyntikoneistoksi on dokumentoitu ja hallittu.<\/p>\n    <\/div>\n\n    <div class=\"process-grid\">\n        <div class=\"step-card\">\n            <div class=\"step-number\">01<\/div>\n            <div class=\"step-content\">\n                <h3>Strategiakonsultaatio<\/h3>\n                <p>Kartoitamme tavoitteet ja kilpailijat. Rakennamme pohjan, jolla voitat markkinasi.<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"step-card\">\n            <div class=\"step-number\">02<\/div>\n            <div class=\"step-content\">\n                <h3>Suunnittelu<\/h3>\n                <p>Luomme konversioon optimoidun rakenteen ja visuaalisen linjan sivustollesi.<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"step-card\">\n            <div class=\"step-number\">03<\/div>\n            <div class=\"step-content\">\n                <h3>Sis\u00e4ll\u00f6ntuotanto<\/h3>\n                <p>Tuotamme hakukoneoptimoitua teksti\u00e4, joka puhuttelee ja vakuuttaa asiakkaasi.<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"step-card\">\n            <div class=\"step-number\">04<\/div>\n            <div class=\"step-content\">\n                <h3>Tekninen kehitys<\/h3>\n                <p>Kehit\u00e4mme nopean ja turvallisen sivuston, integroiden tarvittavat AI-funktiot.<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"step-card\">\n            <div class=\"step-number\">05<\/div>\n            <div class=\"step-content\">\n                <h3>Testaus ja julkaisu<\/h3>\n                <p>Varmistamme virheett\u00f6m\u00e4n toimivuuden jokaisella laitteella ennen lanseerausta.<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"step-card\">\n            <div class=\"step-number\">06<\/div>\n            <div class=\"step-content\">\n                <h3>Jatkuva tuki<\/h3>\n                <p>Pid\u00e4mme huolen selk\u00e4rangasta, jotta voit keskitty\u00e4 rauhassa liiketoimintasi kasvuun.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"cta-container\">\n        <a href=\"https:\/\/digiverkosto.fi\/ota-yhteytta\/\" class=\"neu-button\">Varaa maksuton puhelu<\/a>\n    <\/div>\n<\/section>\n\n\n\n<section class=\"section faq-section\">\n    <h2 class=\"growth-title reveal\">Usein kysytty\u00e4<\/h2>\n    <p class=\"faq-intro reveal\">T\u00e4ss\u00e4 ovat yleisimm\u00e4t kysymykset ja vastaukset verkkosivuistamme ja yhteisty\u00f6st\u00e4.<\/p>\n    \n    <div class=\"faq-container reveal\">\n        <!-- 1. Hinnat ja pakettisis\u00e4ll\u00f6t -->\n        <div class=\"faq-item\">\n            <button class=\"faq-question\">\n                <span>Paljonko verkkosivut maksavat ja mit\u00e4 paketteihin sis\u00e4ltyy?<\/span>\n                <span class=\"faq-icon\">+<\/span>\n            <\/button>\n            <div class=\"faq-answer\">\n                <p>Verkkosivupakettimme alkavat <strong>259 eurosta<\/strong> (Startti-paketti 1\u20134 sivulle), joka sopii erinomaisesti pienyrityksille ja freelancereille. Laajemmat PK-yritysten sivustot (Kasvu-paketti 5\u201310 sivulle) alkavat 760 eurosta ja laajimmat kokonaisuudet tai verkkokaupat (Strateginen-paketti 10+ sivua \/ WooCommerce) 1099 eurosta.<\/p>\n                <p>Kaikkiin paketteihin sis\u00e4ltyy WordPress-alusta, t\u00e4ysin kustomoitava ja responsiivinen design sek\u00e4 kirkas rakenne ilman piilokuluja. Lis\u00e4palveluina voit liitt\u00e4\u00e4 mukaan mm. sis\u00e4ll\u00f6ntuotannon, k\u00e4\u00e4nn\u00f6kset, ajanvarauksen tai analytiikan.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- 2. Aikataulu ja toimitusnopeus -->\n        <div class=\"faq-item\">\n            <button class=\"faq-question\">\n                <span>Kuinka nopeasti uudet verkkosivut valmistuvat?<\/span>\n                <span class=\"faq-icon\">+<\/span>\n            <\/button>\n            <div class=\"faq-answer\">\n                <p>Aika on yritt\u00e4j\u00e4lle rahaa, joten emme jumita kuukausia turhissa palavereissa. Toimitamme valmiit ja laadukkaat sivut suoraviivaisesti ja nopeasti. Tyypillisesti verkkosivuprojekti valmistuu <strong>1\u20133 viikossa<\/strong> siit\u00e4, kun tarvittava materiaali ja suunnitelma on vahvistettu.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- 3. Yll\u00e4pito ja p\u00e4ivitykset -->\n        <div class=\"faq-item\">\n            <button class=\"faq-question\">\n                <span>Mit\u00e4 verkkosivujen yll\u00e4pito maksaa ja mit\u00e4 se sis\u00e4lt\u00e4\u00e4?<\/span>\n                <span class=\"faq-icon\">+<\/span>\n            <\/button>\n            <div class=\"faq-answer\">\n                <p>Tarjoamme huoltomattoman ja turvallisen yll\u00e4pidon hintaan <strong>150 \u20ac \/ vuosi<\/strong>. Yll\u00e4pitopalvelu sis\u00e4lt\u00e4\u00e4 nopean palvelintilan, domainin, tietoturvap\u00e4ivitykset, lis\u00e4osien ja teemojen s\u00e4\u00e4nn\u00f6llisen huollon sek\u00e4 nopean teknisen tuen ja yhteydenoton saatavuuden, jotta sivusi pysyv\u00e4t aina pystyss\u00e4.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- 4. Miksi WordPress? -->\n        <div class=\"faq-item\">\n            <button class=\"faq-question\">\n                <span>Miksi valita juuri WordPress-verkkosivut?<\/span>\n                <span class=\"faq-icon\">+<\/span>\n            <\/button>\n            <div class=\"faq-answer\">\n                <p>WordPress antaa sinulle <strong>100 % omistajuuden ja t\u00e4ydellisen vapauden<\/strong> \u2013 et j\u00e4\u00e4 koskaan loukkuun tiettyyn suljettuun j\u00e4rjestelm\u00e4\u00e4n. Se tarjoaa rajattoman laajennettavuuden (kuten ajanvaraukset ja verkkokaupat), parhaan mahdollisen hakukoneoptimointipohjan (SEO) sek\u00e4 salamannopean suorituskyvyn oikein optimoituna.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- 5. Tyytyv\u00e4isyystakuu ja luotettavuus -->\n        <div class=\"faq-item\">\n            <button class=\"faq-question\">\n                <span>Mit\u00e4 jos en ole tyytyv\u00e4inen sivujen ulkoasutoteutukseen?<\/span>\n                <span class=\"faq-icon\">+<\/span>\n            <\/button>\n            <div class=\"faq-answer\">\n                <p>Meill\u00e4 on k\u00e4yt\u00f6ss\u00e4 <strong>tyytyv\u00e4isyystakuu<\/strong>: sivut ovat valmiit vasta silloin, kun olet niihin sataprosenttisesti tyytyv\u00e4inen. Hiomme ja muokkaamme yksityiskohdat kuntoon yhteisty\u00f6ss\u00e4 niin kauan, ett\u00e4 lopputulos vastaa t\u00e4ydellisesti visiotasi.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- 6. Lis\u00e4palvelut (SEO, Tekstit, Drone\/360) -->\n        <div class=\"faq-item\">\n            <button class=\"faq-question\">\n                <span>Saanko apua tekstien kirjoittamiseen, kuvaukseen tai hakukonen\u00e4kyvyyteen?<\/span>\n                <span class=\"faq-icon\">+<\/span>\n            <\/button>\n            <div class=\"faq-answer\">\n                <p>Kyll\u00e4! Voit t\u00e4ydent\u00e4\u00e4 sivustoasi tarpeesi mukaan tehopalveluillamme: tarjoamme ammattimaisen <strong>kirjoitusavun ja sis\u00e4ll\u00f6ntuotannon<\/strong>, <strong>Google Yritysprofiilin optimoinnin<\/strong>, hakukoneoptimoinnin (SEO) sek\u00e4 vaikuttavat <strong>360- ja dronekuvaukset<\/strong> erottuvan visuaalisen ilmeen luomiseksi.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- 7. Ty\u00f6vaiheet ja prosessi -->\n        <div class=\"faq-item\">\n            <button class=\"faq-question\">\n                <span>Miten verkkosivuprojekti etenemme k\u00e4yt\u00e4nn\u00f6ss\u00e4?<\/span>\n                <span class=\"faq-icon\">+<\/span>\n            <\/button>\n            <div class=\"faq-answer\">\n                <p>Prosessi on selke\u00e4 ja 6-vaiheinen: <strong>1. Strategiakonsultaatio<\/strong> (tavoitteiden kartoitus), <strong>2. Suunnittelu<\/strong> (rakenne ja visuaalinen linja), <strong>3. Sis\u00e4ll\u00f6ntuotanto<\/strong>, <strong>4. Tekninen kehitys<\/strong>, <strong>5. Testaus ja julkaisu<\/strong> sek\u00e4 <strong>6. Jatkuva tuki ja yll\u00e4pito<\/strong>.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- 8. Muokkaukset julkaisun j\u00e4lkeen -->\n        <div class=\"faq-item\">\n            <button class=\"faq-question\">\n                <span>Pystynk\u00f6 p\u00e4ivitt\u00e4m\u00e4\u00e4n sivujani itse julkaisun j\u00e4lkeen?<\/span>\n                <span class=\"faq-icon\">+<\/span>\n            <\/button>\n            <div class=\"faq-answer\">\n                <p>Kyll\u00e4 pystyt. WordPress-sivustomme rakennetaan niin, ett\u00e4 tekstitietojen, kuvien ja uusien julkaisujen p\u00e4ivitt\u00e4minen on sinulle arjessa mahdollisimman vaivatonta ja helppoa. Tarvittaessa opastamme sinua hallintapaneelin k\u00e4yt\u00f6ss\u00e4.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .faq-section {\n        background: transparent !important;\n        background-color: transparent !important;\n        padding: 100px 20px;\n        font-family: inherit;\n        position: relative;\n        z-index: 2;\n    }\n\n    .faq-container {\n        max-width: 850px;\n        margin: 0 auto;\n    }\n\n    .faq-intro {\n        text-align: center;\n        color: #a1a1a6;\n        font-size: 1.1rem;\n        margin-bottom: 40px;\n        margin-top: -30px;\n    }\n\n    .faq-item {\n        border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n    }\n\n    .faq-question {\n        width: 100%;\n        padding: 30px 0;\n        background: none;\n        border: none;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        cursor: pointer;\n        color: #f5f5f7;\n        font-size: clamp(17px, 2.5vw, 21px);\n        font-weight: 600;\n        text-align: left;\n        line-height: 1.4;\n    }\n\n    .faq-question span:first-child {\n        padding-right: 20px;\n    }\n\n    .faq-icon {\n        font-size: 24px;\n        color: #86868b;\n        transition: transform 0.4s ease;\n        flex-shrink: 0;\n    }\n\n    .faq-item.active .faq-icon {\n        transform: rotate(45deg);\n        color: #0071e3;\n    }\n\n    .faq-answer {\n        max-height: 0;\n        overflow: hidden;\n        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n        color: #86868b;\n        font-size: 17px;\n        line-height: 1.6;\n    }\n\n    .faq-item.active .faq-answer {\n        max-height: 800px;\n        padding-bottom: 30px;\n    }\n\n    .faq-answer p { margin-bottom: 15px; }\n    \n    .faq-answer strong {\n        color: #f5f5f7;\n    }\n\n    .growth-title {\n        font-size: clamp(32px, 5vw, 48px);\n        font-weight: 700;\n        text-align: center;\n        margin-bottom: 50px;\n        background: linear-gradient(180deg, #fff 0%, #86868b 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    \/* Mobiilioptimointi *\/\n    @media (max-width: 600px) {\n        .faq-question {\n            font-size: 16px;\n            padding: 20px 0;\n        }\n        .faq-answer {\n            font-size: 15px;\n        }\n    }\n<\/style>\n\n<script>\n    document.querySelectorAll('.faq-question').forEach(button => {\n        button.addEventListener('click', () => {\n            const item = button.parentElement;\n            \n            \/\/ Poista n\u00e4iden kommenttimerkit (\/\/), jos haluat ett\u00e4 vain yksi kysymys voi olla auki kerrallaan\n            \/\/ document.querySelectorAll('.faq-item').forEach(otherItem => {\n            \/\/     if(otherItem !== item) otherItem.classList.remove('active');\n            \/\/ });\n\n            item.classList.toggle('active');\n        });\n    });\n<\/script>\n<\/div>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@graph\": [\n    {\n      \"@type\": \"FAQPage\",\n      \"@id\": \"https:\/\/digiverkosto.fi\/#faq\",\n      \"mainEntity\": [\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Paljonko verkkosivut maksavat ja mit\u00e4 paketteihin sis\u00e4ltyy?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Verkkosivupakettimme alkavat 259 eurosta (Startti-paketti 1\u20134 sivulle). Laajemmat PK-yritysten sivustot alkavat 760 eurosta (Kasvu-paketti 5\u201310 sivulle) ja laajimmat kokonaisuudet tai verkkokaupat 1099 eurosta (Strateginen-paketti 10+ sivua \/ WooCommerce). Kaikkiin paketteihin sis\u00e4ltyy WordPress-alusta, responsiivinen design sek\u00e4 t\u00e4ysi kustomoitavuus ilman piilokuluja.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Kuinka nopeasti uudet verkkosivut valmistuvat?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Toimitamme valmiit ja laadukkaat sivut suoraviivaisesti ja nopeasti. Tyypillisesti verkkosivuprojekti valmistuu 1\u20133 viikossa siit\u00e4, kun tarvittava materiaali ja suunnitelma on vahvistettu.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Mit\u00e4 verkkosivujen yll\u00e4pito maksaa ja mit\u00e4 se sis\u00e4lt\u00e4\u00e4?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Yll\u00e4pitopalvelumme maksaa 150 \u20ac \/ vuosi. Se sis\u00e4lt\u00e4\u00e4 palvelintilan, domainin, tietoturvap\u00e4ivitykset, lis\u00e4osien ja teemojen s\u00e4\u00e4nn\u00f6llisen huollon sek\u00e4 nopean teknisen tuen ja yhteydenoton saatavuuden.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Miksi valita juuri WordPress-verkkosivut?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"WordPress antaa sinulle 100 % omistajuuden ja t\u00e4ydellisen vapauden ilman lukkiutumista suljettuihin j\u00e4rjestelmiin. Se tarjoaa rajattoman laajennettavuuden, parhaan hakukoneoptimointipohjan (SEO) sek\u00e4 salamannopean suorituskyvyn.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Mit\u00e4 jos en ole tyytyv\u00e4inen sivujen ulkoasutoteutukseen?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Meill\u00e4 on k\u00e4yt\u00f6ss\u00e4 tyytyv\u00e4isyystakuu: sivut ovat valmiit vasta silloin, kun olet niihin sataprosenttisesti tyytyv\u00e4inen. Hiomme yksityiskohdat kuntoon niin kauan, ett\u00e4 lopputulos vastaa t\u00e4ydellisesti visiotasi.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Saanko apua tekstien kirjoittamiseen, kuvaukseen tai hakukonen\u00e4kyvyyteen?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Kyll\u00e4! Voit t\u00e4ydent\u00e4\u00e4 sivustoasi tehopalveluillamme: tarjoamme ammattimaisen kirjoitusavun ja sis\u00e4ll\u00f6ntuotannon, Google Yritysprofiilin optimoinnin, hakukoneoptimoinnin (SEO) sek\u00e4 360- ja dronekuvaukset.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Miten verkkosivuprojekti etenemme k\u00e4yt\u00e4nn\u00f6ss\u00e4?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Prosessi on 6-vaiheinen: 1. Strategiakonsultaatio, 2. Suunnittelu, 3. Sis\u00e4ll\u00f6ntuotanto, 4. Tekninen kehitys, 5. Testaus ja julkaisu sek\u00e4 6. Jatkuva tuki ja yll\u00e4pito.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Pystynk\u00f6 p\u00e4ivitt\u00e4m\u00e4\u00e4n sivujani itse julkaisun j\u00e4lkeen?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Kyll\u00e4 pystyt. WordPress-sivustomme rakennetaan niin, ett\u00e4 tekstitietojen, kuvien ja uusien julkaisujen p\u00e4ivitt\u00e4minen on sinulle arjessa mahdollisimman vaivatonta ja helppoa.\"\n          }\n        }\n      ]\n    },\n    {\n      \"@type\": \"WebDesignCompany\",\n      \"@id\": \"https:\/\/digiverkosto.fi\/#organization\",\n      \"name\": \"Digiverkosto Oy\",\n      \"url\": \"https:\/\/digiverkosto.fi\",\n      \"priceRange\": \"259 \u20ac - 1099 \u20ac\",\n      \"description\": \"WordPress-verkkosivut, hakukoneoptimointi, digitaalinen markkinointi sek\u00e4 360- ja dronekuvaukset yrityksille.\",\n      \"areaServed\": {\n        \"@type\": \"Country\",\n        \"name\": \"Finland\"\n      },\n      \"hasOfferCatalog\": {\n        \"@type\": \"OfferCatalog\",\n        \"name\": \"Verkkosivupaketit ja yll\u00e4pito\",\n        \"itemListElement\": [\n          {\n            \"@type\": \"Offer\",\n            \"itemOffered\": {\n              \"@type\": \"Service\",\n              \"name\": \"Startti-verkkosivupaketti\",\n              \"description\": \"1\u20134 sivun WordPress-verkkosivukokonaisuus pienyrityksille ja freelancereille.\"\n            },\n            \"price\": \"259.00\",\n            \"priceCurrency\": \"EUR\"\n          },\n          {\n            \"@type\": \"Offer\",\n            \"itemOffered\": {\n              \"@type\": \"Service\",\n              \"name\": \"Kasvu-verkkosivupaketti\",\n              \"description\": \"5\u201310 sivun laajempi WordPress-verkkosivusto PK-yrityksille.\"\n            },\n            \"price\": \"760.00\",\n            \"priceCurrency\": \"EUR\"\n          },\n          {\n            \"@type\": \"Offer\",\n            \"itemOffered\": {\n              \"@type\": \"Service\",\n              \"name\": \"Strateginen \/ Verkkokauppa-paketti\",\n              \"description\": \"10+ sivua tai WooCommerce-verkkokauppa r\u00e4\u00e4t\u00e4l\u00f6idyill\u00e4 integraatioilla.\"\n            },\n            \"price\": \"1099.00\",\n            \"priceCurrency\": \"EUR\"\n          },\n          {\n            \"@type\": \"Offer\",\n            \"itemOffered\": {\n              \"@type\": \"Service\",\n              \"name\": \"Huoleton yll\u00e4pito\",\n              \"description\": \"Palvelintila, domain, tietoturvap\u00e4ivitykset ja teemojen\/lis\u00e4osien s\u00e4\u00e4nn\u00f6llinen yll\u00e4pito.\"\n            },\n            \"price\": \"150.00\",\n            \"priceCurrency\": \"EUR\"\n          }\n        ]\n      }\n    }\n  ]\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Verkkosivut ilman s\u00e4\u00e4t\u00f6\u00e4 Unohda turhat ongelmat, mystiset virheet ja piilokulut. Rakennamme Digiverkostolla sivut, jotka n\u00e4ytt\u00e4v\u00e4t hyv\u00e4lt\u00e4, toimivat aina ja tuovat [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7312","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages\/7312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/comments?post=7312"}],"version-history":[{"count":16,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages\/7312\/revisions"}],"predecessor-version":[{"id":7707,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages\/7312\/revisions\/7707"}],"wp:attachment":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/media?parent=7312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}