:root{
  --ink:#06080C; --panel:#0C1119; --panel2:#111826;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --text:#E9EEF6; --muted:#9AA7BC; --dim:#6B7A92;
  --ice:#9CC8EE; --blue:#5E86C6;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 17px/1.66 "Space Grotesk",-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; line-height:1.08; letter-spacing:-.035em; font-weight:500}
h1{font-size:clamp(44px,8.2vw,96px); letter-spacing:-.052em}
h2{font-size:clamp(31px,4.6vw,52px); letter-spacing:-.042em}
h3{font-size:19px; letter-spacing:-.018em; font-weight:600}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}

/* hienovarainen rakeisuus — poistaa litteän digitaalisen tunnun */
.grain{position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- kiinteä ylätunniste ---------- */
.bar{position:fixed; inset:0 0 auto 0; height:76px; z-index:60; pointer-events:none}
.bar .plate{position:absolute; inset:0; background:rgba(6,8,12,.55); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.07); opacity:var(--barO,0); transition:opacity .35s}
.bar .brand{display:flex; align-items:center; gap:11px; pointer-events:auto; text-decoration:none}
.bar .brand svg{width:26px; height:26px; color:#fff; flex:none}
.bar .brand span{font-family:"Space Grotesk",sans-serif; font-weight:300; font-size:16px;
  letter-spacing:.01em; color:#fff; white-space:nowrap}
.bar .brand span b{font-weight:700}
@media(max-width:760px){.bar .brand span{display:none}}
.bar .bg{position:absolute; inset:0; background:rgba(6,8,12,.74); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line); opacity:0}
.bar .inner{position:relative; max-width:var(--max); margin:0 auto; padding:0 28px;
  height:100%; display:flex; align-items:center}
.nav{margin-left:auto; display:flex; align-items:center; gap:26px; font-size:14.5px;
  color:rgba(233,238,246,.72); pointer-events:auto}
@media(max-width:1000px){.nav a:not(.lang){display:none}}
.nav a{text-decoration:none; position:relative}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px;
  background:var(--ice); transition:right .3s cubic-bezier(.2,.7,.2,1)}
.nav a:hover{color:var(--text)}
.nav .lang{border:1px solid var(--line2); padding:5px 11px; border-radius:7px;
  font-size:12.5px; letter-spacing:.1em; color:var(--text)}
.nav .lang:hover{background:rgba(255,255,255,.08)}
.nav .lang::after{display:none}
.nav a:hover::after{right:0}
@media(max-width:820px){.nav{display:none}}

/* ---------- hero ---------- */
/* ---------- tausta koko sivulle ----------
   Kuva on kiinteä ja kaikkien osioiden takana, joten se jatkuu
   keskeytyksettä läpi sivun. Sumennus kasvaa vieritettäessä: alussa
   maisema on terävä, sen jälkeen se vetäytyy tekstin taustaksi.
   Pieni ylisuuruus estää sumennuksen vaalean reunan. */
.scene{position:fixed; inset:-80px; z-index:-3; pointer-events:none;
  filter:blur(var(--bgblur,0px)); transform:scale(calc(1.06 + var(--bgzoom,0)));
  transition:none; will-change:filter,transform}
/* Kuvan kiinnostava osa on alalaidassa, joten rajaus siirretään sinne —
   muuten herossa näkyy pelkkää mustaa. */
.scene img{width:100%; height:100%; object-fit:cover; object-position:50% 100%; display:block}
.bgtint{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 86% at 50% 36%, rgba(6,8,12,.05), rgba(6,8,12,.42) 58%, rgba(6,8,12,.72)),
    linear-gradient(180deg, rgba(6,8,12,.34), rgba(6,8,12,.10) 34%, rgba(6,8,12,.52));
  opacity:calc(.26 + var(--tint,0) * .40)}

/* ---------- hero ---------- */
.hero{height:100vh; position:relative}
.stage{position:sticky; top:0; height:100vh; display:flex;
  align-items:center; justify-content:center; overflow:hidden}
.lock{text-align:center; padding:0 26px; max-width:860px;
  opacity:var(--heroO,1); transform:translateY(var(--heroY,0px));
  will-change:opacity,transform}
.lock .mark{display:block; width:clamp(84px,11vw,124px); height:auto; margin:0 auto 26px;
  color:#fff; filter:drop-shadow(0 14px 44px rgba(0,0,0,.55))}
.lock .name{font-family:"Space Grotesk",sans-serif; font-weight:300;
  font-size:clamp(30px,5.6vw,62px); letter-spacing:.015em; color:#fff; line-height:1}
.lock .name b{font-weight:700}
.lock .kick{margin-top:14px; font-size:clamp(11px,1.2vw,13.5px); font-weight:500;
  letter-spacing:.44em; text-indent:.44em; color:rgba(233,238,246,.62); text-transform:uppercase}
.lock .punch{margin-top:clamp(26px,4vh,44px); font-family:"Space Grotesk",sans-serif;
  font-weight:500; font-size:clamp(24px,3.6vw,42px); letter-spacing:-.03em; color:#fff}
.lock .sub{margin:16px auto 0; max-width:50ch; font-size:clamp(15px,1.7vw,18px);
  line-height:1.6; color:rgba(233,238,246,.74)}
.lock .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:clamp(26px,4vh,38px)}
@media(prefers-reduced-motion:reduce){.scene{transition:none}}
.cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; pointer-events:auto}
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:100px;
  font:500 15.5px "Space Grotesk",sans-serif; text-decoration:none; border:1px solid transparent;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), background .22s, border-color .22s, box-shadow .22s}
.btn-p{background:var(--text); color:#0A0D13}
.btn-p:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(156,200,238,.22)}
.btn-s{border-color:var(--line2); color:var(--text)}
.btn-s:hover{background:rgba(255,255,255,.06); transform:translateY(-2px)}

/* ---------- osiot ---------- */
/* Ei paneeleita osioiden päälle. Maisema jatkuu näkyvissä, ja teksti
   erottuu sumennuksen ja yhden yhtenäisen verhon ansiosta. */
main{position:relative}
/* Verho alkaa heron alta ja syvenee pehmeästi — ei yhtään suoraa reunaa. */
main::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg,
    rgba(8,11,16,0) 0%,
    rgba(8,11,16,.34) 7%,
    rgba(8,11,16,.52) 22%,
    rgba(8,11,16,.58) 50%,
    rgba(8,11,16,.52) 78%,
    rgba(8,11,16,.40) 100%)}
footer{position:relative}
footer::before{content:""; position:absolute; inset:-120px 0 0; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(8,11,16,0), rgba(8,11,16,.55) 55%, rgba(8,11,16,.72))}
section{padding:clamp(80px,10vw,132px) 0; position:relative}
section::before{content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 22%,rgba(255,255,255,.14) 78%,transparent)}
.head{max-width:62ch; margin-bottom:clamp(46px,6vw,70px); display:grid; gap:20px}
.head p{color:var(--muted)}
.lbl{font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ice)}
.rise{opacity:0; transform:translateY(32px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1)}
.rise.on{opacity:1; transform:none}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s}
.step{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:32px 28px;
  transition:border-color .3s, transform .3s cubic-bezier(.2,.7,.2,1)}
.step:hover{border-color:var(--line2); transform:translateY(-3px)}
.step::before{counter-increment:s; content:"0" counter(s); font-size:12px; font-weight:700;
  letter-spacing:.12em; color:var(--ice); display:block; margin-bottom:18px}
.step p{font-size:14.8px; color:var(--muted); margin-top:11px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feat{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:20px; padding:30px 26px; transition:border-color .3s, transform .3s cubic-bezier(.2,.7,.2,1)}
.feat:hover{border-color:var(--line2); transform:translateY(-3px)}
.feat svg{width:23px; height:23px; stroke:var(--ice); fill:none; stroke-width:1.5; margin-bottom:18px}
.feat p{font-size:14.6px; color:var(--muted); margin-top:10px}
@media(max-width:920px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.feats{grid-template-columns:1fr}}

.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,52px)}
.col{border-top:1px solid var(--line2); padding-top:24px}
.col p{color:var(--muted); font-size:15.2px; margin-top:12px}
@media(max-width:860px){.cols{grid-template-columns:1fr}}

/* ---------- generoidut kuvat ----------
   Kuvat on piirretty koodilla samassa paletissa kuin sivu (tools/taide.html).
   Siksi ne saavat sulautua taustaan reunoistaan: kova reuna paljastaisi ne
   päälle liimatuiksi, pehmeä reuna tekee niistä osan sivua. */
.strip{position:relative; margin:clamp(64px,10vw,140px) 0; overflow:hidden; line-height:0}
.strip .sana{position:absolute; inset:0; z-index:2; line-height:1.2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 26px; text-align:center;
  background:radial-gradient(62% 72% at 50% 50%, rgba(8,11,16,.78), rgba(8,11,16,.42) 62%, rgba(8,11,16,.10))}
.strip .sana h2{font-size:clamp(26px,4.2vw,50px); letter-spacing:-.035em; color:#fff;
  margin:0 auto; max-width:18ch; text-shadow:0 2px 30px rgba(0,0,0,.6)}
.strip .sana p{margin:14px auto 0; max-width:46ch; font-size:clamp(14.5px,1.6vw,17px);
  line-height:1.6; color:rgba(233,238,246,.80)}
.strip img{width:100%; height:clamp(460px,62vw,860px); object-fit:cover; display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}


.col .shot{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  margin-bottom:20px; opacity:.94; transition:opacity .5s, transform .5s}
.col:hover .shot{opacity:1; transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.col .shot{transition:none}}

.prices.one{grid-template-columns:minmax(0,560px); justify-content:center}
.prices{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.price{background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:38px 34px; position:relative}
.price.hl{border-color:rgba(156,200,238,.38); background:linear-gradient(180deg,rgba(94,134,198,.11),var(--panel))}
.tag{position:absolute; top:-12px; left:34px; background:var(--ice); color:#0A0D13;
  font:700 11px/1 "Space Grotesk"; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px}
.amount{font-size:46px; font-weight:500; letter-spacing:-.05em; margin:18px 0 6px}
.amount small{font-size:16px; font-weight:400; color:var(--muted); letter-spacing:0}
.price > p{font-size:14.6px; color:var(--muted)}
.price ul{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:13px}
.price li{display:flex; gap:13px; font-size:15px; color:var(--muted); align-items:flex-start}
.price li::before{content:""; width:7px; height:7px; margin-top:8px; flex:0 0 auto;
  background:var(--ice); transform:rotate(45deg); opacity:.85}
.note{margin-top:28px; padding-top:22px; border-top:1px solid var(--line); font-size:14px; color:var(--dim)}
.foot-note{margin-top:30px; font-size:14px; color:var(--dim); max-width:70ch}
@media(max-width:840px){.prices.one{grid-template-columns:minmax(0,560px); justify-content:center}
.prices{grid-template-columns:1fr}}

details{border-bottom:1px solid var(--line); padding:25px 0}
summary{cursor:pointer; font-size:18px; font-weight:500; letter-spacing:-.018em; list-style:none;
  display:flex; justify-content:space-between; gap:22px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--ice); font-size:24px; font-weight:300; flex:0 0 auto}
details[open] summary::after{content:"–"}
details p{margin-top:15px; color:var(--muted); font-size:15.5px; max-width:80ch}

.final{background:linear-gradient(140deg,rgba(94,134,198,.15),rgba(156,200,238,.06));
  border:1px solid var(--line2); border-radius:28px; padding:clamp(46px,7vw,76px);
  text-align:center; display:grid; gap:22px; justify-items:center}
.final p{max-width:54ch; color:var(--muted)}
/* ---------- yhteydenottolomake ---------- */
.yht{width:100%; max-width:560px; display:grid; gap:16px; text-align:left}
.yht .parit{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){.yht .parit{grid-template-columns:1fr}}
.yht label{display:grid; gap:7px; font-size:13.5px; font-weight:500; color:var(--muted)}
.yht input,.yht textarea{
  font:400 15.5px/1.5 inherit; color:var(--text);
  background:rgba(255,255,255,.05); border:1px solid var(--line2); border-radius:12px;
  padding:13px 15px; width:100%; resize:vertical;
  transition:border-color .2s, background .2s}
.yht input::placeholder,.yht textarea::placeholder{color:var(--dim)}
.yht input:focus,.yht textarea:focus{
  outline:none; border-color:var(--ice); background:rgba(255,255,255,.08)}
.yht input:user-invalid,.yht textarea:user-invalid{border-color:#D9664B}
.yht .laheta{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px}
.yht button{border:0; cursor:pointer; font:inherit}
.pikku{font-size:13px; color:var(--dim)}
.pikku a{color:var(--ice)}
/* Hunajapurkki: ihminen ei näe tätä, robotti täyttää sen ja paljastuu. */
.yht .hunaja{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.yht .tila{font-size:14.5px; padding:13px 15px; border-radius:12px; margin:0}
.yht .tila.ok{background:rgba(94,198,134,.14); border:1px solid rgba(94,198,134,.4); color:#BFEBD2}
.yht .tila.virhe{background:rgba(217,102,75,.13); border:1px solid rgba(217,102,75,.42); color:#F0C4B6}

footer{border-top:1px solid var(--line); padding:46px 0; color:var(--dim); font-size:14px}
.foot{display:flex; gap:22px; flex-wrap:wrap; justify-content:space-between; align-items:center}

/* ---------- elävä tausta: hitaasti ajelehtivat revontulet ---------- */
.sky{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
  background:radial-gradient(130% 85% at 50% -12%, #0B1322 0%, #070A11 48%, #05070B 100%)}
.sky i{position:absolute; display:block; border-radius:50%; filter:blur(95px); will-change:transform}
.sky .a1{width:780px; height:620px; left:-15%; top:-14%;
  background:radial-gradient(circle,rgba(74,124,214,.42),transparent 66%); animation:drift1 38s ease-in-out infinite alternate}
.sky .a2{width:700px; height:560px; right:-13%; top:14%;
  background:radial-gradient(circle,rgba(126,96,232,.30),transparent 68%); animation:drift2 46s ease-in-out infinite alternate}
.sky .a3{width:860px; height:540px; left:20%; bottom:-20%;
  background:radial-gradient(circle,rgba(58,190,206,.20),transparent 70%); animation:drift3 56s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(130px,90px,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-150px,120px,0) scale(1.13)}}
@keyframes drift3{to{transform:translate3d(100px,-120px,0) scale(1.22)}}

.dots{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(125% 92% at 50% 0%, #000 18%, transparent 70%);
  mask-image:radial-gradient(125% 92% at 50% 0%, #000 18%, transparent 70%)}

/* ---------- työnäytteiden karuselli ---------- */
.carousel{position:relative; margin-top:clamp(40px,5vw,62px); outline:none}
.cviewport{overflow:hidden; padding:14px 0 6px}
.ctrack{display:flex; gap:30px; will-change:transform;
  transition:transform .9s cubic-bezier(.22,.72,.18,1)}
.slide{flex:0 0 auto; width:min(930px,74vw); margin:0; opacity:.26; transform:scale(.88);
  transition:opacity .9s cubic-bezier(.22,.72,.18,1), transform .9s cubic-bezier(.22,.72,.18,1)}
.slide.on{opacity:1; transform:none}
.frame{border-radius:15px; overflow:hidden; border:1px solid var(--line2); background:#0A0E15;
  box-shadow:0 46px 100px rgba(0,0,0,.6)}
.chrome{display:flex; align-items:center; gap:7px; padding:11px 15px;
  background:rgba(255,255,255,.05); border-bottom:1px solid var(--line)}
.chrome i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.2)}
.chrome u{flex:1; height:17px; border-radius:100px; background:rgba(255,255,255,.07);
  margin-left:10px; text-decoration:none}
.win{position:relative; overflow:hidden; aspect-ratio:16/10}
.win img{width:100%; display:block; transform:translateY(0)}
.slide figcaption{margin-top:16px; font-size:12.5px; letter-spacing:.24em; color:var(--text); font-weight:500}
.slide figcaption span{color:var(--dim); font-weight:400}
.cnav{position:absolute; top:calc(50% - 26px); z-index:5; width:54px; height:54px; border-radius:50%;
  background:rgba(9,13,20,.7); backdrop-filter:blur(12px); border:1px solid var(--line2);
  color:var(--text); font:300 24px/1 "Space Grotesk",sans-serif; cursor:pointer;
  display:grid; place-items:center; transition:background .25s, transform .25s}
.cnav:hover{background:rgba(255,255,255,.14); transform:scale(1.07)}
.cprev{left:clamp(14px,3vw,46px)}
.cnext{right:clamp(14px,3vw,46px)}
.cdots{display:flex; gap:10px; justify-content:center; margin-top:30px}
.cdots button{width:36px; height:3px; padding:0; border:0; border-radius:3px; cursor:pointer;
  background:rgba(255,255,255,.15); position:relative; overflow:hidden}
.cdots button.on{background:rgba(255,255,255,.26)}
.cdots button.on::after{content:""; position:absolute; inset:0; background:var(--ice);
  transform-origin:left; transform:scaleX(0)}
.cdots button.on.run::after{animation:fill var(--dur,8s) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
@media(max-width:700px){.slide{width:88vw} .cnav{width:44px;height:44px}}

/* matalilla näytöillä hero kutistetaan, jotta painikkeet eivät jää reunan taakse
   eikä teksti mene kiinteän ylätunnisteen alle */
@media (max-height:780px){
  .copy h1{font-size:clamp(34px,5.2vw,56px); margin-bottom:18px}
  .copy .lead{font-size:17px; line-height:1.55}
  .eyebrow{margin-bottom:16px; font-size:11.5px}
  .cta{margin-top:26px}
  .btn{padding:13px 24px; font-size:14.5px}
}
@media (max-height:620px){
  .copy h1{font-size:30px}
  .copy .lead{display:none}
}

@media (prefers-reduced-motion:reduce){
  .rise{transition:none}
  .sky i{animation:none}
  .shot,.shot img{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- tekstisivut: tietosuoja, 404 ----------
   Kapea mitta ja väljä riviväli, koska nämä luetaan eikä selata. */
.teksti{max-width:68ch; margin-top:38px}
.teksti .iso{font-size:clamp(17px,2vw,20px); line-height:1.65; color:var(--text);
  padding-bottom:26px; margin-bottom:30px; border-bottom:1px solid var(--line)}
.teksti h3{font-size:clamp(18px,2.1vw,21px); letter-spacing:-.02em;
  margin:40px 0 12px; color:var(--text)}
.teksti p{margin:0 0 14px; line-height:1.72; color:var(--dim)}
.teksti ul{margin:0 0 16px; padding-left:20px; color:var(--dim); line-height:1.72}
.teksti li{margin-bottom:9px}
.teksti strong{color:var(--text); font-weight:600}
.teksti a{color:var(--text); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:var(--line)}
.teksti a:hover{text-decoration-color:currentColor}
.teksti .huom{font-size:14px; opacity:.72}

/* ---------- 404 ---------- */
.eisivua{min-height:62vh; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:18px}
.eisivua .koodi{font-size:clamp(58px,11vw,112px); font-weight:700; letter-spacing:-.05em;
  line-height:.9; color:var(--text)}