:root{
  --bg:#eef1f6; --card:#ffffff; --dark:#121821; --dark-2:#1a222e;
  --primary:#2f5f8a; --primary-hover:#24496b; --primary-soft:#e3ebf2;
  --accent:#e08a4a; --accent-soft:#faeade;
  --ink:#1a1f26; --ink-on-dark:#eef3f7; --muted:#5b6672; --muted-on-dark:#a9b8c9;
  --border:#dbe2ec; --line:#e8ecf2;
  --r-sm:8px; --r-md:14px; --r-lg:24px;
  --shadow-sm:0 1px 2px rgba(20,24,32,.04),0 4px 12px rgba(20,24,32,.05);
  --shadow-lg:0 2px 6px rgba(20,24,32,.05),0 12px 32px rgba(20,24,32,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Puhelimella sivu ei saa leventyä näyttöä leveämmäksi (reunan yli ulottuvat koristeet eivät saa aiheuttaa sivuttaista heilumista). */
html,body{overflow-x:clip}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-heading);font-weight:600;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:96px 24px}

/* ===== Etusivun yläosa (referenssi ainio-etusivu-lopullinen.html): tumma hero, aikajana ja pimeä tila ===== */
body{background-color:#f3efe7;background-image:radial-gradient(rgba(60,52,40,.13) 1px,transparent 1.3px);background-size:22px 22px}
.top{position:relative}
.top-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.glows{position:absolute;inset:0;overflow:hidden}
/* Haalea, hitaasti leijuva tähtikuvio koko yläbannerin taustalla (landing-boot.js). Kun se piirtyy,
   staattinen pisteverkko piilotetaan. Tekstipalstan kohdalla kuvio on himmeämpi. */
.bg-sky{position:absolute;inset:0;width:100%;height:100%;display:none;opacity:.8;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.35) 32%,#000 50%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.35) 32%,#000 50%)}
.top.sky-live .bg-sky{display:block}
.top.sky-live .bg-nodes,.top.sky-live .bg-nodes-tall{display:none}
.bg-fill{position:absolute;left:0;right:0;top:0;bottom:40px;background:linear-gradient(128deg,#0d1119 0%,#182644 48%,#2f5fa8 100%)}
.glow{position:absolute;border-radius:50%;filter:blur(30px)}
.gB1{width:760px;height:760px;right:-160px;top:-300px;background:radial-gradient(closest-side,rgba(111,160,224,.42),transparent)}
.gB2{width:620px;height:620px;left:18%;bottom:-360px;background:radial-gradient(closest-side,rgba(47,95,168,.55),transparent)}
.bg-nodes{position:absolute;width:460px;height:220px;right:4%;top:92px;transform-origin:60% 50%;animation:nodesDrift 48s ease-in-out infinite alternate}
.nd circle{fill:#fff;opacity:.45;transform-box:fill-box;transform-origin:center;animation:nodeGlow 7s ease-in-out infinite}
.nd circle:nth-child(2){animation-delay:-1.4s}.nd circle:nth-child(3){animation-delay:-2.8s}.nd circle:nth-child(4){animation-delay:-4.2s}.nd circle:nth-child(5){animation-delay:-5.6s}.nd circle:nth-child(6){animation-delay:-3.5s}
.nl{stroke:#fff;stroke-width:1;opacity:.28}
/* Tähtikuvio ajelehtii hitaasti ja tasaisesti taustalla; pisteet hehkuvat vuorotellen */
@keyframes nodesDrift{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-36px,14px) rotate(-3deg)}100%{transform:translate(-12px,30px) rotate(2deg)}}
@keyframes nodeGlow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.8;transform:scale(1.35)}}
.bg-ridge{position:absolute;left:0;right:0;bottom:-3px;width:100%;height:163px}
.lp-nav{max-width:1360px;margin:0 auto;padding:34px 40px 0;display:flex;align-items:center;justify-content:space-between}
.lp-logo{display:block;text-decoration:none}
.lp-logo img{height:44px;width:auto;display:block}
.lp-links{display:flex;align-items:center;gap:30px;font-size:15px;color:rgba(244,246,250,.85)}
.lp-links a{text-decoration:none}
.lp-links a:hover{color:#fff}
.lp-moon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;padding:0}
/* Ohituslinkki näppäimistön käyttäjälle: näkyy vain kohdistettuna (tarkistus 19.10.2026). */
.skip{position:absolute;left:-9999px;top:12px;z-index:1000;padding:10px 16px;border-radius:10px;background:#fff;color:#16202e;font-weight:700;text-decoration:none}
.skip:focus{left:16px;outline:3px solid #2f5fa8;outline-offset:2px}
#sisalto:focus{outline:none}
.lp-moon:focus-visible,.lp-btn:focus-visible,.lp-cta:focus-visible,.bn-link:focus-visible{outline:2px solid #9dc0f2;outline-offset:3px}
.lp-cta{background:#fff;color:#16202e!important;font-weight:700;border-radius:999px;padding:11px 20px}
.lp-hero{max-width:1360px;margin:0 auto;padding:56px 40px 190px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px;align-items:center}
.lp-h1{font-family:var(--font-heading);font-weight:600;font-size:min(46px,3vw);line-height:1.12;margin:22px 0 18px;color:#fff;letter-spacing:-.01em}
.lp-h1 span{color:#9dc0f2}
/* Ensimmäinen rivi pysyy aina yhdellä rivillä leveillä näytöillä; otsikon koko skaalautuu palstan mukaan. */
.lp-h1-q{font-style:normal}
@media (min-width:981px){.lp-h1-q{white-space:nowrap}}
/* Otsikon toinen rivi: "Ai nii joo..." muuttuu hetken päästä muotoon "Ainio hoitaa." (landing-boot.js).
   Kirjaimet ovat koko ajan HTML:ssä; välit ja vaihtuvat kirjaimet animoidaan leveydellä ja häivytyksellä. */
.lp-morph{display:inline-block;white-space:nowrap}
.lp-morph>span,.m-sw,.m-sw2{display:inline-block;vertical-align:baseline}
.m-gap{overflow:hidden;width:.24em;transition:width .55s cubic-bezier(.65,0,.35,1)}
.m-sw,.m-sw2{position:relative;text-align:left;transition:width .55s cubic-bezier(.65,0,.35,1)}
.m-o,.m-hoi{position:absolute;left:0;top:0;opacity:0;filter:blur(6px);transform:translateY(.12em)}
.m-i,.m-o,.m-joo,.m-hoi{transition:opacity .5s ease,filter .5s ease,transform .5s ease}
.m-dots i{display:inline-block;font-style:normal;animation:mDot 1.1s infinite ease-in-out}
.m-dots i:nth-child(2){animation-delay:.18s}.m-dots i:nth-child(3){animation-delay:.36s}
@keyframes mDot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.lp-morph.go .m-gap{width:0}
.lp-morph.go .m-i,.lp-morph.go .m-joo{opacity:0;filter:blur(6px);transform:translateY(-.12em)}
.lp-morph.go .m-o{opacity:1;filter:blur(0);transform:none;transition-delay:.05s}
.lp-morph.go .m-hoi{opacity:1;filter:blur(0);transform:none;transition-delay:.28s}
.lp-morph.go .m-dots i{animation:none}
/* Ilman JavaScriptiä tai kun käyttäjä on pyytänyt vähemmän liikettä, otsikko on kolmirivinen ilman muutosta:
   "Ai nii joo, / Ainio hoitaa." Skripti kytkee liikkuvan version päälle luokalla live. Liikkuva versio on
   ruudunlukijoilta piilossa (aria-hidden), ja luettava lause jää näkymättömänä saavutettavuuspuuhun, jotta
   otsikko luetaan "Ai nii joo, Ainio hoitaa." eikä kirjain kerrallaan. */
.lp-morph{display:none}
.lp-h1.live .lp-static{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.lp-h1.live .lp-morph{display:inline-block}

/* Käyttöönoton kesto ohuena rivinä nappien alla (omistaja 17.10.2026). Yläosa on tumma myös vaaleassa tilassa. */
.lp-pace{display:flex;align-items:center;gap:9px;margin:20px 0 0;font-size:14.5px;font-weight:500;color:rgba(244,246,250,.9)}
.lp-pace i{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(76,195,138,.18);color:#5fd49a;flex:none}
.lp-pace+.lp-note{margin-top:12px}
@media (min-width:1600px){.lp-pace{font-size:16px}}
.lp-lead{font-size:16px;line-height:1.6;color:rgba(244,246,250,.72);max-width:440px;margin:0}
.lp-btns{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.lp-btn{font-family:var(--font-body);font-size:15px;font-weight:700;border-radius:10px;padding:14px 22px;cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.lp-btn.primary{background:#fff;color:#16202e}
.lp-btn.ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.lp-note{font-size:12.5px;color:rgba(244,246,250,.5);margin:16px 0 0}
.lp-visual{padding-bottom:40px}
.lp-visual .device{box-shadow:0 60px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1),0 0 80px -10px rgba(111,160,224,.35)}
/* Etusivun video yläosassa demon paikalla, ja demo on omana Kokeile itse -osionaan Miten se toimii -osion alla (omistaja 18.10.2026).
   Video latautuu vasta painettaessa (landing-boot.js). Yläosa on tumma myös vaaleassa tilassa. */
.hv{display:flex;flex-direction:column;align-items:center;gap:16px}
.hv-box{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0b1019;box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.1),0 0 80px -10px rgba(111,160,224,.3)}
.hv-box video{display:block;width:100%;height:100%;object-fit:cover;background:#0b1019}
.hv-play{position:absolute;left:22px;bottom:20px;display:inline-flex;align-items:center;gap:14px;border:0;background:none;padding:0;color:#fff;font:700 18px/1 var(--font-body);cursor:pointer;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hv-play i{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);color:#1d3556;display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s}
.hv-play i svg{margin-left:3px}
.hv-play:hover i{transform:scale(1.05)}
.hv-play[hidden]{display:none}
.hv-play:focus-visible{outline:3px solid #9dc0f2;outline-offset:4px;border-radius:999px}
.hv-try{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;font-size:16px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px;opacity:.92}
.hv-try:hover{opacity:1;border-bottom-color:#fff}
.hv-try:focus-visible{outline:2px solid #9dc0f2;outline-offset:4px}
.kok-visual{max-width:1000px;margin:40px auto 0}
/* Demon esikatselupalkki ja sulkunappi tyyleineen tulevat landing-demo.css:stä vasta, kun demo-osio tulee ruudulle. Siihen asti ne ovat piilossa. */
.demo-backdrop,.demobar,.demo-close{position:fixed;opacity:0;pointer-events:none}
.kok-visual .device{box-shadow:0 50px 80px -30px rgba(40,32,18,.45),0 22px 40px -22px rgba(40,32,18,.35),inset 0 0 0 1px rgba(255,255,255,.07)}
html.dark .kok-visual .device{box-shadow:0 60px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1),0 0 80px -10px rgba(111,160,224,.35)}
@media (max-width:899px){
 .hv{gap:14px}
 .hv-box{border-radius:14px}
 .hv-play{left:12px;bottom:12px;gap:10px;font-size:15px}
 .hv-play i{width:44px;height:44px}
 .hv-play i svg{width:17px;height:17px;margin-left:2px}
 .kok-visual{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){.hv-play i{transition:none}}
/* Kannettavan perusmitat aina mukana, jotta hero pysyy paikallaan myös ennen landing-demo.css:n latautumista
   ja ilman JavaScriptiä (näytöllä kuva sovelluksesta, iframe piilossa). */
.device-slot{position:relative;width:100%}
.device{position:relative;border-radius:20px;background:#0d131d;padding:14px}
.demo-screen{position:relative;width:100%;aspect-ratio:1280/800;border-radius:9px;overflow:hidden;background:#f4f6fa}
.demo-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.demo-poster.dk{display:none}html.dark .demo-poster.lt{display:none}html.dark .demo-poster.dk{display:block}
.demo-screen iframe{position:absolute;left:0;top:0;border:0;opacity:0}

.bnwrap{padding:0}
.bn{max-width:1360px;margin:0 auto;padding:24px 40px 90px}
.bn-lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3d5a85}
.bn-h{font-family:var(--font-heading);font-weight:600;font-size:38px;line-height:1.15;color:#151b26;margin:10px 0 10px;letter-spacing:-.01em}
.bn-p{font-size:16px;color:#5b6474;line-height:1.6;margin:0;max-width:560px}
.bn-foot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;font-size:12.5px;color:#9a9489}
.bn-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#3d5a85;font-size:14px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body)}
.tag-ex{font-size:12px;color:#716c62}
.fci{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fci.g{background:#eaf6ec;color:#2e9b5c}.fci.b{background:#e3ebfa;color:#2f5fa8}.fci.s{background:#2f5fa8;color:#fff}
.fci.n{background:#f1efe9;color:#6b7686}.fci.w{background:rgba(255,255,255,.18);color:#fff}
.tl{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:40px 0 0;padding:0;list-style:none}
.tl::before{content:"";position:absolute;left:4%;right:4%;top:37px;height:2px;background:linear-gradient(90deg,#3d5a85,#6fa0e0 60%,#d8d0c1);border-radius:2px}
.st{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;height:100%}
.stt{font-size:13px;font-weight:700;color:#3d5a85;height:22px}
.std{width:14px;height:14px;border-radius:50%;background:#f3efe7;border:3px solid #3d5a85;margin:1px 0 18px;z-index:1}
.st.hi .std{background:#3d5a85;box-shadow:0 0 0 6px rgba(61,90,133,.18)}
.stc{background:#fff;border:1px solid #ece6da;border-radius:16px;padding:18px 16px 18px;width:100%;box-shadow:0 20px 40px -26px rgba(30,24,14,.35);display:flex;flex-direction:column;align-items:center;gap:8px;min-height:170px}
.stc{flex:1}
.stc .stx{margin-top:auto}
.stc .fci{width:38px;height:38px;border-radius:11px}
.stn{font-size:15px;font-weight:700;color:#16202e;line-height:1.3}
.sts{font-size:12.5px;color:#6b7686;line-height:1.5}
.st.hi .stc{background:linear-gradient(150deg,#182644,#2f5fa8);border-color:transparent;box-shadow:0 26px 50px -24px rgba(24,38,68,.7);transform:translateY(-8px)}
.st.hi .stn{color:#fff}.st.hi .sts{color:rgba(244,246,250,.75)}
/* Vaiheiden näytteet: viesti, luonnos, hyväksyntänappi, kalenteririvi, kate */
.stx{margin-top:6px;width:100%;font-size:12px;line-height:1.4;text-align:left;border-radius:10px;background:#faf8f4;border:1px solid #efe9dd;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.stx b{color:#16202e;font-weight:700;font-size:12.5px}.stx span{color:#687282}
.stx-draft i{font-style:italic;color:#4f5664}
.stx-btn{flex-direction:row;align-items:center;justify-content:center;gap:7px;background:#fff;color:#16202e;font-weight:700;font-size:13px;border:0;border-radius:10px;padding:10px 12px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.stx-cal{flex-direction:row;align-items:center;gap:10px}.stx-cal b{font-family:var(--font-heading);font-size:15px;color:#2f5fa8;white-space:nowrap}
.stx-inv{flex-direction:row;justify-content:space-between;align-items:center;gap:10px}.stx-inv b{font-family:var(--font-heading);font-size:16px;color:#2f5fa8;white-space:nowrap}
.tl-sum{margin:30px auto 0;text-align:center;font-size:18px;line-height:1.5;color:#3d4756}
@media (min-width:900px){.tl-sum{white-space:nowrap}}
.tl-sum b{color:#16202e;font-weight:800;margin:0 .18em}
/* Tarina syttyy järjestyksessä, kun osio vierii näkyviin (landing-boot.js lisää .play). */
.tl.anim .st{opacity:0;transform:translateY(16px)}
.tl.anim::before{transform:scaleX(0);transform-origin:left center}
.tl.anim.play .st{animation:stIn .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*.55s + .25s)}
.tl.anim.play::before{animation:tlLine 2.7s cubic-bezier(.3,.6,.3,1) .2s forwards}
.tl.anim .st:nth-child(1){--i:0}.tl.anim .st:nth-child(2){--i:1}.tl.anim .st:nth-child(3){--i:2}.tl.anim .st:nth-child(4){--i:3}.tl.anim .st:nth-child(5){--i:4}
.tl.anim+.tl-sum{opacity:0;transform:translateY(8px);transition:opacity .6s 3.3s,transform .6s 3.3s}
.tl.anim.play+.tl-sum{opacity:1;transform:none}
@keyframes stIn{to{opacity:1;transform:none}}
@keyframes tlLine{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.tl.anim .st,.tl.anim.play .st{opacity:1;transform:none;animation:none}.tl.anim::before{transform:none;animation:none}.tl.anim+.tl-sum{opacity:1;transform:none;transition:none}}
@media (max-width:980px){.lp-hero{grid-template-columns:1fr;padding-top:40px}.lp-links a:not(.lp-cta){display:none}.lp-h1{font-size:min(40px,calc((100vw - 44px)*.095))}.lp-h1-q{white-space:nowrap}.lp-logo img{height:34px}}
@media (max-width:899px){
 .lp-nav{padding:24px 20px 0}.lp-hero{padding:32px 20px 170px;gap:32px}.lp-links{gap:14px}
 .bn{padding:24px 20px 72px}.bn-h{font-size:30px}
 .tl{grid-template-columns:1fr;gap:14px;padding-left:34px}
 .tl::before{left:10px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(180deg,#3d5a85,#6fa0e0 60%,#d8d0c1)}
 .st{align-items:stretch;text-align:left}
 .stt{height:auto;margin-bottom:6px}
 .std{position:absolute;left:-30px;top:3px;margin:0}
 .stc{align-items:flex-start;min-height:0}
 .st.hi .stc{transform:none}
 .tl.anim::before{transform:scaleY(0);transform-origin:center top}
 .bn-foot{flex-direction:column;align-items:flex-start;gap:10px}
 .bg-nodes{display:none}
 .lp-visual .demo-fallback button{font-size:13px;white-space:nowrap;padding:9px 14px}
}
/* Etusivun pimeä tila (html.dark, landing-theme.js + landing-boot.js) */
html.dark{color-scheme:dark;--bg:#0b0f17;--card:#141a26;--ink:#f4f6fa;--muted:#98a3ba;--border:rgba(255,255,255,.08);--line:rgba(255,255,255,.08);--primary:#8fb4e8;--primary-soft:rgba(111,160,224,.16);--accent-soft:rgba(224,138,74,.16);--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-lg:0 12px 32px rgba(0,0,0,.45)}
html.dark body{background-color:#0b0f17;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.3px);color:#f4f6fa}
html.dark .bg-ridge .ridge-front{fill:#0b0f17}
html.dark .try-hint{background:#141a26;border-color:rgba(255,255,255,.14);color:#f4f6fa;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
html.dark .bn-lbl{color:#9dc0f2}
html.dark .bn-h{color:#f4f6fa}
html.dark .bn-p{color:#98a3ba}
html.dark .tag-ex{color:#8a93a6}
html.dark .bn-link{color:#9dc0f2}
html.dark .tl::before{background:linear-gradient(90deg,#6fa0e0,#3b6fd1 60%,rgba(255,255,255,.12))}
html.dark .stt{color:#9dc0f2}
html.dark .std{background:#0b0f17;border-color:#6fa0e0}
html.dark .st.hi .std{background:#6fa0e0;box-shadow:0 0 0 6px rgba(111,160,224,.2)}
html.dark .stc{background:#141a26;border-color:rgba(255,255,255,.07);box-shadow:0 24px 44px -26px rgba(0,0,0,.7)}
html.dark .stn{color:#f4f6fa}
html.dark .sts{color:#98a3ba}
html.dark .st.hi .stc{background:linear-gradient(150deg,#1d3a70,#3b6fd1);box-shadow:0 26px 60px -22px rgba(59,111,209,.55),0 0 0 1px rgba(111,160,224,.3)}
html.dark .st.hi .sts{color:rgba(244,246,250,.85)}
html.dark .stx{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}html.dark .stx b{color:#f4f6fa}html.dark .stx span{color:#98a3ba}html.dark .stx-draft i{color:#c9d2e0}html.dark .stx-btn{background:#fff;color:#16202e}html.dark .stx-cal b{color:#9dc0f2}html.dark .stx-inv b{color:#9dc0f2}html.dark .tl-sum{color:#c9d2e0}html.dark .tl-sum b{color:#f4f6fa}
html.dark .fci.n{background:rgba(255,255,255,.07);color:#98a3ba}
html.dark .fci.g{background:rgba(46,155,92,.16);color:#6fcf8e}
html.dark .fci.b{background:rgba(111,160,224,.16);color:#8fb4e8}
html.dark .fci.s{background:#3b6fd1}
html.dark .demo-fallback button{background:#141a26;border-color:rgba(255,255,255,.14);color:#f4f6fa}
@media (max-width:899px){html.dark .tl::before{background:linear-gradient(180deg,#6fa0e0,#3b6fd1 60%,rgba(255,255,255,.12))}}
/* Vähennetty liike: ei sykkivää pistettä, laitteen hover-kallistusta eikä demon avausanimaatiota */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .demo-pulse,.pulse,.bg-nodes,.nd circle{animation:none!important}
 .lp-visual .device{transition:none!important}
 .lp-visual .device:not(.open):hover{--ry:-13deg;--rx:5deg;--rz:-1.2deg}
 .demo-backdrop{transition:none!important}
}

/* ===== Etusivun alaosa (referenssi ainio-etusivu-koko.html): ominaisuudet, integraatiot, luottamus, hinnoittelu, CTA ja footer ===== */
.feat{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55) 18%,rgba(255,255,255,.55) 82%,rgba(255,255,255,0));padding:40px 0 90px}
.feat-in{max-width:1280px;margin:0 auto;padding:0 40px}
.feat-head{text-align:center;margin-bottom:40px}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fcard{background:#fff;border:1px solid #ece6da;border-radius:20px;padding:24px 24px 22px;box-shadow:0 20px 40px -30px rgba(30,24,14,.35);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.fcard:hover{transform:translateY(-3px);box-shadow:0 26px 46px -26px rgba(30,24,14,.4)}
.fisq{width:42px;height:42px;border-radius:12px;background:#e3ebfa;color:#2f5fa8;display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0}
.fcard h3{font-family:var(--font-heading);font-weight:600;font-size:20px;margin:0 0 8px;color:#16202e}
.fcard p{font-size:14px;line-height:1.6;color:#5b6474;margin:0 0 16px}
.fhero{grid-column:span 2;grid-row:span 1;background:linear-gradient(135deg,#0d1119 0%,#182644 55%,#2f5fa8 100%);border:0;color:#fff;position:relative;overflow:hidden;padding:26px 28px}
.fhero::after{content:"";position:absolute;width:420px;height:420px;right:-140px;top:-180px;border-radius:50%;background:radial-gradient(closest-side,rgba(111,160,224,.4),transparent);filter:blur(20px);pointer-events:none}
.fh-body{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;margin-top:18px;position:relative;z-index:1}
.fhero h3{color:#fff;font-size:24px}
.fhero p{color:rgba(244,246,250,.75)}.fhero p b{color:#fff}
.fhero ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.fhero li{display:flex;gap:8px;align-items:center;font-size:13.5px;color:rgba(244,246,250,.9)}
.fhero li svg{color:#8fe0a8;flex-shrink:0}
.feat-foot{display:flex;justify-content:space-between;align-items:center;margin-top:28px;font-size:13.5px;color:#8a8f99}
html.dark .feat{background:linear-gradient(180deg,transparent,rgba(255,255,255,.02) 18%,rgba(255,255,255,.02) 82%,transparent)}
html.dark .fcard:not(.fhero){background:#141a26;border-color:rgba(255,255,255,.07)}
html.dark .fcard:not(.fhero) h3{color:#f4f6fa}html.dark .fcard:not(.fhero) p{color:#98a3ba}
html.dark .fisq:not(.light){background:rgba(111,160,224,.16);color:#8fb4e8}
/* Isommissa paketeissa lisäksi (22.10.2026): neljän vaihekortin alla koko leveä tumma laatikko, jossa Kasvu- ja
   Huippu-paketin lisäominaisuudet ovat kahdessa sarakkeessa (kapealla näytöllä allekkain). */
.fgrid .mx-extra{grid-column:1/-1;grid-row:auto}
.mx-extra .fh-body,.mx-extra .fh-text{display:block;max-width:none;width:100%}
.mx-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;margin-top:14px}
.mx-pk{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.18)}
.mx-extra ul{display:grid;gap:14px;margin:0}
.mx-extra li{align-items:flex-start}
.mx-extra .mx-note{margin:24px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);text-align:center;text-wrap:balance;font-size:14px;color:rgba(244,246,250,.8)}
@media (max-width:800px){.mx-cols{grid-template-columns:1fr}}


/* Neljän kortin esimerkkikuvat (22.10.2026): HTML:llä piirretty viesti ja vastaus, tarjous, puhelimen päivänäkymä ja
   lasku. Sama ilme kuin toimialasivujen esimerkeissä (toimiala.css, .ex-*). Lähetä-nappi on sama sininen kuin
   sovelluksen lähetysnappi (work.css .ms-dok) sekä vaalealla että tummalla. */
:root{--fx-btn:#2f5fa8;--fx-pad-line:#cfd6e0;--fx-paper:#fff;--fx-ink:#16202e;--fx-muted:#6b7385;--fx-line:rgba(36,69,111,.12);--fx-blue:#2f5fa8;--fx-blue2:#5b8fdc;--fx-tint:#e7f0fb;--fx-tint-ink:#2f5fa8;--fx-stage:radial-gradient(rgba(47,95,168,.10) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(150deg,#e8eff9 0%,#f3f5f9 55%,#f6f2eb 100%);--fx-stage-line:rgba(47,95,168,.10);--fx-sh:0 1px 1px rgba(16,24,40,.04),0 8px 18px -8px rgba(36,69,111,.22),0 22px 36px -24px rgba(36,69,111,.4)}
html.dark{--fx-pad-line:rgba(255,255,255,.18);--fx-paper:#212b3b;--fx-ink:#f4f6fa;--fx-muted:#98a3ba;--fx-line:rgba(255,255,255,.08);--fx-blue:#3a6cb8;--fx-blue2:#6f9fe0;--fx-tint:rgba(111,160,224,.16);--fx-tint-ink:#8fb4e8;--fx-stage:radial-gradient(rgba(143,180,232,.10) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(150deg,rgba(111,160,224,.16) 0%,rgba(111,160,224,.06) 60%,rgba(255,255,255,.02) 100%);--fx-stage-line:rgba(143,180,232,.14);--fx-sh:0 1px 2px rgba(0,0,0,.35),0 14px 30px -14px rgba(0,0,0,.75)}
.fx{margin-top:auto;display:flex;flex-direction:column;justify-content:center;gap:8px;background:var(--fx-stage);border:1px solid var(--fx-stage-line);border-radius:14px;padding:12px;font-size:12px;line-height:1.45;color:var(--fx-ink)}
.fx>*{width:100%;max-width:330px;margin-left:auto;margin-right:auto}
.fx-doc{background:var(--fx-paper);border:1px solid var(--fx-line);border-radius:10px;box-shadow:var(--fx-sh);padding:9px 11px}
.fx-msg{display:flex;align-items:center;gap:8px;padding:5px 0}
.fx-msg+.fx-msg{border-top:1px solid var(--fx-line)}
.fx-av{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--fx-tint);color:var(--fx-tint-ink);display:grid;place-items:center;font-size:10px;font-weight:700}
.fx-mt{flex:1;min-width:0;line-height:1.25}
.fx-mt b{display:block;font-size:12px}
.fx-mt small{display:block;font-size:11px;color:var(--fx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-tag{flex-shrink:0;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--fx-tint);color:var(--fx-tint-ink)}
.fx-ad{opacity:.55}
.fx-ad .fx-av,.fx-ad .fx-tag{background:transparent;box-shadow:inset 0 0 0 1px var(--fx-line);color:var(--fx-muted)}
.fx-cap{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--fx-tint-ink);margin-bottom:3px}
.fx-txt{display:block}
.fx-act{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:9px}
.fx-btn{display:inline-flex;align-items:center;gap:5px;background:var(--fx-btn);color:#fff;font-size:11px;font-weight:700;padding:5px 11px;border-radius:8px;box-shadow:0 4px 10px -6px rgba(47,95,168,.8)}
.fx-done{margin-right:auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--fx-tint-ink)}
.fx-paper{position:relative;padding-top:12px}
.fx-paper::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:10px 10px 0 0;background:linear-gradient(90deg,var(--fx-blue),var(--fx-blue2))}
.fx-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.fx-logo{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px}
.fx-logo i{font-style:normal;width:18px;height:18px;border-radius:6px;background:linear-gradient(145deg,var(--fx-blue2),var(--fx-blue));color:#fff;display:grid;place-items:center;font-size:9.5px;font-weight:800}
.fx-kind{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-muted)}
.fx-sub{display:block;color:var(--fx-muted);font-size:10.5px;margin-bottom:5px}
.fx-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-top:1px solid var(--fx-line);font-variant-numeric:tabular-nums}
.fx-row>span:last-child{white-space:nowrap}
.fx-sum{font-weight:700;border-top:1.5px solid var(--fx-ink)}
.fx-sum>span:last-child{color:var(--fx-tint-ink)}
.fx-ok{display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 9px;border-radius:8px;background:var(--fx-tint);color:var(--fx-tint-ink)}
.fx-ok>svg{flex-shrink:0}
.fx-ok b{display:block;font-size:11px}
.fx-ok small{display:block;font-size:10.5px;opacity:.85}
.fx-phst{justify-content:flex-start;padding-bottom:0;overflow:hidden}
.fx-phone{width:100%;max-width:230px;margin:0 auto;background:var(--fx-paper);border:1px solid var(--fx-line);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:var(--fx-sh);padding:8px 10px 12px}
.fx-phone::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--fx-line);margin:0 auto 8px}
.fx-ph-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.fx-ph-top b{font-size:12.5px}
.fx-ph-top span{font-size:10.5px;color:var(--fx-muted)}
.fx-job{display:block;border:1px solid var(--fx-line);border-left:3px solid var(--fx-blue2);border-radius:9px;padding:7px 8px}
.fx-job+.fx-job{margin-top:6px}
.fx-jt{display:flex;justify-content:space-between;align-items:center;gap:6px}
.fx-jt b{font-size:11.5px}
.fx-job small{display:block;font-size:10.5px;color:var(--fx-muted);margin-top:1px}
.fx-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 8px;box-shadow:inset 0 0 0 1px var(--fx-line);border-radius:999px;white-space:nowrap}
.fx-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
.fx-tiles>span{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;background:var(--fx-tint);color:var(--fx-tint-ink);border-radius:7px;padding:5px 7px;white-space:nowrap}
/* Kuittaus sovelluksen allekirjoitusruudun tapaan: katkoviivareuna, teksti "Asiakas kuittaa sormella tähän" ja 2,4 px
   viiva (job-work.js). Jälki on tehty Hershey Script -viivafontin vedoista (Dr. A. V. Hershey, U.S. National Bureau of
   Standards) kömpelöiksi ja huojuviksi, jotta se näyttää sormella puhelimen näytölle piirretyltä (Taneli 22.10.2026). */
.fx-sign{display:block;margin-top:6px}
.fx-pad{display:block;border:1.5px dashed var(--fx-pad-line);border-radius:9px;padding:4px 8px 3px}
.fx-scr{display:block;height:30px;width:auto;max-width:100%;margin:0 auto;color:var(--fx-ink)}
.fx-pad small{display:block;font-size:8.5px;color:var(--fx-muted)}
.fx-sok{display:flex;align-items:center;gap:4px;margin-top:5px;font-size:10px;font-weight:700;color:var(--fx-tint-ink)}
.fx-next{opacity:.6;border-left-color:var(--fx-line)}
/* Neljän sarakkeen näkymässä kuvat ovat yhtä korkeat, jotta niiden yläreunat ovat samalla tasolla. Puhelimen
   alareuna jää kuvan reunan alle. */
@media (min-width:1201px){.fx{min-height:262px}.fx-phst{height:262px}}
.fcard p{margin-bottom:14px}




.in2{max-width:1240px;margin:0 auto;padding:0 40px}
.sec-head{text-align:center;max-width:680px;margin:0 auto 44px}
.sec-head .bn-p{margin:0 auto}
/* integraatiot */
.intg2{padding:40px 0 110px}
/* Yhteydet yhtenä ketjuna viestistä laskuun (Taneli 26.10.2026, malli 6): viisi asemaa ohuen kiskon varrella, ei kortteja eikä
   logoja, ja kaikki jäävät yhteydet samanarvoisina (server/readiness.mjs HIDDEN_CONNECTIONS). Asema = ikoni, nimi, yksi lause
   siitä, mitä Ainio tekee, ja ohjelmien nimet. Sarakkeet jakavat rivit (subgrid), jotta lauseet ja nimet alkavat samalta korkeudelta. */
.ch{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto auto auto;gap:0 22px;max-width:1140px;margin:6px auto 0;padding:0;list-style:none;text-align:center}
.ch::before{content:"";position:absolute;left:10%;right:10%;top:27px;height:2px;border-radius:2px;background:linear-gradient(90deg,#b9cbe6,#2f5fa8 50%,#b9cbe6);transform-origin:left center}
.ch-s{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;justify-items:center;align-content:start}
.ch-n{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;color:#2f5fa8;box-shadow:0 0 0 6px #f3efe7,0 0 0 7px #d5e0f0,0 14px 26px -16px rgba(30,40,70,.55)}
.ch-n svg{width:24px;height:24px}
.ch-t{margin:22px 0 8px;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3d5a85}
.ch-d{margin:0 auto 16px;max-width:210px;font-size:13.5px;line-height:1.5;color:#5b6474}
.ch-l{margin:0;padding:0;list-style:none}
.ch-l li{padding:5px 0;font-family:var(--font-heading);font-weight:600;font-size:clamp(16px,1.55vw,19px);line-height:1.35;letter-spacing:-.01em;color:#151b26;hyphens:manual}
/* Osion alarivi (korvasi 26.10.2026 kolmen kortin nauhan "Toimii nykyisten ohjelmiesi rinnalla", joka toisti otsikon). */
.ch-foot{max-width:640px;margin:56px auto 0;padding-top:28px;border-top:1px solid #ddd5c6;text-align:center;font-size:15px;line-height:1.6;color:#5b6474}
.ch-foot a{color:#2f5fa8;font-weight:700;text-underline-offset:3px}
.ch-foot a:focus-visible{outline:2px solid #2f5fa8;outline-offset:3px;border-radius:3px}
/* Liike kerran, kun osio tulee näkyviin (dist/landing-boot.js lisää .anim ja .on): kisko piirtyy vasemmalta oikealle ja asemat
   syttyvät vuorollaan. Ilman skriptejä tai vähemmällä liikkeellä osio näkyy heti valmiina. */
.ch.anim::before{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
.ch.anim .ch-s{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i)*.28s + .15s)}
.ch.anim.on::before{transform:none}
.ch.anim.on .ch-s{opacity:1;transform:none}
html.dark .ch::before{background:linear-gradient(90deg,#2a3c5e,#6f9be0 50%,#2a3c5e)}
html.dark .ch-n{background:#141a26;color:#8fb4e8;box-shadow:0 0 0 6px #0b0f17,0 0 0 7px rgba(111,160,224,.35),0 14px 26px -16px rgba(0,0,0,.8)}
html.dark .ch-t{color:#9dc0f2}
html.dark .ch-d{color:#98a3ba}
html.dark .ch-l li{color:#f4f6fa}
html.dark .ch-foot{color:#98a3ba;border-top-color:rgba(255,255,255,.1)}
html.dark .ch-foot a{color:#9dc0f2}
html.dark .ch-foot a:focus-visible{outline-color:#9dc0f2}
/* Kapealla näytöllä asemat allekkain: ikoni vasemmalla, kisko asemien välissä, nimet rivissä. */
@media (max-width:980px){
 .ch{grid-template-columns:1fr;gap:0;max-width:520px;text-align:left}
 .ch::before{display:none}
 .ch-s{grid-row:auto;grid-template-rows:none;grid-template-columns:56px 1fr;column-gap:20px;justify-items:start;padding-bottom:30px}
 .ch-s:last-child{padding-bottom:0}
 .ch-s:not(:last-child)::before{content:"";position:absolute;left:27px;top:62px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,#9db6dd,#2f5fa8)}
 html.dark .ch-s:not(:last-child)::before{background:linear-gradient(180deg,#2a3c5e,#6f9be0)}
 .ch-n{grid-row:1/4}
 .ch-t,.ch-d,.ch-l{grid-column:2}
 .ch-t{margin:4px 0 6px}
 .ch-d{margin:0 0 8px;max-width:none}
 .ch-l{display:flex;flex-wrap:wrap;gap:2px 20px}
 .ch-l li{padding:2px 0;font-size:18px}
 .ch-foot{margin-top:44px}
}
@media (prefers-reduced-motion:reduce){.ch.anim::before,.ch.anim .ch-s{transition:none;transform:none;opacity:1}}
/* luottamus */
.trust2{position:relative;padding:100px 0 110px;overflow:hidden}
.tbg{position:absolute;inset:0;background:linear-gradient(128deg,#0d1119 0%,#182644 55%,#223a66 100%)}
.trust2 .in2{position:relative}
.sec-head.dark .bn-lbl{color:#9dc0f2}.sec-head.dark .bn-h{color:#fff}.sec-head.dark .bn-p{color:rgba(244,246,250,.7)}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tc{background:rgba(22,31,50,.9);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:24px 22px;box-shadow:0 24px 48px -30px rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.tci{width:40px;height:40px;border-radius:11px;background:rgba(111,160,224,.18);color:#9dc0f2;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tc h3{font-family:var(--font-heading);font-weight:600;font-size:18px;color:#fff;margin:0 0 8px}
.tc p{font-size:14px;line-height:1.6;color:rgba(244,246,250,.84);margin:0}
/* hinnoittelu */
.price2{padding:100px 0 100px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.pc{position:relative;background:#fff;border:1px solid #ece6da;border-radius:22px;padding:30px 28px;box-shadow:0 24px 50px -34px rgba(30,24,14,.4);display:flex;flex-direction:column}
.pc.pop{border:2px solid #2f5fa8;box-shadow:0 30px 60px -30px rgba(47,95,168,.45);transform:translateY(-10px)}
.pc.dark{background:linear-gradient(150deg,#0d1119,#182644 60%,#223a66);border:0;color:#fff}
.pbadge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;background:#2f5fa8;color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:6px 14px;box-shadow:0 8px 18px -8px rgba(47,95,168,.8)}
.ptag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a8f99}
.pc.pop .ptag{color:#2f5fa8}.pc.dark .ptag{color:#9dc0f2}
.pname{font-family:var(--font-heading);font-weight:600;font-size:24px;margin:6px 0 14px}
.pprice b{font-family:var(--font-heading);font-weight:600;font-size:46px;letter-spacing:-.02em}
.pprice span{font-size:16px;color:#8a8f99;margin-left:6px;font-weight:600}
.pc.pop .pprice b{color:#2f5fa8}.pc.dark .pprice span{color:rgba(244,246,250,.55)}
.pvat{font-size:12.5px;font-weight:600;color:#6c727c;margin-top:4px}.pc.dark .pvat{color:rgba(244,246,250,.55)}
.plead{font-size:14px;color:#5b6474;margin:14px 0 18px;min-height:22px}
.pfit{font-size:13px;line-height:1.5;color:#6b7686;margin-top:12px}.pc.dark .pfit{color:rgba(244,246,250,.62)}
.pinc{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6c727c;margin-bottom:12px}.pc.pop .pinc{color:#2f5fa8}.pc.dark .pinc{color:#9dc0f2}.pc.dark .plead{color:rgba(244,246,250,.7)}
.pbtn{display:flex;align-items:center;justify-content:center;height:48px;border-radius:12px;font-weight:700;font-size:14.5px;text-decoration:none;border:1px solid #d8d1c4;color:#16202e}
.pc.pop .pbtn{background:linear-gradient(180deg,#3d6fbf,#2f5fa8);color:#fff;border:0;box-shadow:0 12px 24px -12px rgba(47,95,168,.8)}
.pc.dark .pbtn{background:#fff;color:#16202e;border:0}
.pdiv{height:1px;background:#ece6da;margin:22px 0 18px}.pc.dark .pdiv{background:rgba(255,255,255,.12)}
.pc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.pc li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:#33455c}
.pc li svg{color:#2e9b5c;flex-shrink:0;margin-top:3px}
.pc.dark li{color:rgba(244,246,250,.85)}.pc.dark li svg{color:#8fe0a8}.pc.dark li b{color:#fff}
.pnote{display:flex;justify-content:center;gap:28px;margin-top:34px;flex-wrap:wrap}
.pnote span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#5b6474}
.pnote svg{color:#2e9b5c}
.pnote span[hidden]{display:none}
/* Isot yritykset: räätälöity paketti, oma yhteydenottosivu /yhteydenotto. */
.pent{margin:30px auto 0;max-width:980px;display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;padding:20px 26px;background:#fff;border:1px solid #ece6da;border-radius:18px;box-shadow:0 18px 40px -34px rgba(30,24,14,.4)}
.pent-t{display:grid;gap:3px;min-width:0}
.pent-t b{font-family:var(--font-heading);font-weight:600;font-size:20px;color:#16202e;letter-spacing:-.01em}
.pent-t span{font-size:14.5px;color:#5b6474;line-height:1.5}
.pent-b{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:12px;font-weight:700;font-size:14.5px;text-decoration:none;background:#16202e;color:#fff;flex:none}
.pent-b:hover{background:#2f5fa8}
.pent-b:focus-visible{outline:3px solid #6fa0e0;outline-offset:3px}
/* cta */
.cta2{position:relative;overflow:hidden;padding:150px 0 110px;text-align:center;background:#f3efe7}
.cbg{position:absolute;inset:0;background:linear-gradient(128deg,#0d1119 0%,#182644 48%,#2f5fa8 100%);clip-path:polygon(0 80px,15% 46px,29.4% 76px,43.75% 42px,59.4% 78px,73.75% 50px,87.5% 70px,100% 54px,100% 100%,0 100%)}
.cridge{position:absolute;left:0;right:0;top:-1px;width:100%;height:170px}
.cin{position:relative}
.cta2 h2{font-family:var(--font-heading);font-weight:600;font-size:44px;color:#fff;margin:0 0 14px;letter-spacing:-.01em}
.cta2 p{font-size:16px;color:rgba(244,246,250,.72);max-width:560px;margin:0 auto 30px;line-height:1.6}
.cbtns{display:flex;justify-content:center;gap:12px}
.cb1{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#16202e;font-weight:700;font-size:15px;border-radius:12px;padding:14px 22px;text-decoration:none}
.cb2{display:inline-flex;align-items:center;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);font-weight:700;font-size:15px;border-radius:12px;padding:14px 22px;text-decoration:none}
.cmeta{display:flex;justify-content:center;gap:24px;margin-top:26px;flex-wrap:wrap}
.cmeta span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:rgba(244,246,250,.75)}.cmeta svg{color:#8fe0a8}
/* footer */
.ft{background:#0b0f17;color:rgba(244,246,250,.6);padding:60px 0 30px}
.fgrid2{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.flogo{font-weight:800;font-size:24px;letter-spacing:.04em;color:#9dc0f2;margin-bottom:12px}
.ft p{font-size:13.5px;line-height:1.6;max-width:300px;margin:0}
.fh{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,246,250,.45);margin-bottom:14px}
.ft a{display:block;color:rgba(244,246,250,.8);text-decoration:none;font-size:14px;margin-bottom:10px}
.fbot{display:flex;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px}
.fbot a{display:inline;margin:0;font-size:inherit;color:inherit;white-space:nowrap}
/* pimeä tila */
html.dark .pc:not(.dark){background:#141a26;border-color:rgba(255,255,255,.07)}html.dark .pc:not(.dark) .pname,html.dark .pc:not(.dark) .pprice b{color:#f4f6fa}
html.dark .pc.pop{border-color:#3b6fd1}html.dark .pc.pop .ptag,html.dark .pc.pop .pinc{color:#9dc0f2}html.dark .pc.pop .pprice b{color:#9dc0f2}
html.dark .pc:not(.dark) li{color:#c9d2e0}html.dark .plead{color:#98a3ba}html.dark .pfit{color:#8a95aa}html.dark .pvat{color:#8a95aa}html.dark .pdiv{background:rgba(255,255,255,.08)}
html.dark .pc:not(.pop):not(.dark) .pbtn{color:#f4f6fa;border-color:rgba(255,255,255,.18)}html.dark .pnote span{color:#98a3ba}html.dark .pent{background:#141a26;border-color:rgba(255,255,255,.1);box-shadow:none}html.dark .pent-t b{color:#f4f6fa}html.dark .pent-t span{color:#98a3ba}html.dark .pent-b{background:#f4f6fa;color:#16202e}html.dark .pent-b:hover{background:#9dc0f2}
html.dark .cta2{background:#0b0f17}
html.dark .tbg{background:linear-gradient(128deg,#141d30 0%,#182644 55%,#223a66 100%)}

.tbg{overflow:hidden}
.tbg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.tnodes{position:absolute;left:3%;top:50px;width:300px;height:150px;opacity:.2}.tnodes circle{fill:#9dc0f2;opacity:.5}.tnodes path{stroke:#9dc0f2;stroke-width:1;opacity:.25}
.tring{position:absolute;border-radius:50%;border:1px solid rgba(157,192,242,.04)}
.tring.r1{width:520px;height:520px;left:-200px;bottom:-300px}.tring.r2{width:760px;height:760px;left:-320px;bottom:-420px}
.tridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:150px}
@media (prefers-reduced-motion:reduce){.fcard,.fcard:hover{transition:none;transform:none}}

/* Footerin Ainio-logo: projektin oma logotiedosto värjättynä vaaleansiniseksi */
.flogo{display:block;width:120px;height:30px;background-color:#9dc0f2;-webkit-mask:url(/assets/logo.webp) left center/contain no-repeat;mask:url(/assets/logo.webp) left center/contain no-repeat}
.ft a:hover{color:#fff}
.ft a:focus-visible,.pbtn:focus-visible,.cb1:focus-visible,.cb2:focus-visible{outline:2px solid #6fa0e0;outline-offset:3px}
/* Vaalean teeman valkoisilla korteilla kohdistuksen reunus tummemmalla sinisellä (WCAG 1.4.11, 3:1; tarkistus 19.10.2026). */
html:not(.dark) .pc:not(.dark) .pbtn:focus-visible,html:not(.dark) .pent-b:focus-visible{outline-color:#2f5fa8}
.pc:not(.pop):not(.dark) .pbtn:hover{border-color:#2f5fa8;color:#2f5fa8}
.pc.pop .pbtn:hover,.cb1:hover{filter:brightness(1.06)}
.cb2:hover{border-color:rgba(255,255,255,.6)}
/* Mobiili ja kapeat näytöt */
@media (max-width:1200px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.tgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:899px){
 .feat-in,.in2{padding:0 20px}
 .fgrid{grid-template-columns:1fr}.fhero{grid-column:auto}.fh-body{grid-template-columns:1fr}
 .intg2{padding:30px 0 80px}
 .trust2{padding:70px 0 80px}.tgrid{grid-template-columns:1fr}
 .price2{padding:70px 0}.pgrid{grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:30px}.pc.pop{transform:none}
 .pnote{flex-direction:column;align-items:flex-start;gap:10px;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
 .pnote span{align-items:flex-start}.pnote svg{flex:none;margin-top:3px}
 .pent{flex-direction:column;align-items:stretch;text-align:center;padding:18px}.pent-b{justify-content:center}
 .cta2{padding:120px 0 80px}.cta2 h2{font-size:32px}.cbtns{flex-direction:column;align-items:center}
 .fgrid2{grid-template-columns:1fr 1fr;gap:30px}.fgrid2>div:first-child{grid-column:1/-1}
 .fbot{flex-direction:column;gap:8px}
}
/* WCAG AA -kontrasti: mallin harmaat pientekstit hieman tummemmiksi vaaleassa tilassa ja footerin otsikot vaaleammiksi */
html:not(.dark) .ptag,html:not(.dark) .pprice span{color:#6b7280}
.fh{color:rgba(244,246,250,.6)}

/* ===== Yläpalkki: logo vasemmalla, osiolinkit keskellä, toiminnot oikealla ===== */
.lp-nav{display:grid;grid-template-columns:auto 1fr auto;gap:32px}
.lp-logo img{height:38px}
.lp-links{justify-content:center;gap:34px;font-size:16px;font-weight:500}
.lp-links a{position:relative;padding:6px 0}
.lp-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#9dc0f2;transform:scaleX(0);transition:transform .2s}
.lp-links a:hover::after,.lp-links a:focus-visible::after{transform:scaleX(1)}
.lp-links a:focus-visible,.lp-login:focus-visible{outline:2px solid #9dc0f2;outline-offset:3px}
.lp-actions{display:flex;align-items:center;gap:12px}
.lp-moon{width:40px;height:40px}
.lp-login{font-size:15px;font-weight:600;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:10px 18px}
.lp-login:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.lp-cta{font-size:15px;padding:11px 22px;text-decoration:none;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.lp-cta:hover{filter:brightness(.96)}
.lp-btn{font-size:16px;padding:15px 24px}
.lp-lead{font-size:17px}
.lp-note{font-size:14px;color:rgba(244,246,250,.7)}
.lp-note a{color:#fff;font-weight:600;text-decoration:none}
.lp-note a:hover{text-decoration:underline}
@media (max-width:1180px){.lp-links{gap:22px;font-size:15px}.lp-login{display:none}}
@media (max-width:980px){.lp-nav{grid-template-columns:auto 1fr}.lp-links{display:none}.lp-actions{justify-self:end}}
@media (max-width:560px){.lp-cta{display:none}.lp-login{display:inline-flex}.lp-logo img{height:30px}}

/* ===== Isot näytöt (yli 1600 px): yläpalkki ja hero levenevät yhdessä 1720 px:iin ===== */
@media (min-width:1600px){
 .lp-nav,.lp-hero{max-width:1720px}
 .lp-nav{padding:34px 56px 0}
 .lp-hero{padding-left:56px;padding-right:56px;gap:72px}
 .lp-links{gap:44px;font-size:17px}
 .lp-h1{font-size:min(60px,2.85vw)}
 .lp-lead{font-size:19px;max-width:560px}
}
/* Tähtikuvio siirtyy dashboard-kuvan oikealle puolelle jäävään tyhjään tilaan ja skaalautuu sen levyiseksi.
   Kapeammilla näytöillä se pysyy entisellä paikallaan kuvan takana. */
.bg-nodes-tall{display:none}
@media (min-width:2200px){
 .bg-nodes{display:none}
 .bg-nodes-tall{display:block;position:absolute;top:110px;width:min(300px,calc(50vw - 880px));right:calc((50vw - 804px - min(300px,calc(50vw - 880px)))/2);height:auto;aspect-ratio:240/600;overflow:visible;animation:tallDrift 60s ease-in-out infinite alternate}
 .bg-nodes-tall .nh circle{fill:#9dc0f2;opacity:.1}
 .bg-nodes-tall .nd circle:nth-child(3),.bg-nodes-tall .nd circle:nth-child(7){fill:#e3edfb;opacity:.75}
 .bg-nodes-tall .nt circle{fill:#fff;opacity:.35;animation:nodeGlow 9s ease-in-out infinite}
 .bg-nodes-tall .nt circle:nth-child(2n){animation-delay:-4s}
 .bg-nodes-tall .nt circle:nth-child(3n){animation-delay:-6.5s}
}
@keyframes tallDrift{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-10px,-16px) rotate(-1.5deg)}100%{transform:translate(6px,-6px) rotate(1deg)}}
@media (prefers-reduced-motion:reduce){.bg-nodes-tall,.bg-nodes-tall .nt circle{animation:none!important}}
.tc p a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Menetetyn keikan laskuri (ennen hinnoittelua); logiikka dist/landing-boot.js */
/* "Miten Ainio käyttää Google-tietojasi" (alatunnisteen yläpuolella, tiivis): Googlen tarkastusta varten. */
.gdata{background:#0b0f17;padding:36px 0 0}
.gd-box{max-width:1060px;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px 22px}
.gd-h{font-size:14px;font-weight:700;color:rgba(244,246,250,.85);margin:0 0 6px}
.gd-fi,.gd-en{margin:0;font-size:13px;line-height:1.6;color:rgba(244,246,250,.6)}
.gd-en{margin-top:8px;font-size:12px}
.gd-fi a,.gd-en a{color:#9dc0f2;font-weight:600;text-underline-offset:2px}
.gd-fi a:focus-visible,.gd-en a:focus-visible{outline:2px solid #9dc0f2;outline-offset:3px}
html.dark .gd-en{color:rgba(244,246,250,.6)}
html.dark .gd-en a{color:#9dc0f2}
@media (max-width:899px){.gd-box{padding:16px}}
/* Toimialat-valikko yläpalkissa (13.10.2026): nappi avaa listan alojen omista sivuista (ainio.fi/lvi ym., scripts/sector-pages.mjs).
   Kapealla näytöllä muut yläpalkin linkit piilotetaan, ja Toimialat näkyy pyöristettynä nappina logon vieressä. */
.tm{position:relative;display:inline-flex;align-items:center}
.tm-b{background:none;border:0;color:inherit;font:inherit;font-weight:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0}
.tm-b:focus-visible{outline:2px solid #9dc0f2;outline-offset:3px}
.tm-p{display:none;position:absolute;top:calc(100% + 10px);left:-14px;z-index:60;min-width:250px;background:#fff;border:1px solid #dbe2ec;border-radius:14px;padding:8px;box-shadow:0 12px 32px rgba(20,24,32,.18)}
.tm.open .tm-p{display:block}
.tm-h{display:block;padding:6px 12px 8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7686}
.lp-links .tm-p a.tm-i{display:flex !important;padding:9px 12px;border-radius:9px;color:#1a1f26;font-size:15px;font-weight:500}
.lp-links .tm-p a.tm-i::after{display:none}
.tm-i:hover{background:#eef3fa}
.tm-i.cur{background:#e3ebfa;color:#2f5fa8 !important;font-weight:700 !important}
html.dark .tm-p{background:#1a222e;border-color:rgba(255,255,255,.1)}
html.dark .tm-h{color:#98a3ba}
html.dark .lp-links .tm-p a.tm-i{color:#f4f6fa}
html.dark .tm-i:hover{background:rgba(255,255,255,.06)}
html.dark .tm-i.cur{background:rgba(111,160,224,.16);color:#9dc0f2 !important}
@media (max-width:980px){.lp-nav{grid-template-columns:auto 1fr auto}.lp-logo img{max-width:none;width:auto}.lp-links{min-width:0;display:flex;grid-column:2;grid-row:1;justify-content:flex-start;gap:0;margin:0 0 0 16px}.lp-links>a{display:none}.tm-b{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 14px;color:#fff;font-size:14px;font-weight:600}.tm-p{left:0;right:auto;max-width:calc(100vw - 40px)}}
/* Puhelimen yläpalkki (omistaja 18.10.2026): logo vasemmalla, toiminnot oikealla. Vain Kirjaudu on kehystetty; Toimialat ja
   teemanappi ovat kevyitä. Toimialat-valikko avautuu koko levyisenä yläpalkin alle. */
@media (max-width:560px){header.lp-nav{position:relative;column-gap:4px}.lp-nav .lp-links{justify-content:flex-end;margin:0}.lp-nav .tm{position:static}.lp-nav .tm-b{border:0;padding:8px;font-size:15px;gap:4px}.lp-nav .tm-p{left:16px;right:16px;top:calc(100% + 8px);max-width:none;min-width:0}.lp-nav .lp-actions{gap:2px}.lp-nav .lp-moon{width:38px;height:38px;border:0;background:none;color:rgba(255,255,255,.85)}.lp-nav .lp-login{margin-left:4px;padding:8px 16px;font-size:14.5px;border-color:rgba(255,255,255,.45)}.lp-lg-x{display:none}.lp-nav .lp-logo img{height:26px}}
@media (max-width:380px){header.lp-nav{padding-left:16px;padding-right:16px;column-gap:2px}.lp-nav .lp-logo img{height:24px}.lp-nav .tm-b{padding:6px;font-size:14px}.lp-nav .lp-actions{gap:0}.lp-nav .lp-moon{width:34px;height:34px}.lp-nav .lp-login{padding:7px 12px;font-size:13.5px}}
/* Valitse oma alasi -laatikko (13.10.2026): 11 toimialan korttia yläbannerin alla, kuvat dist/assets/toimialat/kortit.
   Hiiren ollessa kortin päällä kuvassa liikkuu yksi asia; puhelimessa liike toistuu kerran (landing-boot.js). */
.alat{position:relative;z-index:1;padding:0;margin:0}
.alat-in{max-width:1360px;margin:0 auto;padding:18px 40px 26px}
.alat-box{background:#fff;border:1px solid rgba(60,52,40,.12);border-radius:24px;padding:30px 32px 32px;box-shadow:0 1px 2px rgba(40,32,20,.04),0 14px 36px rgba(40,32,20,.07)}
.alat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-bottom:22px}
.alat-head .bn-h{font-size:30px;margin:8px 0 0}
.alat-head .bn-p{max-width:470px;font-size:15.5px}
.alat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.alat-c{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#13203a;color:#fff;text-decoration:none;isolation:isolate;transition:transform .25s ease,box-shadow .25s ease}
.alat-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.alat-c::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,22,0) 38%,rgba(8,12,22,.82) 100%);z-index:1}
.alat-n{position:absolute;left:16px;right:54px;bottom:13px;z-index:2;font-weight:600;font-size:18px;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.alat-a{position:absolute;right:13px;bottom:12px;z-index:2;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);transition:transform .25s ease}
.alat-c:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,28,48,.22)}
.alat-c:hover img{transform:scale(1.04)}
.alat-c:hover .alat-a{transform:translateX(2px)}
.alat-c:focus-visible{outline:3px solid #3d5a85;outline-offset:3px}
.alat-muu{background:linear-gradient(135deg,#182644 0%,#2f5fa8 100%);padding:16px 16px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
.alat-muu::after{display:none}
.alat-mt{font-weight:600;font-size:18px}
.alat-ms{font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.78)}
.alat-ml{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;margin-top:4px}
html.dark .alat-box{background:#141a26;border-color:rgba(255,255,255,.08);box-shadow:0 12px 32px rgba(0,0,0,.35)}
html.dark .alat-c:focus-visible{outline-color:#9dc0f2}
@media (max-width:1100px){.alat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.alat-in{padding:10px 16px 18px}.alat-box{padding:20px 16px 18px;border-radius:20px}.alat-head{margin-bottom:16px}.alat-head .bn-h{font-size:25px}.alat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.alat-c{border-radius:12px}.alat-n{left:10px;right:10px;bottom:9px;font-size:14.5px}.alat-a{display:none}.alat-muu{padding:10px}.alat-mt{font-size:14.5px}.alat-ms{display:none}.alat-ml{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.alat-c,.alat-c img,.alat-a{transition:none}.alat-c:hover,.alat-c:hover img{transform:none}}
/* Liikkuvat kortit: hiiren ollessa kortin päällä kuvassa liikkuu yksi asia (mallikuva 12.10.2026). */
.alat-c img.ly{inset:auto;height:auto;max-width:none;object-fit:fill}
.alat-anim:hover img{transform:none}
.alat-kuljetus :is(.kj-tk,.kj-car){will-change:transform;transition:transform 1s cubic-bezier(.4,0,.2,1)}
.alat-kuljetus:hover .kj-tk,.alat-kuljetus.run .kj-tk{transform:scale(.86);transition:transform 1.8s cubic-bezier(.3,.05,.2,1)}
.alat-kuljetus:hover .kj-car,.alat-kuljetus.run .kj-car{transform:scale(var(--k));transition:transform 1.8s cubic-bezier(.3,.05,.2,1)}
.kp-g{position:absolute;aspect-ratio:1}
.kp-g .cp{position:absolute;inset:0}
.kp-g i{position:absolute;inset:0;background:var(--s) 0 0/100% 100% no-repeat}
.alat-c .kp-g img{inset:0;width:100%;height:100%;object-fit:fill}
.kp-g i,.alat-c .kp-g img{transform-origin:var(--o);will-change:transform;animation:kp-a 9s linear infinite paused}
.kp-g2 i,.alat-c .kp-g2 img{animation-name:kp-b;animation-duration:4.5s}
.alat-konepaja:hover .kp-g :is(i,img),.alat-konepaja.run .kp-g :is(i,img){animation-play-state:running}
.alat-sahko{container-type:inline-size}
.alat-c img.sk-br{opacity:0;transition:opacity .9s ease}
.alat-sahko:hover img.sk-br,.alat-sahko.run img.sk-br{opacity:1;transition:opacity 1.3s ease .3s}
.sk-3d{position:absolute;inset:0}
.sk-dr{position:absolute;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform;transform:rotateY(-122deg);transition:transform 1s cubic-bezier(.4,0,.2,1)}
.alat-sahko:hover .sk-dr,.alat-sahko.run .sk-dr{transform:rotateY(-88deg);transition:transform 1.6s cubic-bezier(.3,.05,.2,1)}
.sk-dr i{position:absolute;top:0;height:100%;background:0 0/100% 100% no-repeat;backface-visibility:hidden}
.sk-dr .sk-in,.sk-dr .sk-out{left:0;width:100%}
.sk-dr .sk-out{transform:rotateY(180deg)}
.sk-dr .sk-de{left:100%;background:#6d8fc6;transform-origin:0 50%;transform:rotateY(90deg);backface-visibility:visible}
.alat-remontti .rk-cab{transform-origin:50% 0;transform:scaleY(var(--s));will-change:transform;transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.alat-remontti .rk-load{transform:translateY(var(--u));will-change:transform;transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.alat-remontti:hover :is(.rk-cab,.rk-load),.alat-remontti.run :is(.rk-cab,.rk-load){transform:none;transition:transform 2.2s cubic-bezier(.35,.1,.25,1)}
.sv-fw{position:absolute;inset:0;overflow:hidden;transform:translateY(var(--e0));will-change:transform}
.alat-siivous .sv-fw img.sv-fs{transform:translateY(calc(-1 * var(--e0)));will-change:transform}
.alat-siivous :is(.sv-fw,.sv-fw img.sv-fs,img.sv-tl){transition:transform 1s cubic-bezier(.4,0,.2,1)}
.alat-siivous img.sv-tl{will-change:transform}
.alat-siivous:is(:hover,.run) .sv-fw{transform:translateY(var(--e1))}
.alat-siivous:is(:hover,.run) .sv-fw img.sv-fs{transform:translateY(calc(-1 * var(--e1)))}
.alat-siivous:is(:hover,.run) img.sv-tl{transform:translateY(var(--d))}
.alat-siivous:is(:hover,.run) :is(.sv-fw,.sv-fw img.sv-fs,img.sv-tl){transition:transform 1.7s cubic-bezier(.45,.05,.3,1)}
.kh-mv{position:absolute;inset:0;transform:translateX(var(--dx));will-change:transform;transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.alat-kiinteistohuolto:is(:hover,.run) .kh-mv{transform:none;transition:transform 2.6s cubic-bezier(.35,.05,.25,1)}
.alat-kiinteistohuolto img.kh-w{transform:rotate(var(--r));will-change:transform;transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.alat-kiinteistohuolto:is(:hover,.run) img.kh-w{transform:rotate(0deg);transition:transform 2.6s cubic-bezier(.35,.05,.25,1)}
.alat-c img.kh-gl{opacity:.4;will-change:opacity}
.alat-kiinteistohuolto:is(:hover,.run) img.kh-gl{animation:kh-b 1.1s ease-in-out infinite}
.kh-sn{position:absolute;left:0;right:0;top:-100%;height:200%;display:flex;flex-direction:column;opacity:0;will-change:transform,opacity;transition:opacity .8s ease;animation:kh-f var(--t) linear infinite paused}
.alat-c .kh-sn img{position:relative;inset:auto;flex:0 0 50%;width:100%;height:50%;object-fit:fill;transition:none}
.alat-kiinteistohuolto:is(:hover,.run) .kh-sn{opacity:1;animation-play-state:running}
@keyframes kh-f{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,50%,0)}}
@keyframes kh-b{0%,100%{opacity:.15}50%{opacity:1}}
.alat-tukku img.tk-stk{will-change:transform,opacity;transition:transform 0s,opacity .6s ease}
.alat-tukku:is(:hover,.run) img.tk-stk{transform:translateX(var(--dx));opacity:0;transition:transform 2.3s cubic-bezier(.45,.05,.35,1) .6s,opacity 0s 2.95s}
.alat-c img.tk-gl{opacity:.35;will-change:opacity}
.alat-tukku:is(:hover,.run) img.tk-gl{animation:tk-scan .75s ease-out forwards}
.tk-belt{position:absolute;overflow:hidden}
.tk-belt::before{content:"";position:absolute;top:0;bottom:0;left:-12px;right:-12px;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(227,237,251,.4) 6px 8px);opacity:0;transition:opacity .4s;animation:tk-b .3s linear infinite paused}
.alat-tukku:is(:hover,.run) .tk-belt::before{opacity:1;animation-play-state:running;transition:opacity .4s .5s}
@keyframes tk-b{to{transform:translateX(8px)}}
@keyframes tk-scan{0%{opacity:.35}18%{opacity:1}36%{opacity:.3}56%{opacity:1}100%{opacity:.3}}
.alat-c img.tp-lt{opacity:.45;will-change:opacity;transition:opacity 1s ease}
.alat-c img.tp-lt2{opacity:0;mix-blend-mode:screen}
.alat-tapahtumat:is(:hover,.run) img.tp-lt{opacity:1;transition:opacity 1.4s ease}
.alat-tapahtumat:is(:hover,.run) img.tp-lt2{opacity:.7}
.alat-c img.tp-gl{opacity:.22;will-change:opacity;transition:opacity 1s ease}
.alat-tapahtumat:is(:hover,.run) img.tp-gl{opacity:1;animation:tp-f 2.2s ease-in-out .9s infinite;transition:opacity 1.1s ease}
.tp-warm{position:absolute;inset:0;background:radial-gradient(38% 34% at 52% 52%,rgba(255,209,138,.16),rgba(255,209,138,0));opacity:0;transition:opacity 1s ease}
.alat-tapahtumat:is(:hover,.run) .tp-warm{opacity:1;transition:opacity 1.6s ease .2s}
@keyframes tp-f{0%,100%{opacity:1}22%{opacity:.82}41%{opacity:.97}63%{opacity:.78}81%{opacity:.94}}
.alat-lvi img.lv-nd{transform:rotate(-135deg);will-change:transform;transition:transform 1.1s cubic-bezier(.4,0,.2,1)}
.alat-lvi:is(:hover,.run) img.lv-nd{transform:rotate(-81deg);transition:transform 1.6s cubic-bezier(.3,.1,.2,1.18)}
.alat-muutot img.mu-k{will-change:transform;transition:transform 1s cubic-bezier(.4,0,.2,1)}
.alat-muutot:is(:hover,.run) img.mu-k{transform:rotate(7deg);transition:transform 1.3s cubic-bezier(.3,.1,.25,1.15)}
.alat-asiantuntijat{container-type:inline-size}
.as-3d{position:absolute;inset:0}
.alat-c img.as-lid{inset:auto;max-width:none;object-fit:fill;will-change:transform;transform:rotateY(var(--y)) rotateX(calc(var(--a) - 30deg));transition:transform 1s cubic-bezier(.4,0,.2,1)}
.alat-asiantuntijat:is(:hover,.run) img.as-lid{transform:rotateY(var(--y)) rotateX(var(--a));transition:transform 1.5s cubic-bezier(.3,.05,.2,1)}
@keyframes kp-a{to{transform:rotate(360deg)}}
@keyframes kp-b{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){.alat-anim :is(.kj-tk,.kj-car){transition:none!important;transform:none!important}.sk-dr,.alat-c img.sk-br,.alat-anim .ly,.sv-fw,.alat-c .sv-fw img,.kh-mv,.alat-c img.kh-w{transition:none!important}.alat-anim :is(.kh-gl,.kh-sn,.tk-gl,.tp-gl),.tk-belt::before{animation:none!important}.alat-anim .kp-g :is(i,img){animation:none!important}}
/* Etusivun kuvat (13.10.2026): Miten se toimii -osion sähköasentaja, Luottamus-osion kättely ja loppukehotuksen yrittäjä,
   jonka puhelimessa on Ainion etusivu. Puhelimessa kahdesta leveästä kuvasta näytetään korkeampi rajaus (oma tiedosto). */
.etu-kuva{margin:0;border-radius:18px;overflow:hidden;background:#141a26;box-shadow:0 18px 40px rgba(13,17,25,.16)}
.etu-kuva img{display:block;width:100%;height:auto;object-fit:cover}
.etu-miten{max-width:1100px;margin:36px auto 0}
.etu-luottamus{max-width:680px;margin:0 auto 44px}
.etu-valmis{max-width:1100px;margin:0 auto 32px}
@media (max-width:700px){
 .etu-kuva{border-radius:14px}.etu-miten{margin-top:26px}.etu-luottamus{margin-bottom:32px}
 .etu-miten img{aspect-ratio:1000/625}.etu-valmis img{aspect-ratio:1000/791}
}
/* Puhelimen ensimmäinen näkymä (omistaja 18.10.2026): video heti esittelytekstin alle, niin että se näkyy kokonaan ilman
   vierittämistä, ja sen alla yksi koko levyinen Pyydä käyttöoikeutta -painike. Katso ominaisuudet -painike ja kirjautumisrivi
   jäävät pois, koska yläpalkissa on Kirjaudu. Järjestyksen voi vaihtaa order-arvoilla. Lohko on tiedoston lopussa, jotta se voittaa
   yläosan aiemmat puhelinsäännöt (esim. väli 32 px). */
@media (max-width:700px){
 .lp-hero{gap:0}
 .lp-hero>div:first-child{display:contents}
 .lp-hero .lp-h1{order:1}
 .lp-hero .lp-lead{order:2}
 .lp-hero>.lp-visual{order:3;margin:22px 0 0;padding-bottom:0}
 .lp-hero .lp-btns{order:4;margin-top:40px}
 .lp-hero .lp-pace{order:5;justify-content:center}
 .lp-hero .lp-btn.ghost,.lp-hero .lp-note,.hv-try{display:none}
 .lp-hero .lp-btn.primary{width:100%;justify-content:center}
 .hv-play{left:16px;bottom:14px;gap:12px;font-size:16px}
 .hv-play i{width:52px;height:52px}
 .hv-play i svg{width:19px;height:19px}
}

/* Meistä-osio */
.meista{padding:90px 0 20px}
.mo-box{background:#fff;border:1px solid #e3ddd1;border-top:4px solid #1d3a66;border-radius:6px;padding:56px 64px 40px;box-shadow:0 10px 30px rgba(40,34,24,.06)}
.mo-head{text-align:center;max-width:720px;margin:0 auto 40px}.mo-head .bn-h{font-size:34px}.mo-head .bn-p{margin:0 auto}
.mo-rule{display:block;width:56px;height:2px;background:#1d3a66;margin:18px auto 18px}
.mo-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e3ddd1;border-bottom:1px solid #e3ddd1}
.mo-c{padding:32px 32px 30px;text-align:center}.mo-c+.mo-c{border-left:1px solid #e3ddd1}
.mo-i{width:48px;height:48px;margin:0 auto 16px;border:1.5px solid #1d3a66;border-radius:50%;display:grid;place-items:center;color:#1d3a66}
.mo-c h3{font-size:19px;color:#151b26;margin:0 0 8px}.mo-c p{margin:0;font-size:15px;color:#5b6474;line-height:1.55}
.mo-sign{text-align:center;margin-top:24px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7f7463}
html.dark .mo-box{background:#141a26;border-color:#253047;border-top-color:#9dc0f2;box-shadow:none}
html.dark .mo-rule{background:#9dc0f2}html.dark .mo-grid,html.dark .mo-c+.mo-c{border-color:#253047}
html.dark .mo-i{border-color:#9dc0f2;color:#9dc0f2}html.dark .mo-c h3{color:#f4f6fa}html.dark .mo-c p{color:#aab4c5}html.dark .mo-sign{color:#7f8aa0}
@media (max-width:760px){.meista{padding:56px 0 10px}.mo-box{padding:32px 20px 26px}.mo-head{margin-bottom:24px}.mo-head .bn-h{font-size:26px}.mo-grid{grid-template-columns:1fr}.mo-c{padding:24px 8px}.mo-c+.mo-c{border-left:0;border-top:1px solid #e3ddd1}html.dark .mo-c+.mo-c{border-color:#253047}}
/* Ruudun ulkopuolella olevan osion jatkuvat animaatiot odottavat (landing-boot.js, mittaus 19.10.2026). */
.anim-off,.anim-off *{animation-play-state:paused!important}
/* Kielinappi yläpalkissa (ainio.fi, ainio.fi/sv ja ainio.fi/en: scripts/site-lang.mjs). Valikko aukeaa kuten Toimialat-valikko
   (landing-boot.js), ja valinta muistetaan. Puhelimessa näkyy pelkkä kielen lyhenne pyöreässä napissa. */
.lg{position:relative;display:inline-flex}
.lg-b{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font:inherit;font-size:14px;font-weight:600;letter-spacing:.02em;cursor:pointer}
.lg-b:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.lg-b:focus-visible{outline:2px solid #9dc0f2;outline-offset:3px}
.lg-p{display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:60;min-width:190px;background:#fff;border:1px solid #dbe2ec;border-radius:14px;padding:8px;box-shadow:0 12px 32px rgba(20,24,32,.18)}
.lg.open .lg-p{display:block}
.lg-i{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:9px;color:#1a1f26;font-size:15px;font-weight:500;text-decoration:none}
.lg-i:hover{background:#eef3fa}
.lg-i:focus-visible{outline:2px solid #2f5fa8;outline-offset:1px}
.lg-i.cur{background:#e3ebfa;color:#2f5fa8;font-weight:700}
.lg-i.cur::after{content:'';width:11px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
html.dark .lg-p{background:#1a222e;border-color:rgba(255,255,255,.1)}
html.dark .lg-i{color:#f4f6fa}
html.dark .lg-i:hover{background:rgba(255,255,255,.06)}
html.dark .lg-i.cur{background:rgba(111,160,224,.16);color:#9dc0f2}
/* Englanninkielisen laitteen ehdotus suomenkielisellä etusivulla (landing-boot.js): pieni kupla kielinapin alla. */
.lg-hint{position:absolute;top:calc(100% + 10px);right:0;z-index:59;display:flex;align-items:center;gap:4px;white-space:nowrap;background:#fff;color:#1a1f26;border:1px solid #dbe2ec;border-radius:12px;padding:5px 5px 5px 14px;font-size:14px;font-weight:600;box-shadow:0 12px 32px rgba(20,24,32,.22)}
.lg-hint a{color:#2f5fa8;text-decoration:none}
.lg-hint a:hover{text-decoration:underline}
.lg-hint button{border:0;background:none;color:#6b7686;width:30px;height:30px;border-radius:8px;cursor:pointer;font:inherit;font-size:15px;line-height:1}
.lg-hint button:hover{background:#eef3fa}
.lg.open .lg-hint{display:none}
html.dark .lg-hint{background:#1a222e;color:#f4f6fa;border-color:rgba(255,255,255,.1)}
html.dark .lg-hint a{color:#9dc0f2}
html.dark .lg-hint button{color:#98a3ba}
html.dark .lg-hint button:hover{background:rgba(255,255,255,.06)}
@media (max-width:1320px){.lp-lg-x{display:none}}
@media (max-width:560px){.lp-nav .lg{position:static}.lp-nav .lg-b{width:38px;height:38px;padding:0;justify-content:center;font-size:13px}.lp-nav .lg-g,.lp-nav .lg-c{display:none}
 .lp-nav .lg-p,.lp-nav .lg-hint{left:16px;right:16px;top:calc(100% + 8px);min-width:0}.lp-nav .lg-hint{left:auto}}
@media (max-width:380px){.lp-nav .lg-b{width:34px;height:34px}}
/* Kapealla tietokoneen näytöllä kielinappi on pelkkä lyhenne, jotta valikon linkit mahtuvat yhdelle riville. */
.lp-links>a{white-space:nowrap}
@media (max-width:1100px) and (min-width:561px){.lg-b{width:40px;padding:0;justify-content:center}.lg-g,.lg-c{display:none}}
.lp-cta{white-space:nowrap}
@media (max-width:1100px) and (min-width:981px){.lp-links{gap:16px;font-size:14.5px}.lp-nav .lp-actions{gap:10px}.lp-cta{padding:11px 18px}}