:root{
--bg-0:#0b130c;
--bg-1:#112015;
--grass-1:#2f7d2e;
--grass-2:#3f9a3b;
--dirt-1:#6a4524;
--dirt-2:#7a522d;
--stone:#2a2f33;
--accent:#7bdc5a;
--accent-2:#4bd6c8;
--text:#e8f5e9;
--muted:#b7ccb9;
--shadow:#0a0f0b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
color:var(--text);
background:
radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0/10px 10px,
linear-gradient(to top, rgba(0,0,0,.25), transparent 40%),
linear-gradient(to top, var(--dirt-1) 0 22%, var(--grass-1) 22% 28%, var(--bg-0) 28% 100%);
overflow-x:hidden;
}

.site-header{
position:sticky; top:0; z-index:10;
background:linear-gradient(to bottom, rgba(10,15,11,.9), rgba(10,15,11,.6));
backdrop-filter:saturate(1.2) blur(4px);
border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{
display:inline-flex; align-items:center; gap:.6rem;
padding:14px 18px; color:var(--text); text-decoration:none; font-weight:800;
letter-spacing:.3px;
}
.logo-cube{
width:18px; height:18px; position:relative; transform:rotate(45deg) skewY(-10deg);
background:linear-gradient(135deg, var(--grass-2), var(--grass-1));
box-shadow:0 0 0 2px rgba(0,0,0,.15), 0 8px 20px rgba(0,0,0,.25);
}
.logo-cube:after{
content:""; position:absolute; inset:-3px; border:3px solid rgba(0,0,0,.15); pointer-events:none;
}

.bg-pixels{position:fixed; inset:0; pointer-events:none; z-index:-1}

.hero{
position:relative; display:grid; grid-template-columns:1fr auto; gap:2rem;
align-items:center; padding:48px 20px 8px; max-width:1200px; margin:0 auto;
}
.hero-title h1{margin:0}
.mc-title{
font-family:"Press Start 2P", monospace;
font-size: clamp(24px, 4vw, 44px);
color:#f0ffe8;
text-shadow:
0 4px 0 #224a1f,
0 8px 16px rgba(0,0,0,.35);
}
.tagline{margin:.8rem 0 0; color:var(--muted)}

.floating-block{
width:140px; height:140px; position:relative; transform-style:preserve-3d;
animation:float 5s ease-in-out infinite;
filter:drop-shadow(0 30px 25px rgba(0,0,0,.35));
}
.floating-block .face{
position:absolute; inset:0; transform-style:preserve-3d; border-radius:8px;
}
.floating-block .top{
background:linear-gradient(145deg, var(--grass-2), var(--grass-1));
transform:rotateX(60deg) rotateZ(45deg) translateZ(25px);
}
.floating-block .left{
background:linear-gradient(145deg, var(--dirt-2), var(--dirt-1));
transform:rotateY(-60deg) rotateX(0deg) translateZ(25px);
}
.floating-block .right{
background:linear-gradient(145deg, #845b36, #6f4726);
transform:rotateY(60deg) translateZ(25px);
}
@keyframes float{
0%,100%{ transform:translateY(0) rotateX(15deg) rotateZ(-10deg)}
50%{ transform:translateY(-14px) rotateX(18deg) rotateZ(-6deg)}
}

.nav-grid{
max-width:1200px; margin:24px auto 80px; padding:0 20px;
display:grid; gap:16px;
grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.nav-card{
position:relative; display:flex; flex-direction:column; align-items:flex-start;
gap:.4rem; padding:18px 16px 20px; text-decoration:none; color:var(--text);
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:2px solid rgba(255,255,255,.08);
border-radius:12px;
box-shadow:
0 0 0 6px rgba(0,0,0,.06) inset,
0 8px 24px rgba(0,0,0,.25);
transform:translateZ(0);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
overflow:hidden;
}
.nav-card:before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
repeating-linear-gradient(45deg, rgba(123,220,90,.12), rgba(75,214,200,.12) 12px, transparent 12px, transparent 24px);
opacity:.25; mix-blend-mode:screen; transition:opacity .2s ease;
}
.nav-card:hover:before
.nav-card:hover{
transform:translateY(-4px);
border-color:rgba(123,220,90,.35);
box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 2px rgba(123,220,90,.2) inset;
}
.card-icon{font-size:28px}
.card-title{
font-weight:800; letter-spacing:.3px;
text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.card-shadow{
position:absolute; left:10px; right:10px; bottom:-8px; height:16px; border-radius:50%;
background:radial-gradient(closest-side, rgba(0,0,0,.35), transparent);
filter:blur(4px);
}

.page{
max-width:1100px; margin:0 auto; padding:24px 20px 100px;
}
.page h1{
font-family:"Press Start 2P", monospace;
font-size: clamp(20px, 3vw, 34px);
margin:10px 0 6px;
text-shadow:0 3px 0 #203f1d, 0 10px 22px rgba(0,0,0,.3);
}
.lead{color:var(--muted)}

.panel{
margin-top:18px; padding:16px; border:1px solid rgba(255,255,255,.08);
border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.placeholder{
margin-top:22px; border-radius:12px; overflow:hidden; border:1px dashed rgba(255,255,255,.18);
position:relative; background:rgba(0,0,0,.15);
}
.placeholder:before{
content:"Työn alla – lisää sisältöä tähän osioon!"; display:block; padding:22px 16px;
color:#dff6d5; letter-spacing:.2px;
background:linear-gradient(110deg, rgba(123,220,90,.15), rgba(75,214,200,.15));
}
.placeholder:after{
content:""; position:absolute; inset:0;
background:linear-gradient(100deg, transparent, rgba(255,255,255,.15), transparent);
transform:translateX(-100%); animation:shine 2.2s ease-in-out infinite;
}
@keyframes shine{
0%{transform:translateX(-100%)} 60%{transform:translateX(100%)} 100%{transform:translateX(100%)}
}

.site-footer{
position:fixed; left:0; right:0; bottom:0;
background:linear-gradient(to top, rgba(10,15,11,.9), rgba(10,15,11,.6));
border-top:1px solid rgba(255,255,255,.06);
backdrop-filter:saturate(1.2) blur(4px);
}
.footer-inner{
display:flex; gap:10px; align-items:center; justify-content:space-between;
padding:8px 14px; font-size:14px; color:var(--muted);
}
.home-link{color:var(--accent); text-decoration:none; font-weight:600}
.home-link:hover

@media (max-width:720px){
.hero{grid-template-columns:1fr; gap:1.2rem}
.floating-block{justify-self:center}
}

Tiedosto: assets/script.js
// Kevyt “pikselisade” taustaan ja pieni 3D-tilt hoverin mukaan
(function(){
const root = document.querySelector('.bg-pixels');
if (!root) return;

function spawnPixel(){
const el = document.createElement('span');
const size = Math.random() < 0.5 ? 3 : 4;
el.className = 'pixel';
el.style.position = 'fixed';
el.style.width = size + 'px';
el.style.height = size + 'px';
const colors = ['#7bdc5a', '#55c94a', '#4bd6c8', '#9be07d'];
el.style.background = colors[Math.floor(Math.random()*colors.length)];
el.style.left = Math.random()100 + 'vw';
el.style.bottom = '-8px';
el.style.opacity = 0.7;
el.style.borderRadius = '1px';
el.style.filter = 'drop-shadow(0 0 4px rgba(0,0,0,.4))';
const dur = 5 + Math.random()5;
el.style.transition = transform ${dur}s linear, opacity .8s ease;
root.appendChild(el);
requestAnimationFrame(()=>{
el.style.transform = translateY(-110vh) translateX(${(Math.random()*40-20)}vw);
});
setTimeout(()=>{ el.style.opacity = 0; }, (dur1000)-750);
setTimeout(()=>{ el.remove(); }, dur1000);
}
setInterval(spawnPixel, 240);

// Korttien kevyt tilt-efekti
const cards = document.querySelectorAll('.nav-card');
cards.forEach(card=>{
card.addEventListener('mousemove', (e)=>{
const r = card.getBoundingClientRect();
const cx = e.clientX - r.left, cy = e.clientY - r.top;
const rx = ((cy/r.height)-0.5)*6;
const ry = ((cx/r.width)-0.5)*8;
card.style.transform = translateY(-4px) rotateX(${ -rx }deg) rotateY(${ ry }deg);
});
card.addEventListener('mouseleave', ()=>{
card.style.transform = '';
});
});
})();