*{box-sizing:border-box} html{scroll-behavior:smooth;background:#06182f} body{margin:0;overflow-x:hidden;font-family:Inter,Segoe UI,Arial,sans-serif;background:#06182f;color:#0b2343}
.site-theme{position:relative;width:100%;height:150vw;min-height:100vh;margin:0;overflow:hidden;background:#06182f}
.theme-image{position:absolute;inset:0;background-image:url('assets/site-theme-hd.jpg');background-position:top center;background-size:100% auto;background-repeat:no-repeat;pointer-events:none;user-select:none;image-rendering:auto}
html[data-lang="fi"] .theme-image{background-image:url('assets/site-theme-fi-hd.jpg')}
.hot{position:absolute;z-index:10;display:block;border:0;background:transparent;cursor:pointer;padding:0;margin:0;text-decoration:none;border-radius:.45vw}.hot:focus-visible{outline:.2vw solid #95d520;outline-offset:.15vw;background:rgba(149,213,32,.12)}.hot:hover{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 .09vw rgba(255,255,255,.18)}
.anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}.anchor-services{top:30.2%}.anchor-drone{top:47.2%}.anchor-music{top:31%}.anchor-about{top:65%}.anchor-charity{top:84%}
.nav-home{left:30.5%;top:1.25%;width:5.1%;height:2.1%}.nav-services{left:36.8%;top:1.25%;width:7.7%;height:2.1%}.nav-projects{left:46.5%;top:1.25%;width:7.5%;height:2.1%}.nav-about{left:55%;top:1.25%;width:7.2%;height:2.1%}.nav-charity{left:63.3%;top:1.25%;width:6.7%;height:2.1%}.nav-contact{left:70.5%;top:1.25%;width:7%;height:2.1%}.lang-en{left:86.1%;top:1.15%;width:5.5%;height:2.3%}.lang-fi{left:92%;top:1.15%;width:5%;height:2.3%}
.hero-learn{left:2.6%;top:26.4%;width:13.5%;height:2.9%}.quick-software{left:78.8%;top:6.4%;width:19.2%;height:5.9%}.quick-music{left:78.8%;top:12.8%;width:19.2%;height:5.9%}.quick-drone{left:78.8%;top:19.2%;width:19.2%;height:5.9%}
.card-software{left:2.5%;top:31%;width:18%;height:15.3%}.card-wordpress{left:21.6%;top:31%;width:17.3%;height:15.3%}.card-music{left:39.8%;top:31%;width:17.4%;height:15.3%}.card-computer{left:58.2%;top:31%;width:17.4%;height:15.3%}.card-drone{left:76.8%;top:31%;width:20.8%;height:15.3%}
.g1{left:2.4%;top:76.4%;width:17.5%;height:7.2%}.g2{left:20.4%;top:76.4%;width:17.6%;height:7.2%}.g3{left:38.4%;top:76.4%;width:20%;height:7.2%}.g4{left:58.8%;top:76.4%;width:20.6%;height:7.2%}.g5{left:79.8%;top:76.4%;width:17.7%;height:7.2%}.contact-cta{left:8.1%;top:91.4%;width:9.4%;height:2.2%}
/* Service grouping keeps the existing five cards unchanged while clearly separating international and local work. */
.service-group-label{position:absolute;z-index:16;top:29.73%;height:1.05%;display:flex;align-items:center;justify-content:center;gap:.55vw;color:#0b2343;pointer-events:none;white-space:nowrap}.service-group-label strong{font-size:.70vw;letter-spacing:.055em}.service-group-label span{font-size:.53vw;color:#53657c}.international-group{left:2.5%;width:54.7%}.local-group{left:58.2%;width:39.4%}

/* Small homepage promotion for the BackgroundImages.online collection. */
.background-promo{position:absolute;z-index:17;left:58.4%;top:26.86%;width:18.7%;height:2.15%;padding:.34vw .72vw;border:1px solid rgba(255,255,255,.32);border-radius:.5vw;background:linear-gradient(135deg,rgba(4,35,71,.92),rgba(10,81,145,.88));box-shadow:0 .35vw 1.1vw rgba(0,24,54,.24);color:#fff;text-decoration:none;display:grid;align-content:center;line-height:1.05;backdrop-filter:blur(8px);transition:transform .18s ease,box-shadow .18s ease}.background-promo:hover{transform:translateY(-.08vw);box-shadow:0 .5vw 1.35vw rgba(0,24,54,.30)}.background-promo .bgp-kicker{font-size:.48vw;letter-spacing:.08em;color:#9bd729;font-weight:900}.background-promo strong{font-size:.76vw;margin:.06vw 0}.background-promo small{font-size:.49vw;color:#e6f1fb}

/* Projects dropdown: AutoStore is highlighted as the current flagship product. */
.projects-menu{position:fixed;z-index:100;top:4.2vw;left:45vw;display:none;min-width:310px;background:rgba(4,25,52,.98);border:1px solid rgba(255,255,255,.22);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:10px;backdrop-filter:blur(12px)}.projects-menu.open{display:grid}.projects-menu a{color:white;text-decoration:none;padding:10px 12px;border-radius:8px;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.projects-menu a:hover{background:#0d58b6}.projects-menu .flagship{background:linear-gradient(90deg,rgba(13,88,182,.55),rgba(87,146,28,.28));border:1px solid rgba(149,213,32,.38);font-weight:800}.projects-menu .flagship em{font-style:normal;font-size:9px;letter-spacing:.08em;background:#78b926;color:#fff;padding:4px 6px;border-radius:999px;white-space:nowrap}.projects-menu .background-link{color:#bfe67a;border-top:1px solid rgba(255,255,255,.10);margin-top:4px}

/* Only masks the old heading baked into the image; the real HTML form remains unchanged. */
.contact-heading-mask{position:absolute;z-index:29;left:44.2%;top:84.08%;width:27.65%;height:1.1%;background:linear-gradient(90deg,#f8fbfe 0%,#f9fbfd 70%,rgba(249,251,253,.98) 100%);pointer-events:none}

.services-menu{position:fixed;z-index:100;top:4.2vw;left:36vw;display:none;min-width:270px;background:rgba(4,25,52,.97);border:1px solid rgba(255,255,255,.22);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:10px;backdrop-filter:blur(12px)}.services-menu.open{display:grid}.services-menu a{color:white;text-decoration:none;padding:10px 12px;border-radius:8px;font-size:14px}.services-menu a:hover{background:#0d58b6}.lang-status{position:fixed;z-index:101;right:20px;top:18px;pointer-events:none;color:#fff;background:rgba(4,25,52,.92);border-radius:999px;padding:8px 12px;font-weight:700;font-size:12px;opacity:0;transform:translateY(-8px);transition:.2s}.lang-status.show{opacity:1;transform:none}
/* compliance notice: deliberately separate from the background so it stays readable and editable */
.uav-status{position:absolute;z-index:18;left:51%;top:66.15%;width:46%;padding:.34vw .72vw;border:1px solid rgba(13,88,182,.16);border-radius:.48vw;background:rgba(247,251,255,.97);box-shadow:0 .22vw .7vw rgba(4,31,67,.07);display:grid;gap:.07vw;font-size:.56vw;line-height:1.16}.uav-status strong{color:#0b4e9f;font-size:.63vw}.uav-status span{font-weight:700}.uav-status small{font-size:.53vw;color:#41602c}

/* Real OpenStreetMap view replaces the soft map baked into the background image. */
.map-overlay{position:absolute;z-index:32;left:25.45%;top:84.45%;width:18.55%;height:10.55%;background:#fff;border-radius:.45vw;overflow:hidden;box-shadow:0 .25vw .9vw rgba(6,42,82,.10);border:.06vw solid rgba(13,88,182,.12)}
.map-overlay iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.92) contrast(1.03)}
.map-coordinates{position:absolute;left:.45vw;right:.45vw;bottom:.4vw;display:flex;justify-content:space-between;align-items:center;gap:.45vw;padding:.34vw .5vw;border-radius:.3vw;background:rgba(5,38,78,.90);color:#fff;font-size:.58vw;line-height:1.1;box-shadow:0 .12vw .45vw rgba(0,0,0,.18);pointer-events:none}
.map-coordinates strong{font-size:.64vw}.map-coordinates span{white-space:nowrap;font-variant-numeric:tabular-nums}

/* One real form only: opaque panel masks the form that exists in the reference background. */
.contact-overlay{position:absolute;z-index:30;left:44.25%;top:84.7%;width:27.5%;height:10.6%;padding:.45vw}.contact-panel{position:relative;width:100%;height:100%;background:rgba(255,255,255,.97);border-radius:.45vw;padding:.65vw .7vw;box-shadow:0 .3vw 1.2vw rgba(6,42,82,.10)}.contact-panel h3{margin:0 0 .55vw;color:#0b2343;font-size:.82vw;line-height:1.1}.contact-overlay form{width:100%;display:flex;flex-direction:column;gap:.42vw}.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:.48vw}.contact-overlay input,.contact-overlay textarea{width:100%;border:.07vw solid #cfd9e7;border-radius:.28vw;background:#fff;color:#071a33;font:inherit;font-size:.68vw;padding:.42vw .55vw;outline:none}.contact-overlay input::placeholder,.contact-overlay textarea::placeholder{color:#7b8798}.contact-overlay input:focus,.contact-overlay textarea:focus{border-color:#0d58b6;box-shadow:0 0 0 .1vw rgba(13,88,182,.14)}.contact-overlay textarea{resize:none;height:2.85vw}.contact-overlay button{align-self:flex-start;border:0;border-radius:.28vw;background:#0b4e9f;color:#fff;font-weight:800;font-size:.67vw;padding:.52vw .86vw;cursor:pointer}.contact-overlay button:hover{background:#0d63c8}.form-note{position:absolute;left:.7vw;bottom:.25vw;font-size:.58vw;font-weight:700;padding:.25vw .45vw;border-radius:.25vw}.success{background:#dff4d0;color:#2e6817}.error{background:#ffe2e2;color:#8d1e1e}

/* Editable contact information: masks the old contact text baked into the background image. */
.contact-info-overlay{position:absolute;z-index:31;left:71.55%;top:84.2%;width:26.1%;height:11.15%;background:rgba(255,255,255,.985);border-radius:.35vw;padding:.75vw 1vw .55vw;color:#0b2343;box-shadow:0 .25vw .9vw rgba(6,42,82,.06);font-size:.76vw;line-height:1.3}
.contact-info-overlay h3{margin:0 0 .62vw;font-size:.88vw;line-height:1.1;color:#0b2343}.contact-info-line{display:flex;align-items:center;gap:.65vw;margin:.42vw 0;white-space:nowrap}.contact-info-line .ci-icon{width:1.15vw;text-align:center;color:#0d58b6;font-weight:900;font-size:1.05vw}.contact-info-overlay a{color:#0b2343;text-decoration:none}.contact-info-overlay a:hover{color:#0d58b6;text-decoration:underline}

/* crisp HTML footer completely covers the blurry footer baked into the reference image */
.real-footer{position:absolute;z-index:40;left:0;right:0;bottom:0;height:4.2%;min-height:72px;background:linear-gradient(90deg,#06182f,#073665);color:#dbe7f4;display:grid;grid-template-columns:1.6fr .8fr 1.25fr 1.45fr .8fr;gap:2vw;align-items:start;padding:1vw 2.4vw .8vw;border-top:1px solid rgba(255,255,255,.09);font-size:.62vw;line-height:1.28}.real-footer b,.real-footer strong{color:#fff;font-size:.68vw}.real-footer>div{display:flex;flex-direction:column;gap:.12vw}.real-footer a{color:#dbe7f4;text-decoration:none}.real-footer a:hover{color:#95d520}.footer-brand strong{font-size:.92vw;line-height:.9;margin-bottom:.32vw}.footer-brand span{max-width:20vw}.footer-social{align-items:flex-start}.social-row{display:flex;gap:.55vw;margin-top:.35vw}.social-row a{width:1.75vw;height:1.75vw;min-width:24px;min-height:24px;border-radius:.35vw;display:grid;place-items:center;background:#1465c0;color:white!important;font-size:1vw;font-weight:900}.social-row .yt{background:#e11;color:#fff!important}
.lightbox{position:fixed;z-index:500;inset:0;background:rgba(0,19,42,.78);display:grid;place-items:center;backdrop-filter:blur(5px)}.lightbox[hidden]{display:none}.lightbox-card{background:white;color:#0b2343;padding:35px 45px;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);text-align:center;max-width:90vw}.lightbox-card strong{font-size:26px}.lightbox-close{position:fixed;right:25px;top:20px;border:0;background:transparent;color:white;font-size:46px;cursor:pointer}
@media(max-width:760px){.site-theme{height:150vw;min-height:0}.services-menu,.projects-menu{top:48px;left:8px;right:8px;min-width:0}.service-group-label,.background-promo{display:none}.map-overlay,.contact-overlay,.contact-info-overlay,.uav-status{display:none}.real-footer{height:auto;min-height:64px;padding:8px 10px;grid-template-columns:1.3fr 1fr 1fr;font-size:7px}.real-footer b,.real-footer strong{font-size:7px}.footer-brand strong{font-size:9px}.real-footer>div:nth-child(4){display:none}.social-row a{font-size:12px}.hot{border-radius:3px}}

/* V10 — Website Design & Development expansion. Existing themed page remains unchanged above. */
.website-design-section{position:relative;z-index:60;margin-top:-6.35vw;background:
  radial-gradient(circle at 82% 18%,rgba(31,112,205,.22),transparent 31%),
  radial-gradient(circle at 13% 72%,rgba(116,185,40,.12),transparent 26%),
  linear-gradient(135deg,#06182f 0%,#082b53 48%,#0b4a7e 100%);color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.10);box-shadow:0 -1.2vw 3vw rgba(1,20,42,.24)}
.website-design-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 86%);pointer-events:none}
.wd-shell{position:relative;z-index:2;width:min(1480px,92vw);margin:auto;padding:5.7vw 0 5.2vw;display:grid;grid-template-columns:1.02fr .98fr;gap:5vw;align-items:center}
.wd-kicker{display:inline-flex;align-items:center;gap:.55rem;color:#a9d94d;font-size:clamp(11px,.72vw,15px);font-weight:900;letter-spacing:.13em;margin-bottom:.75vw}.wd-kicker:before{content:"";width:1.9rem;height:2px;background:#92cc2a;box-shadow:0 0 14px rgba(146,204,42,.5)}
.wd-copy h2{margin:0 0 1vw;font-size:clamp(34px,3.25vw,64px);line-height:.98;letter-spacing:-.035em}.wd-copy p{max-width:760px;color:#d6e4f3;font-size:clamp(14px,.9vw,18px);line-height:1.62;margin:.7vw 0}.wd-copy .wd-lead{font-size:clamp(17px,1.16vw,23px);font-weight:700;color:#fff;line-height:1.42}
.wd-features{display:grid;grid-template-columns:1fr 1fr;gap:.75vw;margin:1.65vw 0}.wd-features>div{min-height:5.2vw;border:1px solid rgba(255,255,255,.13);border-radius:.75vw;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));padding:1vw 1.05vw;box-shadow:inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(10px)}.wd-features b{display:block;color:#fff;font-size:clamp(11px,.71vw,14px);letter-spacing:.055em;margin-bottom:.38vw}.wd-features span{color:#bfd0e2;font-size:clamp(11px,.72vw,14px);line-height:1.45}
.wd-price-card{margin-top:1.3vw;border-radius:.9vw;background:#fff;color:#0b2343;padding:1vw 1.1vw 1vw 1.25vw;display:flex;justify-content:space-between;align-items:center;gap:1.2vw;box-shadow:0 1.1vw 3vw rgba(0,12,30,.22)}.wd-price-card>div{display:grid;gap:.14vw}.wd-price-card span{font-size:clamp(10px,.62vw,12px);color:#5a8f20;font-weight:900;letter-spacing:.1em}.wd-price-card strong{font-size:clamp(17px,1.18vw,23px)}.wd-price-card small{color:#63748a;font-size:clamp(11px,.68vw,13px)}.wd-cta{flex:none;text-decoration:none;background:linear-gradient(135deg,#0d63c8,#08458f);color:#fff;padding:.86vw 1.2vw;border-radius:.55vw;font-size:clamp(11px,.72vw,14px);font-weight:900;box-shadow:0 .45vw 1vw rgba(13,99,200,.24);transition:.2s}.wd-cta:hover{transform:translateY(-2px);box-shadow:0 .7vw 1.35vw rgba(13,99,200,.34)}
.wd-visual{position:relative}.browser-frame{border-radius:1vw;background:#eef4fa;padding:.58vw;box-shadow:0 2vw 5vw rgba(0,8,24,.42),0 0 0 1px rgba(255,255,255,.25);transform:perspective(1200px) rotateY(-4deg) rotateX(1deg);transform-origin:center}.browser-top{height:2.1vw;min-height:31px;display:flex;align-items:center;gap:.42vw;padding:0 .55vw;color:#5f7186;font-size:clamp(9px,.55vw,11px)}.browser-top i{width:.55vw;height:.55vw;min-width:8px;min-height:8px;border-radius:50%;background:#95a5b5}.browser-top span{margin-left:.45vw;background:#fff;border:1px solid #dae4ee;border-radius:999px;padding:.28vw .7vw;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browser-preview{position:relative;height:25vw;min-height:330px;border-radius:.65vw;overflow:hidden;background-image:url('assets/site-theme-hd.jpg');background-size:cover;background-position:top center}.preview-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,19,40,.88),rgba(2,24,49,.25) 62%,rgba(2,24,49,.08))}.preview-copy{position:absolute;left:7%;top:24%;width:58%;display:grid;gap:.55vw;text-shadow:0 .2vw .8vw rgba(0,0,0,.28)}.preview-copy small{color:#a7d93e;font-weight:900;letter-spacing:.12em;font-size:clamp(10px,.62vw,13px)}.preview-copy strong{font-size:clamp(25px,2.15vw,44px);line-height:1.02;color:#fff}.preview-copy span{font-size:clamp(11px,.76vw,15px);color:#e5f0f9}
.wd-industry-grid{position:relative;margin-top:1.15vw;display:grid;grid-template-columns:repeat(4,1fr);gap:.55vw}.wd-industry-grid span{display:flex;align-items:center;justify-content:center;gap:.4vw;min-height:3.2vw;border:1px solid rgba(255,255,255,.12);border-radius:.58vw;background:rgba(255,255,255,.075);color:#eaf3fc;font-size:clamp(10px,.67vw,13px);backdrop-filter:blur(8px)}.wd-industry-grid b{font-weight:800}
.final-footer{position:relative;z-index:61;background:linear-gradient(90deg,#04152a,#073665);color:#dbe7f4;display:grid;grid-template-columns:1.45fr .9fr 1.25fr 1.05fr .65fr;gap:2vw;align-items:start;padding:1.4vw 3vw 2.2vw;border-top:1px solid rgba(255,255,255,.10);font-size:clamp(10px,.62vw,12px);line-height:1.35}.final-footer b,.final-footer strong{color:#fff}.final-footer>div{display:flex;flex-direction:column;gap:.18vw}.final-footer a{color:#dbe7f4;text-decoration:none}.final-footer a:hover{color:#95d520}.final-footer .footer-brand strong{font-size:clamp(15px,.92vw,19px);line-height:.92;margin-bottom:.35vw}.final-footer .social-row{display:flex;flex-direction:row;gap:.5vw}.final-footer .social-row a{width:1.8vw;height:1.8vw;min-width:28px;min-height:28px;border-radius:.35vw;display:grid;place-items:center;background:#1465c0;color:#fff;font-size:clamp(12px,1vw,18px);font-weight:900}.final-footer .social-row .yt{background:#e11}.final-copyright{position:absolute;left:50%;bottom:.55vw;transform:translateX(-50%);width:max-content;max-width:90%;text-align:center;color:#9eb4ca;font-size:clamp(9px,.55vw,11px)}
@media(max-width:900px){.website-design-section{margin-top:-64px}.wd-shell{width:min(94vw,760px);padding:70px 0 55px;grid-template-columns:1fr;gap:42px}.wd-features{gap:10px}.wd-features>div{min-height:92px;padding:16px;border-radius:12px}.wd-price-card{padding:16px;border-radius:12px}.wd-cta{padding:13px 16px;border-radius:8px}.browser-frame{padding:7px;border-radius:14px;transform:none}.browser-top{height:34px;padding:0 8px;gap:6px}.browser-preview{height:52vw;min-height:300px;border-radius:10px}.wd-industry-grid{gap:8px;margin-top:12px}.wd-industry-grid span{min-height:46px;border-radius:8px}.final-footer{grid-template-columns:1fr 1fr 1fr;padding:22px 18px 35px;gap:18px;font-size:10px}.final-footer>div:nth-child(4){display:none}.final-copyright{bottom:9px;font-size:9px}}
@media(max-width:560px){.wd-features{grid-template-columns:1fr}.wd-price-card{align-items:flex-start;flex-direction:column}.wd-cta{width:100%;text-align:center}.wd-industry-grid{grid-template-columns:1fr 1fr}.browser-preview{height:66vw;min-height:270px}.preview-copy{width:78%}.final-footer{grid-template-columns:1fr 1fr}.final-footer .footer-brand{grid-column:1/-1}.final-footer>div:nth-child(3){display:none}}