@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Exo:wght@400;600;800&family=Space+Grotesk:wght@500;700&family=Space+Mono:wght@400;700&display=swap');
:root{--bg:#111;--gap:#111;--accent:#cc0000;--hink:#fff;--font:'Exo',sans-serif;--filt:saturate(.9) brightness(.85);--hov:saturate(1.1) brightness(1.05)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--gap);color:#fff;font-family:var(--font)}
.stage{position:fixed;inset:0;background:var(--gap)}
.panel{position:absolute;inset:0;display:block;color:#fff;text-decoration:none;transition:clip-path .55s cubic-bezier(.2,1,.3,1)}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:var(--filt);transition:transform .7s cubic-bezier(.2,1,.3,1),filter .4s}
.panel:hover .bg,.panel:focus-visible .bg{filter:var(--hov);transform:scale(1.045)}
.tint{position:absolute;inset:0;mix-blend-mode:color;opacity:.75;transition:opacity .4s}
.panel:hover .tint{opacity:.45}
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 38%,rgba(0,0,0,.6))}
.panel.topbar:before{content:"";position:absolute;left:0;right:0;top:var(--top,0);height:4px;background:var(--accent);z-index:3}
.content{position:absolute;transform:translate(-50%,-50%);text-align:center;z-index:4;transition:left .55s cubic-bezier(.2,1,.3,1),top .55s cubic-bezier(.2,1,.3,1),width .55s cubic-bezier(.2,1,.3,1);max-width:380px}
.num{display:block;margin-bottom:8px;color:var(--accent);font-weight:800;font-size:12px;letter-spacing:.22em}
h2{font-size:clamp(20px,3vw,34px);font-weight:800;text-transform:uppercase;line-height:1.08;margin-bottom:10px;text-shadow:2px 2px 10px rgba(0,0,0,.55);min-height:2.2em;display:flex;align-items:center;justify-content:center}
p{font-size:clamp(12px,1.15vw,15px);font-weight:600;margin:0 auto 22px;max-width:280px;line-height:1.35;min-height:2.7em;text-shadow:1px 1px 4px rgba(0,0,0,.8)}
.btn{display:inline-block;padding:13px 26px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;background:#222;color:#fff;transition:all .3s}
.panel:hover .btn,.panel:focus-visible .btn{transform:translateY(-3px);background:var(--accent);box-shadow:0 0 20px color-mix(in srgb,var(--accent) 70%,transparent),0 0 40px color-mix(in srgb,var(--accent) 40%,transparent)}
svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;filter:drop-shadow(0 0 4px var(--accent))}
svg.lines *{fill:none;stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke}
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px clamp(16px,3vw,40px);pointer-events:none;color:var(--hink)}
.logo{height:clamp(42px,6vw,72px);width:auto}
.title{font-size:clamp(11px,1.35vw,19px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:right;max-width:46ch;text-shadow:2px 2px 8px rgba(0,0,0,.8)}
.light .title{text-shadow:none}
.foot{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-between;gap:16px;padding:10px clamp(16px,3vw,40px);font-size:11px;color:color-mix(in srgb,var(--hink) 78%,transparent);background:linear-gradient(0deg,rgba(0,0,0,.65),transparent)}
.light .foot{background:none}
.foot a{color:var(--accent);font-weight:800;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.font-cond{--font:'Barlow Condensed',sans-serif}.font-cond h2{font-size:clamp(26px,4vw,46px);letter-spacing:.02em}.font-cond p{font-size:clamp(14px,1.4vw,18px)}
.font-mono{--font:'Space Mono',monospace}.font-mono h2{font-size:clamp(18px,2.4vw,28px)}.font-mono .btn,.font-mono .title{letter-spacing:0}
.font-grotesk{--font:'Space Grotesk',sans-serif}
.thumb .btn{box-shadow:none}
@media(max-width:700px),(max-aspect-ratio:4/5){h2{font-size:clamp(18px,5.4vw,26px);min-height:0;margin-bottom:5px}p{font-size:12px;margin-bottom:10px;min-height:0}.btn{padding:9px 18px;font-size:11px}.num{display:none}.title{font-size:10px;max-width:22ch}.content{max-width:none}.foot{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Tehosteet */
.parallax .bg{transform:translate(calc(var(--px,0)*-26px),calc(var(--py,0)*-18px)) scale(1.1);transition:transform .25s ease-out,filter .4s}
.parallax .panel:hover .bg{transform:translate(calc(var(--px,0)*-34px),calc(var(--py,0)*-24px)) scale(1.14)}
.parallax .content{translate:calc(var(--px,0)*10px) calc(var(--py,0)*7px)}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.16) translate(-1.5%,-1%)}}
.kenburns .bg{animation:kb 16s ease-in-out infinite alternate}.kenburns .panel:nth-child(2) .bg{animation-duration:20s;animation-direction:alternate-reverse}.kenburns .panel:nth-child(3) .bg{animation-duration:13s}
@keyframes rev-l{from{transform:translateX(-105%)}}@keyframes rev-t{from{transform:translateY(-105%)}}@keyframes rev-r{from{transform:translateX(105%)}}@keyframes fade{from{opacity:0}}
.reveal .panel{animation-duration:1s;animation-timing-function:cubic-bezier(.2,.9,.2,1);animation-fill-mode:backwards}
.reveal .panel:nth-child(1){animation-name:rev-l}.reveal .panel:nth-child(2){animation-name:rev-t;animation-delay:.18s}.reveal .panel:nth-child(3){animation-name:rev-r;animation-delay:.36s}
.reveal .content{animation:fade .7s .9s backwards}
.spot .panel:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.26),transparent 70%);mix-blend-mode:soft-light}
.spot .panel:hover:after{opacity:1}
.dim .bg{transition:transform .7s cubic-bezier(.2,1,.3,1),filter .45s}
.dim .stage:hover .panel:not(:hover) .bg{filter:grayscale(1) brightness(.4)}
.dim .stage:hover .panel:not(:hover) .content{opacity:.55}.dim .content{transition:opacity .4s,left .55s,top .55s,width .55s}
.slideup p,.slideup .btn{opacity:0;transform:translateY(16px);transition:opacity .35s,transform .45s cubic-bezier(.2,1,.3,1),background .3s,box-shadow .3s}
.slideup .panel:hover p,.slideup .panel:hover .btn,.slideup .panel:focus-visible p,.slideup .panel:focus-visible .btn{opacity:1;transform:none}
.slideup .panel:hover .btn{transform:translateY(-3px)}
.slideup h2{transition:transform .45s cubic-bezier(.2,1,.3,1)}.slideup .panel:not(:hover) h2{transform:translateY(24px)}
@media(hover:none){.slideup p,.slideup .btn{opacity:1;transform:none}.slideup .panel:not(:hover) h2{transform:none}}
.shine .panel:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);transform:translateX(-130%)}
.shine .panel:hover:after{transform:translateX(130%);transition:transform 1s ease}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.3;filter:drop-shadow(0 0 1px var(--accent))}}
.pulse svg.lines{animation:pl 2.6s ease-in-out infinite}.pulse svg.lines *{stroke-width:2}
.lift svg.lines *{stroke-width:2.4}.lift svg.lines{filter:drop-shadow(0 0 9px var(--accent))}
.lift .panel:hover .bg{transform:scale(1.12);filter:var(--hov)}.lift .panel:hover .content{translate:0 -6px}.lift .content{transition:translate .4s,left .55s,top .55s,width .55s}
.lift .panel:hover .scrim{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 40%,rgba(0,0,0,.55))}
/* Keskitetty otsikko ja isompi Calculator */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.title{grid-column:2;display:flex;align-items:center;gap:18px;max-width:none;text-align:center;font-size:clamp(11px,1.15vw,16px);font-weight:600;letter-spacing:.34em;white-space:nowrap}
.title:before,.title:after{content:"";width:clamp(24px,4vw,64px);height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.title:after{transform:scaleX(-1)}
.foot{align-items:center;padding-top:14px;padding-bottom:14px}
.foot a{display:inline-flex;align-items:center;gap:10px;padding:11px 22px;font-size:clamp(14px,1.3vw,18px);letter-spacing:.08em;color:#fff;background:color-mix(in srgb,var(--accent) 88%,#000);border-radius:4px;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 50%,transparent);transition:transform .25s,box-shadow .25s}
.foot a:after{content:"↗";font-size:1.1em}
.foot a:hover{transform:translateY(-2px);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 80%,transparent)}
.foot span{font-size:12px}
@media(max-width:900px),(max-aspect-ratio:4/5){.top{grid-template-columns:auto 1fr;gap:10px}.title{grid-column:2;justify-content:center;white-space:normal;letter-spacing:.16em;font-size:10px;max-width:none}.title:before,.title:after{display:none}.foot a{padding:9px 16px;font-size:13px}.foot span{font-size:10px}}
/* Calculator-minilohko */
.panel.mini .content{display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;max-width:none;width:auto;opacity:1!important;transform:translate(-50%,-50%)}
.panel.mini h2{font-size:clamp(12px,1.25vw,17px);letter-spacing:.14em;min-height:0;margin:0;transform:none!important;display:block}
.calc-ico{color:var(--accent);font-size:clamp(16px,1.7vw,24px);line-height:1}
.calc-go{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff80;border-radius:50%;font-size:14px;transition:all .3s}
.panel.mini:hover .calc-go{background:var(--accent);border-color:var(--accent);transform:translate(2px,-2px);box-shadow:0 0 16px var(--accent)}
.panel.mini .scrim{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.25))}
.panel.mini .bg{background-position:center;background-size:cover}.panel.mini:hover .bg{transform:scale(1.06)}
.dim .stage:hover .panel.mini:not(:hover) .content{opacity:.7!important}
.foot{justify-content:flex-end}