{"id":6688,"date":"2026-06-20T14:04:02","date_gmt":"2026-06-20T11:04:02","guid":{"rendered":"https:\/\/digiverkosto.fi\/?page_id=6688"},"modified":"2026-11-08T16:10:11","modified_gmt":"2026-11-08T14:10:11","slug":"referenssit","status":"publish","type":"page","link":"https:\/\/digiverkosto.fi\/en\/referenssit\/","title":{"rendered":"References"},"content":{"rendered":"\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<section class=\"hero-section\">\n  <div class=\"hero-content\">\n    <h1 class=\"growth-title-mega-pro\">Referenssit<\/h1>\n    <p class=\"hero-subtitle\">Kaikki palvelut yrityksellesi samasta paikasta<\/p>\n    <div class=\"hero-button-group\">\n      <a href=\"https:\/\/digiverkosto.fi\/varaa-aika\/\" class=\"dv-button\">\n        Varaa aika\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=\"https:\/\/digiverkosto.fi\/ota-yhteytta\" class=\"dv-button outline-button\">\n        Pyyd\u00e4 tarjous\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    .hero-section {\n        background: transparent !important;\n        background-color: transparent !important;\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        padding: 4vh 5vw;\n        box-sizing: border-box;\n        overflow-x: hidden;\n    }\n\n    .hero-content {\n        max-width: 1000px;\n        width: 100%;\n        margin: 0 auto;\n        text-align: center;\n        box-sizing: border-box;\n    }\n\n    .growth-title-mega-pro {\n        font-family: inherit;\n        font-size: clamp(50px, 14vw, 120px); \n        font-weight: 900; \n        line-height: 1.4; \n        letter-spacing: -0.02em; \n        text-align: center;\n        margin-top: 0 !important;\n        margin-bottom: 24px !important; \n        background: linear-gradient(\n            180deg, \n            #ffffff 0%, \n            #ffffff 45%, \n            #a1a1a6 80%, \n            #6e6e73 100%\n        );\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        display: block;\n        width: 100%;\n        filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.5));\n        -webkit-font-smoothing: antialiased;\n        text-rendering: optimizeLegibility;\n        word-wrap: break-word;\n    }\n\n    .hero-subtitle {\n        font-family: inherit;\n        font-size: 1.5rem;\n        color: #86868b;\n        text-align: center;\n        font-weight: 500;\n        margin-top: 0 !important;\n        margin-bottom: 40px !important; \n        line-height: 1.4;\n        display: block;\n        max-width: 700px;\n        margin-left: auto;\n        margin-right: auto;\n        word-wrap: break-word;\n    }\n\n    \/* Nappiryhm\u00e4n asettelu *\/\n    .hero-button-group {\n        display: flex;\n        gap: 20px;\n        justify-content: center;\n        align-items: center;\n        flex-wrap: wrap;\n        margin-top: 0 !important; \n        margin-bottom: 0 !important;\n        padding-top: 0; \n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    \/* Modernit Digiverkoston napit *\/\n    .hero-button-group .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        box-sizing: border-box;\n    }\n\n    .hero-button-group .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-button-group .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-button-group .dv-button:hover .dv-btn-icon {\n        transform: translate(4px);\n    }\n\n    .hero-button-group .dv-button:hover::before {\n        animation: dv-shine 1.5s ease-out infinite;\n    }\n\n    .hero-button-group .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-button-group .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-button-group .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    @media (max-width: 1024px) {\n        .growth-title-mega-pro {\n            letter-spacing: -0.05em;\n        }\n    }\n    \n    @media (max-width: 600px) {\n        .hero-section {\n            padding: 30px 15px;\n        }\n\n        .growth-title-mega-pro {\n            font-size: clamp(40px, 20vw, 50px);\n            line-height: 1.1;\n            margin-bottom: 16px !important;\n        }\n\n        .hero-subtitle {\n            font-size: 1.125rem;\n            margin-bottom: 30px !important;\n            padding: 0 10px;\n        }\n        \n        .hero-button-group {\n            flex-direction: column;\n            align-items: stretch;\n            gap: 15px;\n            padding: 0 15px;\n            margin-top: 0 !important;\n        }\n        \n        .hero-button-group .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<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-ba1191e6 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<style>\n    :root {\n        --bg-clean: #070707;\n        --bg-card: #121214;\n        --text-pure: #ffffff;\n        --text-dimmed: #86868b;\n        --accent-blue: #0071e3;\n        --accent-blue-hover: #005bbd;\n        --border-subtle: rgba(255, 255, 255, 0.08);\n    }\n\n    .grid-portfolio-section {\n        background-color: var(--bg-clean);\n        padding: 100px 2rem;\n        color: var(--text-pure);\n        font-family: inherit, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    }\n\n    .portfolio-max-container {\n        max-width: 1200px;\n        margin: 0 auto;\n    }\n\n    \/* Otsikkoalue *\/\n    .portfolio-clean-header {\n        text-align: center;\n        margin-bottom: 60px;\n    }\n\n    .clean-tag {\n        color: var(--accent-blue);\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    .clean-title {\n        font-size: clamp(32px, 5vw, 48px);\n        font-weight: 800;\n        letter-spacing: -0.02em;\n        margin: 0;\n    }\n\n    \/* --- OSA 1: 4 ENSIMM\u00c4IST\u00c4 (Isot kortit) --- *\/\n    .portfolio-featured-grid {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 3rem;\n        margin-bottom: 5rem;\n    }\n\n    .portfolio-grid-card {\n        background-color: var(--bg-card);\n        border: 1px solid var(--border-subtle);\n        border-radius: 20px;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        box-shadow: 0 20px 40px rgba(0,0,0,0.3);\n        transition: transform 0.3s ease, border-color 0.3s ease;\n    }\n\n    .portfolio-grid-card:hover {\n        transform: translateY(-4px);\n        border-color: rgba(255, 255, 255, 0.15);\n    }\n\n    .card-image-wrapper {\n        width: 100%;\n        border-bottom: 1px solid var(--border-subtle);\n        background: #161617;\n    }\n\n    .card-image-wrapper img {\n        width: 100%;\n        height: auto;\n        display: block;\n        object-fit: contain;\n    }\n\n    .card-info-content {\n        padding: 2.5rem;\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n    }\n\n    .card-info-content h3 {\n        font-size: 1.75rem;\n        font-weight: 700;\n        margin: 0 0 1rem 0;\n    }\n\n    .story-dropdown {\n        cursor: pointer;\n        margin-bottom: 1.5rem;\n    }\n\n    .story-preview {\n        font-size: 17px;\n        line-height: 1.6;\n        color: var(--text-dimmed);\n        margin: 0;\n        display: block; \/* Muutettu inline-blockista selkeyden vuoksi *\/\n    }\n\n    .story-full-wrapper {\n        display: grid;\n        grid-template-rows: 0fr;\n        transition: grid-template-rows 0.35s cubic-bezier(0.25, 1, 0.5, 1);\n    }\n\n    .story-full-inner { overflow: hidden; }\n\n    .story-extended-text {\n        font-size: 17px;\n        line-height: 1.6;\n        color: var(--text-dimmed);\n        padding-top: 0.5rem;\n        margin: 0;\n    }\n\n    .toggle-story-btn {\n        background: none;\n        border: none;\n        color: #ffffff;\n        font-size: 14px;\n        font-weight: 600;\n        padding: 0;\n        margin-top: 0.5rem;\n        cursor: pointer;\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        opacity: 0.6;\n    }\n\n    .toggle-story-btn svg { transition: transform 0.3s ease; }\n\n    \/* CSS hoitaa tekstien vaihdon ja nuolen k\u00e4\u00e4nn\u00f6n (K\u00e4\u00e4nt\u00e4j\u00e4yst\u00e4v\u00e4llinen tapa!) *\/\n    .text-close { display: none; }\n    .story-dropdown.is-open .text-close { display: inline; }\n    .story-dropdown.is-open .text-read { display: none; }\n    \n    .story-dropdown.is-open .story-full-wrapper { grid-template-rows: 1fr; }\n    .story-dropdown.is-open .toggle-story-btn svg { transform: rotate(180deg); }\n\n    .visit-btn {\n        display: inline-block;\n        background-color: var(--accent-blue);\n        color: #ffffff;\n        padding: 0.8rem 1.75rem;\n        border-radius: 8px;\n        font-weight: 600;\n        font-size: 15px;\n        text-decoration: none;\n        transition: background-color 0.2s;\n        text-align: center;\n    }\n\n    .visit-btn:hover { background-color: var(--accent-blue-hover); }\n\n    \/* --- OSA 2: LOPUT MASSANA (Pienemm\u00e4t laatikot kuvilla) --- *\/\n    .mini-section-title {\n        font-size: 20px;\n        font-weight: 700;\n        color: var(--text-dimmed);\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        margin-bottom: 2rem;\n        border-bottom: 1px solid var(--border-subtle);\n        padding-bottom: 1rem;\n    }\n\n    .portfolio-mass-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 1.5rem;\n    }\n\n    .portfolio-mini-card {\n        background-color: var(--bg-card);\n        border: 1px solid var(--border-subtle);\n        border-radius: 14px;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        transition: transform 0.2s, border-color 0.2s;\n        box-shadow: 0 10px 25px rgba(0,0,0,0.2);\n    }\n\n    .portfolio-mini-card:hover {\n        transform: translateY(-2px);\n        border-color: rgba(255, 255, 255, 0.15);\n    }\n\n    .mini-card-image-wrapper {\n        width: 100%;\n        height: 160px;\n        background: #161617;\n        border-bottom: 1px solid var(--border-subtle);\n        overflow: hidden;\n    }\n\n    .mini-card-image-wrapper img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    .mini-card-text-content {\n        padding: 1.5rem;\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n        gap: 1rem;\n    }\n\n    .mini-card-header .mini-category {\n        color: var(--accent-blue);\n        font-size: 11px;\n        font-weight: 700;\n        text-transform: uppercase;\n        display: block;\n        margin-bottom: 4px;\n        letter-spacing: 0.5px;\n    }\n\n    .mini-card-header h4 {\n        font-size: 1.25rem;\n        font-weight: 700;\n        margin: 0 0 0.5rem 0;\n    }\n\n    .mini-card-header p {\n        font-size: 14px;\n        line-height: 1.5;\n        color: var(--text-dimmed);\n        margin: 0;\n    }\n\n    .mini-card-link {\n        color: var(--text-pure);\n        font-size: 14px;\n        font-weight: 600;\n        text-decoration: none;\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        margin-top: auto;\n        transition: color 0.2s;\n    }\n\n    .mini-card-link:hover {\n        color: var(--accent-blue);\n    }\n\n    \/* RESPONSIVISUUS *\/\n    @media (max-width: 992px) {\n        .portfolio-featured-grid {\n            grid-template-columns: 1fr;\n            gap: 2.5rem;\n        }\n        .portfolio-mass-grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n        .card-info-content { padding: 2rem 1.5rem; }\n    }\n\n    @media (max-width: 650px) {\n        .portfolio-mass-grid {\n            grid-template-columns: 1fr;\n        }\n        .grid-portfolio-section { padding: 60px 1rem; }\n        .mini-card-image-wrapper { height: 180px; }\n    }\n<\/style>\n\n<section class=\"grid-portfolio-section\">\n    <div class=\"portfolio-max-container\">\n        \n        <div class=\"portfolio-clean-header\">\n            <span class=\"clean-tag\">Referenssit<\/span>\n            <h2 class=\"clean-title\">Verkkosivut<\/h2>\n        <\/div>\n\n        <!-- 4 ENSIMM\u00c4IST\u00c4 ISOA KORTTIA (Kaikki tekstit valmiina HTML:ss\u00e4) -->\n        <div class=\"portfolio-featured-grid\">\n            \n            <!-- Kohde 1: Kaustinen -->\n            <div class=\"portfolio-grid-card\">\n                <div class=\"card-image-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/06\/digiverkosto-referenssit-kaustinen-festarit.png\" alt=\"Kaustinen Folk Music Festival\" loading=\"lazy\">\n                <\/div>\n                <div class=\"card-info-content\">\n                    <h3>Kaustinen Folk Music Festival<\/h3>\n                    <div class=\"story-dropdown\" onclick=\"toggleStory(this)\">\n                        <p class=\"story-preview\">Toteutimme asiakkaalle sivuston optimoinnin ja yll\u00e4pidon.<\/p>\n                        <div class=\"story-full-wrapper\">\n                            <div class=\"story-full-inner\">\n                                <p class=\"story-extended-text\">Asiakas tarvitsi suuren ja nopean palvelintilan sivuston yll\u00e4pitoa ja suurta kausittaista k\u00e4vij\u00e4m\u00e4\u00e4r\u00e4\u00e4 varten.<\/p>\n                            <\/div>\n                        <\/div>\n                        <button class=\"toggle-story-btn\">\n                            <span class=\"text-read\">Lue koko tarina<\/span>\n                            <span class=\"text-close\">Sulje tarina<\/span>\n                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"><\/path><\/svg>\n                        <\/button>\n                    <\/div>\n                    <div style=\"margin-top: auto; padding-top: 1rem;\">\n                        <a href=\"https:\/\/kaustinen.net\" class=\"visit-btn\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Kohde 2: Kemora -->\n            <div class=\"portfolio-grid-card\">\n                <div class=\"card-image-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/02\/sivusta-referenssit-kemora.png\" alt=\"Kemoran moottorirata\" loading=\"lazy\">\n                <\/div>\n                <div class=\"card-info-content\">\n                    <h3>Kemoran moottorirata<\/h3>\n                    <div class=\"story-dropdown\" onclick=\"toggleStory(this)\">\n                        <p class=\"story-preview\">Toteutimme Kemoran moottoriradalle t\u00e4ydellisen verkkosivuston uudistuksen.<\/p>\n                        <div class=\"story-full-wrapper\">\n                            <div class=\"story-full-inner\">\n                                <p class=\"story-extended-text\">Uusi sivusto palvelee niin ratap\u00e4ivien harrastajia, kilpailijoita kuin yleis\u00f6\u00e4kin modernilla tavalla.<\/p>\n                            <\/div>\n                        <\/div>\n                        <button class=\"toggle-story-btn\">\n                            <span class=\"text-read\">Lue koko tarina<\/span>\n                            <span class=\"text-close\">Sulje tarina<\/span>\n                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"><\/path><\/svg>\n                        <\/button>\n                    <\/div>\n                    <div style=\"margin-top: auto; padding-top: 1rem;\">\n                        <a href=\"https:\/\/kemora.fi\" class=\"visit-btn\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Kohde 3: MyBalance -->\n            <div class=\"portfolio-grid-card\">\n                <div class=\"card-image-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/06\/Digiverkosto-referenssit-mybalance.png\" alt=\"MyBalance\" loading=\"lazy\">\n                <\/div>\n                <div class=\"card-info-content\">\n                    <h3>MyBalance<\/h3>\n                    <div class=\"story-dropdown\" onclick=\"toggleStory(this)\">\n                        <p class=\"story-preview\">Toteutimme MyBalance alustan rakentamisen ja suunnittelun.<\/p>\n                        <div class=\"story-full-wrapper\">\n                            <div class=\"story-full-inner\">\n                                <p class=\"story-extended-text\">Rakensimme selke\u00e4n alustan, joka tarjoaa hyvinvointiin liittyvi\u00e4 kursseja ja materiaaleja, joita alustalle rekister\u00f6ityv\u00e4t sis\u00e4ll\u00f6ntuottajat myyv\u00e4t.<\/p>\n                            <\/div>\n                        <\/div>\n                        <button class=\"toggle-story-btn\">\n                            <span class=\"text-read\">Lue koko tarina<\/span>\n                            <span class=\"text-close\">Sulje tarina<\/span>\n                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"><\/path><\/svg>\n                        <\/button>\n                    <\/div>\n                    <div style=\"margin-top: auto; padding-top: 1rem;\">\n                        <a href=\"https:\/\/mybalance.fi\" class=\"visit-btn\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Kohde 4: Day Spa Ylellisyys -->\n            <div class=\"portfolio-grid-card\">\n                <div class=\"card-image-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/06\/digiverkosto-referenssit-day-spa.png\" alt=\"Day Spa Ylellisyys\" loading=\"lazy\">\n                <\/div>\n                <div class=\"card-info-content\">\n                    <h3>Day Spa Ylellisyys<\/h3>\n                    <div class=\"story-dropdown\" onclick=\"toggleStory(this)\">\n                        <p class=\"story-preview\">Upea sivustoprojekti kauneushoitoalanammattilaiselle.<\/p>\n                        <div class=\"story-full-wrapper\">\n                            <div class=\"story-full-inner\">\n                                <p class=\"story-extended-text\">Sivuston tavoitteena oli rakentaa asiakkaallemme premium esittely h\u00e4nen tuottamastaan yleellisest\u00e4 palvelusta ja esitell\u00e4 h\u00e4nen ammattitaitonsa, palvelunsa korkea laatu, sek\u00e4 asiakasl\u00e4ht\u00f6inen toiminta joka on suunniteltu tarkkaan asiakkaita ajatellen.<\/p>\n                            <\/div>\n                        <\/div>\n                        <button class=\"toggle-story-btn\">\n                            <span class=\"text-read\">Lue koko tarina<\/span>\n                            <span class=\"text-close\">Sulje tarina<\/span>\n                            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"><\/path><\/svg>\n                        <\/button>\n                    <\/div>\n                    <div style=\"margin-top: auto; padding-top: 1rem;\">\n                        <a href=\"https:\/\/dayspaylellisyys.fi\/\" class=\"visit-btn\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <!-- LOPUT PROJEKTIT (Massagrid) -->\n        <div id=\"massSection\">\n            <h3 class=\"mini-section-title\">Muita projektejamme<\/h3>\n            <div class=\"portfolio-mass-grid\">\n                \n                <!-- Sallamarin jalkaterapia -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/06\/digiverkosto-referenssit-sallamarin-jalkaterapia.png\" alt=\"Sallamarin jalkaterapia\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Verkkosivut<\/span>\n                            <h4>Sallamarin jalkaterapia<\/h4>\n                            <p>Rakensimme asiakkaalle alusta alkaen kokonaan uudet verkkosivut.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/sallamarinjalkaterapia.fi\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- Lev\u00e4hdyshetki -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/06\/digiverkosto-referenssit-levahdyshetki.png\" alt=\"Lev\u00e4hdyshetki\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Verkkosivut<\/span>\n                            <h4>Lev\u00e4hdyshetki<\/h4>\n                            <p>Asiakkaamme tarvitsi uudet, selke\u00e4t ja mobiililaitteelle optimoidut sivut.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/levahdyshetki.fi\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- Turvallisuuskumppani -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/06\/digiverkosto-referenssit-turvallisuuskumppani.png\" alt=\"Turvallisuuskumppani\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Verkkosivut<\/span>\n                            <h4>Turvallisuuskumppani<\/h4>\n                            <p>Asiakkaamme tarvitsi uudet, selke\u00e4t ja mobiililaitteelle optimoidut sivut.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/turvallisuuskumppani.com\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- JJ STYLE -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2025\/11\/sivusta-referenssit-jjstyle.png\" alt=\"JJ STYLE\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Verkkosivut<\/span>\n                            <h4>JJ STYLE<\/h4>\n                            <p>Verkkosivut toteutettiin asiakkaan toiveiden mukaisesti, teknisesti jokaiselle laitteelle toimivaksi.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/jjstyle.fi\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- Roosasaarinenart -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/06\/digiverkosto-referenssi-roosasaarinenart.png\" alt=\"Roosasaarinenart\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Verkkosivut<\/span>\n                            <h4>Roosasaarinenart<\/h4>\n                            <p>Toteutimme nuorella yritt\u00e4j\u00e4lle h\u00e4nen toimintaan sopivan premium sivuston.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/roosasaarinenart.com\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- Mets\u00e4ty\u00f6 Koski Oy -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2025\/11\/sivusta-referenssit-metsatyo-koski.png\" alt=\"Mets\u00e4ty\u00f6 Koski Oy\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Verkkosivut<\/span>\n                            <h4>Mets\u00e4ty\u00f6 Koski Oy<\/h4>\n                            <p>Toteutimme Mets\u00e4ty\u00f6 Koski Oy:lle suoraviivaisen ja vakuuttavan verkkosivuston.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/metsatyokoskioy.fi\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- AP-Autokorjaamo -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/01\/sivusta-referenssit-Ap-Autokorjaamo.png\" alt=\"AP-Autokorjaamo\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Verkkosivut<\/span>\n                            <h4>AP-Autokorjaamo<\/h4>\n                            <p>Uudistimme AP Autokorjaamon verkkosivuston siirt\u00e4m\u00e4ll\u00e4 sen Wix-ymp\u00e4rist\u00f6st\u00e4 WordPressille.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/ap-autokorjaamo.fi\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- Taloushuoltamo -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/06\/digiverkosto-referenssit-taloushuoltamo.png\" alt=\"Taloushuoltamo\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Yll\u00e4pito ja optimointi<\/span>\n                            <h4>Taloushuoltamo<\/h4>\n                            <p>Yll\u00e4pitopalvelu meid\u00e4n k\u00e4ytt\u00e4m\u00e4lle, ammattimaiselle ja luotettavalle tilitoimistolle.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/taloushuoltamo.fi\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- Cropter -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/09\/digiverkosto-referenssit-cropter-1.png\" alt=\"Cropter\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Verkkosivut<\/span>\n                            <h4>Cropter<\/h4>\n                            <p>Verkkosivun rakennus yhteisty\u00f6kumppanimme <a href=\"https:\/\/verstas.net\" target=\"_blank\" rel=\"noopener\">Mainostoimisto Verstaan<\/a> suunnittelemana.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/cropter.fi\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n\n                <!-- TS Grafi -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/07\/Digiverkosto-referenssit-ts-grafi.fi_.png\" alt=\"TS Grafi\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Verkkokaupan ja sivuston ilmeen uudistus<\/span>\n                            <h4>TS Grafi<\/h4>\n                            <p>P\u00e4ivitimme asiakkaan sivuston ulkoasun modernimmaksi ja asiakkaan toiveiden mukaiseksi.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/ts-grafi.fi\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n                <!-- Lvi-ty\u00f6t Kalliokoski Oy -->\n                <div class=\"portfolio-mini-card\">\n                    <div class=\"mini-card-image-wrapper\">\n                        <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/10\/Digiverkosto-referenssit-lvityotkalliokoski.png\" alt=\"Lvi-ty\u00f6t Kalliokoski Oy\" loading=\"lazy\">\n                    <\/div>\n                    <div class=\"mini-card-text-content\">\n                        <div class=\"mini-card-header\">\n                            <span class=\"mini-category\">Sivuston ilmeen uudistus<\/span>\n                            <h4>Lvi-ty\u00f6t Kalliokoski Oy<\/h4>\n                            <p>P\u00e4ivitimme asiakkaan sivuston ulkoasun modernimmaksi ja asiakkaan toiveiden mukaiseksi.<\/p>\n                        <\/div>\n                        <a href=\"https:\/\/lvityotkalliokoski.fi\" class=\"mini-card-link\" target=\"_blank\" rel=\"noopener\">Vieraile sivustolla \u2192<\/a>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\n    \/\/ Nyt JavaScript ei en\u00e4\u00e4 koske itse teksteihin, vaan ainoastaan vaihtaa css-luokkaa!\n    window.toggleStory = function(element) {\n        element.classList.toggle('is-open');\n    }\n<\/script>\n<\/div>\n\n\n\n<section class=\"photo-gallery-section\">\n    <div class=\"photo-container\">\n        \n        <div class=\"photo-header\">\n            <span class=\"section-tag\">Portfolio<\/span>\n            <h2 class=\"photo-title\">Valokuvaus<\/h2>\n            <p class=\"photo-desc\">\n                Valokuvat mainoksiin, someen, Google-yritysprofiiliin tai nettisivuille. \n                Meilt\u00e4 saat laadukkaan ja br\u00e4ndisi n\u00e4k\u00f6isen kuvamateriaalin kaikkiin kanaviin.\n            <\/p>\n            \n            <div class=\"equipment-badges\">\n                <span class=\"badge\">\ud83d\udcf8 J\u00e4rjestelm\u00e4kamera<\/span>\n                <span class=\"badge\">\ud83d\ude81 Drone<\/span>\n                <span class=\"badge\">\ud83d\udd04 360-kamera<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"masonry-grid\">\n            \n            <div class=\"masonry-item\">\n                <div class=\"img-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/01\/DSC0379-scaled.jpg\" alt=\"Henkil\u00f6kuvaus\">\n                    <div class=\"overlay\"><span>Tapahtumakuvaus<\/span><\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"masonry-item\">\n                <div class=\"img-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/01\/DJI_0039-2-scaled.jpg\" alt=\"Dronekuvaus\">\n                    <div class=\"overlay\"><span>Dronekuvaus<\/span><\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"masonry-item\">\n                <div class=\"img-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/01\/69EDE7A8B30B39280073D6BE2E7FC9D9-scaled.jpg\" alt=\"Tuotekuvaus\">\n                    <div class=\"overlay\"><span>Dronekuvaus<\/span><\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"masonry-item\">\n                <div class=\"img-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/01\/DSC0182-scaled.jpg\" alt=\"Tapahtumakuvaus\">\n                    <div class=\"overlay\"><span>Laitteisto<\/span><\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    \n    .photo-gallery-section {\n        background-color: #070707;\n        padding: 100px 6vw;\n        color: #f5f5f7;\n        font-family: inherit;\n        border-top: 1px solid #1c1c1e;\n        box-sizing: border-box;\n    }\n\n    .photo-container {\n        max-width: 1200px;\n        margin: 0 auto;\n    }\n\n    \n    .photo-header {\n        text-align: center;\n        margin-bottom: 60px;\n        max-width: 800px;\n        margin-left: auto;\n        margin-right: auto;\n    }\n\n    .section-tag {\n        color: #0071e3;\n        font-size: 13px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        display: block;\n        margin-bottom: 10px;\n    }\n\n    .photo-title {\n        font-size: clamp(32px, 5vw, 48px);\n        font-weight: 700;\n        color: #fff;\n        margin: 0 0 20px 0;\n    }\n\n    .photo-desc {\n        color: #86868b;\n        font-size: 18px;\n        line-height: 1.6;\n        margin-bottom: 30px;\n    }\n\n    .equipment-badges {\n        display: flex;\n        justify-content: center;\n        flex-wrap: wrap;\n        gap: 12px;\n    }\n\n    .badge {\n        background: rgba(255, 255, 255, 0.05);\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        padding: 8px 16px;\n        border-radius: 50px;\n        font-size: 14px;\n        color: #fff;\n        font-weight: 500;\n    }\n\n    \n    .masonry-grid {\n        \/* Desktop oletus: 3 saraketta *\/\n        column-count: 3;\n        column-gap: 24px;\n    }\n\n    .masonry-item {\n        break-inside: avoid;\n        margin-bottom: 24px;\n        position: relative;\n    }\n\n    \n    .masonry-item:nth-child(n+7) {\n        display: none;\n    }\n\n    \n    .img-wrapper {\n        position: relative;\n        border-radius: 16px;\n        overflow: hidden;\n        background: #0e0e10;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n        transition: transform 0.3s ease;\n    }\n\n    .img-wrapper:hover {\n        transform: translateY(-5px);\n    }\n\n    .img-wrapper img {\n        width: 100%;\n        height: auto;\n        display: block;\n        transition: transform 0.5s ease;\n    }\n\n    .img-wrapper:hover img {\n        transform: scale(1.05);\n    }\n\n    .overlay {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        padding: 20px;\n        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\n        opacity: 0;\n        transition: opacity 0.3s ease;\n        display: flex;\n        align-items: flex-end;\n    }\n\n    .img-wrapper:hover .overlay { opacity: 1; }\n\n    .overlay span {\n        color: #fff;\n        font-weight: 600;\n        font-size: 16px;\n        transform: translateY(10px);\n        transition: transform 0.3s ease;\n    }\n\n    .img-wrapper:hover .overlay span { transform: translateY(0); }\n\n    \n    @media (max-width: 900px) {\n        .masonry-grid {\n            column-count: 2;\n            column-gap: 16px;\n        }\n        .photo-gallery-section { padding: 60px 4vw; }\n    }\n\n    \n    @media (max-width: 600px) {\n        .masonry-grid {\n            column-count: 1;\n        }\n        \n        \n        \n        .masonry-item:nth-child(n+5) {\n            display: none;\n        }\n\n        .overlay {\n            opacity: 1; \n            padding: 15px;\n        }\n        .overlay span { transform: translateY(0); font-size: 14px; }\n    }\n<\/style>\n\n\n\n<section class=\"ref-cta-section\">\n    <div class=\"ref-cta-container\">\n        \n        <div class=\"ref-cta-header\">\n            <h2 class=\"ref-cta-title\">Tehd\u00e4\u00e4nk\u00f6 teid\u00e4n yrityksest\u00e4nne <br><span class=\"highlight\">seuraava menestystarina?<\/span><\/h2>\n            <p class=\"ref-cta-desc\">\n                Kuten referensseist\u00e4mme n\u00e4et, emme tee vain verkkosivuja tai kuvia. Me rakennamme ty\u00f6kaluja, jotka tuovat tuloksia. Olipa kyseess\u00e4 paikallisen n\u00e4kyvyyden parantaminen, myyntiprosessin automatisointi teko\u00e4lyll\u00e4 tai br\u00e4ndin visuaalinen el\u00e4v\u00f6itt\u00e4minen, meill\u00e4 on mekaaninen tarkkuus ja visuaalinen silm\u00e4 hoitaa homma kerralla maaliin.\n            <\/p>\n        <\/div>\n\n        <h3 class=\"steps-heading\">Aloita matkasi kohti digitaalista dominanssia:<\/h3>\n        \n        <div class=\"cta-steps-grid\">\n            \n            <div class=\"cta-step-card\">\n                <div class=\"step-badge\">1<\/div>\n                <h4 class=\"step-title\">Maksuton nykytilan analyysi<\/h4>\n                <p class=\"step-text\">Katsotaan yhdess\u00e4, miss\u00e4 potentiaalinne piilee. Emme arvaile, vaan perustamme ehdotukset dataan.<\/p>\n            <\/div>\n\n            <div class=\"cta-step-card\">\n                <div class=\"step-badge\">2<\/div>\n                <h4 class=\"step-title\">Selke\u00e4 toimintasuunnitelma<\/h4>\n                <p class=\"step-text\">Ei jargonilla kuorrutettuja lupauksia, vaan konkreettisia askeleita, jotka viev\u00e4t yrityst\u00e4si eteenp\u00e4in.<\/p>\n            <\/div>\n\n            <div class=\"cta-step-card\">\n                <div class=\"step-badge\">3<\/div>\n                <h4 class=\"step-title\">Kiinte\u00e4 tarjous<\/h4>\n                <p class=\"step-text\">Tied\u00e4t tarkalleen, mit\u00e4 saat ja mit\u00e4 se maksaa, ilman piilokuluja tai yll\u00e4tt\u00e4vi\u00e4 lis\u00e4laskuja.<\/p>\n            <\/div>\n\n        <\/div>\n\n        <div class=\"ref-cta-buttons\">\n            <a href=\"https:\/\/digiverkosto.fi\/ota-yhteytta\" class=\"cta-btn-primary\">Pyyd\u00e4 tarjous projektista<\/a>\n            <a href=\"https:\/\/digiverkosto.fi\/varaa-aika\" class=\"cta-btn-secondary\">Varaa 15 min et\u00e4tapaaminen<\/a>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<style>\n    \n    .ref-cta-section {\n        background-color: #070707;\n        \n        background-image: radial-gradient(circle at 50% 0%, rgba(0, 113, 227, 0.08), transparent 40%);\n        padding: 120px 6vw;\n        color: #f5f5f7;\n        font-family: inherit;\n        border-top: 1px solid #1c1c1e;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .ref-cta-container {\n        max-width: 1000px;\n        margin: 0 auto;\n        text-align: center;\n        position: relative;\n        z-index: 2;\n    }\n\n    \n    .ref-cta-title {\n        font-size: clamp(32px, 5vw, 56px);\n        font-weight: 800;\n        line-height: 1.1;\n        margin-bottom: 24px;\n        color: #fff;\n    }\n\n    .ref-cta-title .highlight {\n        background: linear-gradient(180deg, #fff 0%, #86868b 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        display: inline-block;\n    }\n\n    .ref-cta-desc {\n        font-size: clamp(16px, 2vw, 19px);\n        line-height: 1.6;\n        color: #a1a1a6;\n        max-width: 800px;\n        margin: 0 auto 60px auto;\n    }\n\n    .steps-heading {\n        font-size: 14px;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n        color: #0071e3;\n        margin-bottom: 30px;\n        font-weight: 600;\n    }\n\n    \n    .cta-steps-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 24px;\n        margin-bottom: 60px;\n    }\n\n    .cta-step-card {\n        background: rgba(255, 255, 255, 0.03);\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        border-radius: 20px;\n        padding: 30px 24px;\n        text-align: left;\n        transition: transform 0.3s ease, border-color 0.3s ease;\n    }\n\n    .cta-step-card:hover {\n        transform: translateY(-5px);\n        border-color: rgba(255, 255, 255, 0.2);\n        background: rgba(255, 255, 255, 0.05);\n    }\n\n    .step-badge {\n        width: 32px;\n        height: 32px;\n        background: #0071e3;\n        color: #fff;\n        font-weight: 700;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-bottom: 20px;\n        font-size: 14px;\n    }\n\n    .step-title {\n        color: #fff;\n        font-size: 18px;\n        font-weight: 600;\n        margin: 0 0 10px 0;\n    }\n\n    .step-text {\n        color: #86868b;\n        font-size: 15px;\n        line-height: 1.5;\n        margin: 0;\n    }\n\n    \n    .ref-cta-buttons {\n        display: flex;\n        justify-content: center;\n        gap: 20px;\n        flex-wrap: wrap;\n    }\n\n    .cta-btn-primary {\n        background-color: #0071e3;\n        color: #fff;\n        padding: 16px 36px;\n        border-radius: 50px;\n        font-weight: 600;\n        font-size: 17px;\n        text-decoration: none;\n        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n        border: 1px solid transparent;\n        box-shadow: 0 5px 20px rgba(0, 113, 227, 0.3);\n    }\n\n    .cta-btn-primary:hover {\n        background-color: #0062c4;\n        transform: scale(1.02);\n    }\n\n    .cta-btn-secondary {\n        background-color: transparent;\n        color: #fff;\n        padding: 16px 36px;\n        border-radius: 50px;\n        font-weight: 600;\n        font-size: 17px;\n        text-decoration: none;\n        border: 1px solid rgba(255, 255, 255, 0.2);\n        transition: all 0.3s ease;\n    }\n\n    .cta-btn-secondary:hover {\n        border-color: #fff;\n        background-color: rgba(255, 255, 255, 0.05);\n    }\n\n    \n    @media (max-width: 900px) {\n        .ref-cta-section { padding: 80px 4vw; }\n        \n        .cta-steps-grid {\n            grid-template-columns: 1fr; \n            max-width: 500px;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        .cta-step-card {\n            text-align: center;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .ref-cta-buttons {\n            flex-direction: column;\n            width: 100%;\n            max-width: 400px;\n            margin: 0 auto;\n        }\n\n        .cta-btn-primary, .cta-btn-secondary {\n            width: 100%;\n            text-align: center;\n            box-sizing: border-box;\n        }\n    }\n<\/style>\n\n\n<link data-noptimize=\"1\" data-no-optimize=\"1\" data-no-minify=\"1\" data-no-defer=\"1\" rel=\"stylesheet\" href=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/trustindex-google-widget.css?1794166267\" media=\"all\"><pre class=\"ti-widget\"><div style=\"opacity: 0;height: 0 !important;overflow: hidden !important\" data-css-url=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/trustindex-google-widget.css?1794166267\" class=\"ti-widget ti-goog ti-review-text-mode-readmore ti-text-align-left\" data-plugin-version=\"14.3\" data-no-translation=\"true\" data-time-locale=\"%d %s sitten|t\u00e4n\u00e4\u00e4n|p\u00e4iv\u00e4|p\u00e4iv\u00e4\u00e4|viikko|viikkoa|kuukausi|kuukautta|vuosi|vuotta\" data-layout-id=\"104\" data-layout-category=\"badge, top-rated-badge\" data-set-id=\"drop-shadow\" data-pid=\"wp-widget\" data-language=\"fi\" data-close-locale=\"Kiinni\" data-css-version=\"2\" data-size=\"1\"> <div class=\"ti-widget-container\"> <div class=\"ti-header source-Google\"> <img decoding=\"async\" class=\"ti-platform-icon skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/icon.svg\" alt=\"Google\" width=\"20\" height=\"20\" loading=\"lazy\" \/> <div class=\"ti-header-inner\"> <div class=\"ti-profile-details\"> <div class=\"ti-stars\"><img decoding=\"async\" class=\"ti-star skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google star 1\" width=\"17\" height=\"17\" loading=\"lazy\" \/><img decoding=\"async\" class=\"ti-star skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google star 2\" width=\"17\" height=\"17\" loading=\"lazy\" \/><img decoding=\"async\" class=\"ti-star skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google star 3\" width=\"17\" height=\"17\" loading=\"lazy\" \/><img decoding=\"async\" class=\"ti-star skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google star 4\" width=\"17\" height=\"17\" loading=\"lazy\" \/><img decoding=\"async\" class=\"ti-star skip-lazy\" src=\"https:\/\/cdn.trustindex.io\/assets\/platform\/Google\/star\/f.svg\" alt=\"Google star 5\" width=\"17\" height=\"17\" loading=\"lazy\" \/><\/div> <span class=\"ti-rating\">5.0<\/span> <\/div> <div class=\"ti-top-rated-title\">Parhaiksi arvioitu  palvelu<\/div> <div class=\"ti-verified-by\">Trustindexin vahvistama <span class=\"ti-info-icon\"><\/span><\/div> <div class=\"ti-disclaimer\">Trustindex vahvisti, ett\u00e4 n\u00e4m\u00e4 arvostelut on julkaistu yrityksen <a href=\"https:\/\/www.google.com\/maps\/search\/?api=1&amp;query=Google&amp;query_place_id=ChIJo61svsK6yWQRc1Vu1mCKGLs\" target=\"_blank\" rel=\"noopener nofollow\">Digiverkosto<\/a> Google-yritysprofiilissa. <a href=\"https:\/\/www.trustindex.io\/?a=sys&amp;c=wp-top-rated-badge&amp;url=\/review-platform-verification\/\" target=\"_blank\" rel=\"noopener\">Lue lis\u00e4\u00e4<\/a><\/div> <\/div> <\/div> <\/div> <\/div> <\/pre><pre class=\"ti-hidden-markup\" hidden style=\"display: none\"><script>\n(function () { if (window.tiLoaderFallback) { return; } window.tiLoaderFallback = true; function tiLoadLoader() { if (window.TrustindexWidget || document.querySelector('script[src*=\"https:\/\/cdn.trustindex.io\/loader.js\"]')) { return; } let script = document.createElement(\"script\"); script.async = true; script.src = \"https:\/\/cdn.trustindex.io\/loader.js\"; script.setAttribute(\"data-ccm-injected\", \"1\"); document.head.appendChild(script); } if (\"loading\" === document.readyState) { document.addEventListener(\"DOMContentLoaded\", tiLoadLoader); } else { tiLoadLoader(); } })();\n<\/script>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Referenssit Kaikki palvelut yrityksellesi samasta paikasta Varaa aika Pyyd\u00e4 tarjous Referenssit Verkkosivut Kaustinen Folk Music Festival Toteutimme asiakkaalle sivuston optimoinnin [&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-6688","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages\/6688","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=6688"}],"version-history":[{"count":31,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages\/6688\/revisions"}],"predecessor-version":[{"id":7716,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/pages\/6688\/revisions\/7716"}],"wp:attachment":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/media?parent=6688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}