/*
Theme Name: DigiSilta Oy
Template: silta-studio
Description: DigiSilta Oy. Koodattu Silta Studiolla.
Version: 0.1.0
*/

:root{--ink:#17142e;--mut:#55526b;--bg:#f7f5f0;--w:#fff;--lil:#e8e2ff;--mint:#d3f4e3;--peach:#ffe3d3;--lemon:#fff2b3;--sky:#dcecff;--acc:#5a3cf4;--acc2:#ff7a45;--r:28px}
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:17px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand,.big{font-family:"Plus Jakarta Sans",Inter,sans-serif;letter-spacing:-.025em;line-height:1.08;overflow-wrap:break-word;hyphens:manual}
h1{font-size:clamp(2.3rem,5.4vw,4.3rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:800}
h3,h2.h3{font-size:1.3rem;font-weight:700;letter-spacing:-.015em}
p{color:var(--mut)}
p+p{margin-top:12px}
a{color:inherit}
img,svg{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:50;background:#fff;padding:10px 16px;border-radius:12px}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}

/* Nav */
.nav{position:sticky;top:14px;z-index:20;max-width:1160px;margin:14px auto 0;padding:10px 12px 10px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 8px 30px rgba(23,20,46,.08);border:1px solid rgba(23,20,46,.06)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;text-decoration:none}
.brand .brand-txt{color:inherit}
.brand .brand-txt span{color:var(--acc)}
.nav ul{display:flex;list-style:none;gap:4px;margin:0;padding:0}
.nav ul a{display:block;padding:9px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.95rem}
.nav ul a:hover{background:var(--lil)}
.nav ul a[aria-current="page"]{background:var(--lil);font-weight:600}
.menu{display:none;background:var(--lil);border:0;border-radius:999px;width:44px;height:44px;cursor:pointer;color:var(--ink);place-items:center}
.menu svg{width:22px;height:22px}
.menu .i-close{display:none}
.nav.open .menu .i-open{display:none}
.nav.open .menu .i-close{display:block}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;text-decoration:none;padding:14px 24px;border-radius:999px;border:0;font:inherit;font-weight:600;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px}
.btn.acc,.btn.btn-primary{background:var(--acc);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.light{background:#fff;color:var(--ink)}
.nav .btn{padding:10px 18px}

/* Layout */
section{padding:72px 0}
.hero{padding-top:64px;padding-bottom:72px;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.pill{display:inline-block;background:var(--w);border:1px solid rgba(23,20,46,.1);padding:7px 14px;border-radius:999px;font-size:.88rem;font-weight:600;margin-bottom:20px}
.pill b{color:var(--acc)}
.lead{font-size:1.2rem;margin:22px 0 30px;max-width:34em}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.tiles{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(130px,auto);gap:14px}
.t{border-radius:var(--r);padding:24px;position:relative;overflow:hidden}
.t.r2{grid-row:span 2}.t.c2{grid-column:span 2}
.big{font-size:clamp(2.6rem,5vw,3.8rem);font-weight:800;line-height:1}
.tiles .big{font-size:clamp(2.2rem,3.6vw,3.2rem);white-space:nowrap}
.big small{font-size:.35em;font-weight:700;letter-spacing:0}
.lab{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);opacity:.7;margin-bottom:8px}
.lil{background:var(--lil)}.mint{background:var(--mint)}.peach{background:var(--peach)}.lemon{background:var(--lemon)}.sky{background:var(--sky)}.white{background:var(--w)}
.dark{background:var(--ink);color:#fff}.dark p{color:#c9c6dc}.dark .lab{color:#fff}
.acc-bg{background:var(--acc);color:#fff}.acc-bg p{color:#e3ddff}.acc-bg .lab{color:#fff}
.mock{background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(23,20,46,.12);margin-top:14px;width:100%;height:auto}
.head{margin-bottom:34px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.head h2{max-width:16em}
.head p{max-width:30em}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
.bento .t{padding:30px;min-height:200px;display:flex;flex-direction:column;gap:10px}
.bento .t p+p{margin-top:0}
.ico{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.75);display:grid;place-items:center;margin-bottom:6px;flex:none}
.ico.acc{background:var(--acc)}
.step{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:3.2rem;line-height:1;color:var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;list-style:none;padding:0}
.chips li,.chips span{background:rgba(255,255,255,.8);padding:7px 14px;border-radius:999px;font-size:.92rem;font-weight:500}
.dark .chips li{background:rgba(255,255,255,.12);color:#fff}
.t-end{justify-content:flex-end}
.t-tall{min-height:280px}
.ink-text{color:var(--ink)!important;font-size:1.1rem}
.price{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.price .t{padding:40px}
.price .big{font-size:clamp(4rem,10vw,7.5rem)}
.price-side{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.price-side h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.price-side .btn{align-self:flex-start}
.narrow{max-width:860px}
.checks{list-style:none;padding:0;display:grid;gap:12px;margin-top:6px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:inherit}
.checks svg{width:22px;height:22px;flex:none;margin-top:2px;color:var(--acc)}
.dark .checks svg,.acc-bg .checks svg{color:#b9a9ff}
.dark .checks li{color:#e7e5f2}

/* Prose */
.prose{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}
.prose .text p{font-size:1.08rem}
.prose .text h3{margin:26px 0 8px}
.quote{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.quote em{font-style:normal;color:var(--acc)}

/* Compare */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs .t{padding:32px}
.vs ul{list-style:none;padding:0;display:grid;gap:10px;margin-top:14px}
.vs li{padding-left:28px;position:relative}
.vs li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:3px;border-radius:2px;background:currentColor;opacity:.5}
.vs .acc-bg li::before{content:"";width:12px;height:12px;top:.4em;border-radius:50%;background:#b9a9ff;opacity:1}

/* FAQ */
.faq-item{background:var(--w);border-radius:22px;padding:22px 26px;border:1px solid rgba(23,20,46,.07)}
.faq-item+.faq-item{margin-top:12px}
.faq-item summary{cursor:pointer;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;gap:16px;line-height:1.3}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--acc);flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item summary svg{display:none}
.faq-a{margin-top:12px;color:var(--mut)}
.faq-a p{margin-top:0}

/* Contact form */
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form > *{grid-column:1/-1}
.contact-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{font-size:.9rem;font-weight:600;display:block;margin-bottom:6px;color:var(--ink)}
.contact-form input:not([type=checkbox]):not([type=radio]),.contact-form textarea,.contact-form select{width:100%;font:inherit;padding:14px 16px;border-radius:16px;border:1.5px solid rgba(23,20,46,.12);background:#fff;color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:3px solid var(--lil);border-color:var(--acc)}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form .btn{justify-self:start}
.form-privacy{font-size:.88rem;color:var(--mut)}
.form-privacy a{color:var(--acc)}
.form-notice{padding:14px 18px;border-radius:16px;font-weight:600;margin-bottom:14px}
.form-notice.ok{background:var(--mint)}
.form-notice.err{background:var(--peach)}
.contact a{font-weight:600}
.contact-info{display:grid;gap:10px}
.contact-info a,.contact-info p{color:var(--ink)}
.contact-row{display:flex;gap:12px;align-items:flex-start}
.contact-row svg{width:22px;height:22px;flex:none;margin-top:2px;color:var(--acc)}

/* Page hero (subpages) */
.page-hero{padding-top:64px;padding-bottom:40px}
.page-hero .lead{margin-bottom:30px}
.price-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.price-card{padding:36px;border-radius:var(--r)}
.price-card .big{font-size:clamp(4.2rem,9vw,7rem)}
.price-card .sub{margin-top:14px;font-size:1.05rem}

/* Footer */
.site-footer{padding:20px 20px 40px}
.foot{background:var(--ink);color:#fff;border-radius:var(--r);padding:40px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.foot p,.foot li{color:#c9c6dc;font-size:.95rem}
.foot ul{list-style:none;display:grid;gap:6px;padding:0}
.foot a{text-decoration:none}.foot a:hover{color:#fff;text-decoration:underline}
.foot-h{font-size:1rem;margin-bottom:12px;color:#fff;letter-spacing:0}
.brand-foot{color:#fff}.brand-foot .brand-txt span{color:#b9a9ff}
.foot-lead{margin:12px 0 20px}
.foot-cta{padding:11px 20px}
.legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:.85rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;color:#c9c6dc}
.legal-btns{display:flex;flex-wrap:wrap;gap:8px}
.legal-btns button,.legal-btns a{font:inherit;font-size:.85rem;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:999px;padding:6px 12px;cursor:pointer;text-decoration:none}

/* Motion */
.anim .rv{opacity:0;transform:translateY(32px) scale(.98);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.anim .rv.in{opacity:1;transform:none}
/* Palikat rakentuvat: kortit pudottautuvat paikoilleen pienellä kallistuksella ja joustolla */
.anim :is(.tiles,.bento,.vs,.price) > .t.rv{--rot:-4deg;transform:translateY(70px) scale(.8) rotate(var(--rot));transform-origin:50% 100%;transition:opacity .6s ease,transform .9s cubic-bezier(.34,1.45,.5,1),box-shadow .3s}
.anim :is(.tiles,.bento,.vs,.price) > .t.rv:nth-child(even){--rot:4deg}
.anim :is(.tiles,.bento,.vs,.price) > .t.rv.in{transform:none}
/* Heron ruudukko kelluu hiljalleen, jokainen palikka omassa tahdissaan */
.anim .tiles .t.rv.in{animation:float 6s ease-in-out 1s infinite}
.anim .tiles .t.rv.in:nth-child(2){animation-duration:5s;animation-delay:1.6s}
.anim .tiles .t.rv.in:nth-child(3){animation-duration:7s;animation-delay:1.2s}
.anim .tiles .t.rv.in:nth-child(4){animation-duration:6.5s;animation-delay:2s}
/* Kuvituksen verkkosivu rakentuu pala palalta, purkautuu ja rakentuu uudelleen */
.mock .b{transform-box:fill-box;transform-origin:50% 50%;animation:pop 8s cubic-bezier(.3,1.5,.5,1) both infinite;animation-delay:calc(var(--d) * .22s + .8s)}
.mock .bx{transform-origin:0 50%;animation-name:grow}
.mock .spark{transform-box:fill-box;transform-origin:50% 50%;animation:twinkle 3s ease-in-out infinite}
.mock .s2b{animation-delay:-1.5s;animation-duration:2.4s}
.anim .tiles .t.rv.in:hover,.anim .bento .t.rv.in:hover,.anim .vs .t.rv.in:hover,.anim .price .t.rv.in:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(23,20,46,.12);transition-delay:0s}
.faq-item{transition:box-shadow .3s,border-color .3s}
.faq-item:hover{border-color:rgba(90,60,244,.3);box-shadow:0 10px 26px rgba(23,20,46,.07)}
.faq-item[open] .faq-a{animation:fadeDown .4s ease}
.ico,.step{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.t:hover .ico{transform:rotate(-8deg) scale(1.08)}
.t:hover .step{transform:translateX(6px)}
.btn svg{transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn.acc,.btn.btn-primary{background:linear-gradient(110deg,var(--acc) 40%,#8a72ff 50%,var(--acc) 60%) var(--acc);background-size:250% 100%;background-position:100% 0;transition:transform .2s,background-position .8s}
.btn.acc:hover,.btn.btn-primary:hover{background-position:0 0}
.pill b{display:inline-block;animation:bob 2.6s ease-in-out infinite}
.tiles .t.acc-bg::after,.tiles .t.dark::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-50px;bottom:-60px;background:rgba(255,255,255,.08);animation:drift 9s ease-in-out infinite;pointer-events:none}
.nav ul a{transition:background .2s}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes pop{0%{transform:scale(0);opacity:0}9%{transform:none;opacity:1}78%{transform:none;opacity:1}88%,100%{transform:scale(.4);opacity:0}}
@keyframes grow{0%{transform:scaleX(0);opacity:0}9%{transform:none;opacity:1}78%{transform:none;opacity:1}88%,100%{transform:scaleX(0);opacity:0}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(45deg)}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,-18px) scale(1.15)}}

/* Leijuva yhteydenottopainike */
.fab{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.fab > *{pointer-events:auto}
.fab-btn{position:relative;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:linear-gradient(135deg,#7b5cff,var(--acc) 55%,#3f24c9);box-shadow:0 12px 30px rgba(90,60,244,.45),inset 0 1px 0 rgba(255,255,255,.3);display:grid;place-items:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s;animation:fabIn .8s cubic-bezier(.3,1.5,.5,1) 1.2s backwards}
.fab-btn::before,.fab-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);opacity:0;animation:ring 2.8s ease-out 2.5s infinite;pointer-events:none}
.fab-btn::after{animation-delay:3.9s}
.fab-btn:hover{transform:scale(1.08) rotate(-6deg);box-shadow:0 16px 38px rgba(90,60,244,.55)}
.fab-i{grid-area:1/1;display:grid;place-items:center;transition:transform .4s cubic-bezier(.3,1.6,.5,1),opacity .25s}
.fab-i svg{width:28px;height:28px}
.fab-i-close{opacity:0;transform:rotate(-90deg) scale(.5)}
.fab.open .fab-i-open{opacity:0;transform:rotate(90deg) scale(.5)}
.fab.open .fab-i-close{opacity:1;transform:none}
.fab.open .fab-btn::before,.fab.open .fab-btn::after{animation:none}
.fab-tip{background:#fff;color:var(--ink);font-weight:600;font-size:.95rem;padding:12px 18px;border-radius:20px 20px 6px 20px;box-shadow:0 10px 30px rgba(23,20,46,.15);opacity:0;transform:translateY(10px) scale(.9);transform-origin:100% 100%;transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1);pointer-events:none!important}
.fab.tip .fab-tip{opacity:1;transform:none}
.fab-panel{width:min(360px,calc(100vw - 32px));background:#fff;border-radius:26px;box-shadow:0 24px 60px rgba(23,20,46,.22);overflow:hidden;transform-origin:100% 100%;opacity:0;visibility:hidden;transform:translateY(16px) scale(.92);transition:opacity .25s,transform .4s cubic-bezier(.3,1.4,.5,1),visibility 0s .4s}
.fab.open .fab-panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .45s cubic-bezier(.3,1.4,.5,1),visibility 0s}
.fab.open .fab-tip{display:none}
.fab-top{display:flex;gap:14px;align-items:flex-start;padding:22px 22px 26px;background:linear-gradient(135deg,var(--acc),#8a72ff);color:#fff;position:relative;overflow:hidden}
.fab-top::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;right:-40px;top:-60px;background:rgba(255,255,255,.12)}
.fab-top p{color:#ece8ff;font-size:.95rem;line-height:1.45}
.fab-h{font-size:1.3rem;color:#fff;margin-bottom:4px}
.fab-ava{flex:none;width:46px;height:46px;border-radius:16px;background:#fff;color:var(--acc);font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;display:grid;place-items:center;box-shadow:0 6px 16px rgba(23,20,46,.2)}
.fab-opts{display:grid;gap:8px;padding:14px}
.fab-opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;text-decoration:none;color:var(--ink);background:var(--bg);transition:background .2s,transform .25s}
.fab-opt:hover{background:var(--lil);transform:translateX(3px)}
.fab-opt > span:nth-child(2){flex:1;min-width:0;display:grid;line-height:1.3}
.fab-opt b{font-size:.98rem}
.fab-opt small{color:var(--mut);font-size:.84rem;overflow:hidden;text-overflow:ellipsis}
.fab-opt > svg{width:18px;height:18px;flex:none;color:var(--acc);transition:transform .25s}
.fab-opt:hover > svg{transform:translateX(3px)}
.fab-oi{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:var(--acc)}
.fab-oi svg{width:20px;height:20px}
.fab.open .fab-opt{animation:fadeUp .4s cubic-bezier(.2,.7,.2,1) both}
.fab.open .fab-opt:nth-child(2){animation-delay:.06s}
.fab.open .fab-opt:nth-child(3){animation-delay:.12s}
@keyframes fabIn{from{transform:scale(0) rotate(-45deg);opacity:0}to{transform:none;opacity:1}}
@keyframes ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:600px){.fab{right:14px;bottom:14px}.fab-btn{width:58px;height:58px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

@media (max-width:960px){
.hero,.price,.price-hero,.prose,.vs{grid-template-columns:1fr}
.bento{grid-template-columns:1fr 1fr}
.s2,.s3{grid-column:span 1}.s4,.s6{grid-column:span 2}
.nav ul,.nav .navcta{display:none}
.menu{display:grid}
.nav.open{border-radius:28px;flex-wrap:wrap}
.nav.open ul{display:flex;flex-direction:column;width:100%;padding:6px 0}
.nav.open .navcta{display:inline-flex;margin:0 0 6px}
.foot{grid-template-columns:1fr 1fr}
.foot > div:first-child{grid-column:1/-1}
}
@media (max-width:600px){
body{font-size:16px}
section{padding:52px 0}
.hero{padding-top:40px;padding-bottom:52px}
.page-hero{padding-top:40px}
.tiles{grid-template-columns:1fr}
.t.c2,.t.r2{grid-column:auto;grid-row:auto}
.bento{grid-template-columns:1fr}
.s2,.s3,.s4,.s6{grid-column:auto}
.bento .t{padding:26px;min-height:0}
.contact-form,.contact-form .field-row{grid-template-columns:1fr}
.foot{grid-template-columns:1fr;padding:30px 24px}
.price .t,.price-card,.vs .t{padding:28px}
.nav{margin:10px 10px 0;top:10px}
.site-footer{padding:20px 10px 30px}
}