*{box-sizing:border-box}:root{--ink:#1e2028;--red:#c92c39;--muted:#74747a;--bg:#f3f0e9}
body{margin:0;min-height:100svh;font-family:Manrope,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 12% 35%,#e9e2d7,transparent 55%),var(--bg);color:var(--ink);display:grid;place-items:center;padding:32px}
.gate{width:min(1080px,100%);display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}.scene{position:relative;height:490px;isolation:isolate}.scene::after{content:"";position:absolute;bottom:4px;left:3%;width:90%;height:30px;border-radius:50%;background:#54483820;filter:blur(14px);z-index:-1}
.door{position:absolute;bottom:20px;left:14px;width:260px;height:410px;border-radius:135px 135px 8px 8px;background:#141822;overflow:hidden;border:9px solid #d2c5b4;box-shadow:0 0 0 1px #bcb09e,0 20px 50px #342b2826;perspective:700px}
.door-l,.door-r{position:absolute;top:0;bottom:0;width:50%;z-index:2;background:linear-gradient(120deg,#363b48,#222632 70%);transition:transform 1.05s cubic-bezier(.5,0,.18,1);backface-visibility:hidden;border:1px solid #ffffff12}
.door-l{left:0;border-right:1px solid #10141b;transform-origin:left}.door-r{right:0;border-left:1px solid #10141b;transform-origin:right}.door-l::after,.door-r::after{content:"";position:absolute;top:57%;width:7px;height:28px;border-radius:4px;background:linear-gradient(90deg,#b78a51,#f4d9a7)}.door-l::after{right:12px}.door-r::after{left:12px}
.glow{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 80%,#fffef5,#ffeac0 60%,#efc582);opacity:.15;transition:opacity .8s}.door.open .door-l{transform:rotateY(-105deg)}.door.open .door-r{transform:rotateY(105deg)}.door.open .glow{opacity:1}
.door::after{content:"";position:absolute;top:65px;left:50%;width:108px;height:56px;transform:translateX(-50%);background:url("/brand/raju-logo.svg") center/contain no-repeat;filter:brightness(0) invert(1);opacity:.9;z-index:3;transition:opacity .3s}.door.open::after{opacity:0}
.reko{position:absolute;bottom:6px;right:-6px;width:300px;z-index:4;overflow:visible;filter:drop-shadow(0 12px 9px #17141d14);transition:transform 1s cubic-bezier(.22,.7,.2,1)}.reko .body{animation:guard-breathe 5s ease-in-out infinite;transform-origin:160px 360px}.reko #eyes{transform-origin:160px 119px;animation:guard-blink 6.5s infinite}.pose{transition:opacity .25s,transform .35s;transform-origin:160px 220px}.pose-guard,.pose-welcome{opacity:0;transform:translateY(5px)}.guard-brows{opacity:0;transition:opacity .2s}.reko-head{transform-origin:160px 187px;transition:transform .4s}
.reko.no .pose-idle,.reko.yes .pose-idle{opacity:0}.reko.no .pose-guard,.reko.yes .pose-welcome{opacity:1;transform:none}.reko.no .guard-brows{opacity:1}.reko.no .body{animation:guard-plant .5s ease both}.reko.no .reko-head{transform:translateY(4px) rotate(-4deg)}.reko.no #eyes{animation:none;transform:scaleY(.8)}
.reko.yes{transform:translateX(40px) rotate(3deg)}.reko.yes .reko-head{transform:rotate(-7deg)}.reko.yes #cap{animation:guard-salute .8s ease}.reko.checking .reko-head{transform:rotate(7deg)}
.scene-status{position:absolute;top:0;left:24px;display:flex;align-items:center;gap:8px;color:#7d756c;font-size:10px;letter-spacing:.12em;font-weight:700;text-transform:uppercase}.scene-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#a78e6e;box-shadow:0 0 0 4px #a78e6e14}.scene[data-state="denied"] .scene-status::before{background:#c92c39}.scene[data-state="welcome"] .scene-status::before{background:#418461}
.card{position:relative;background:#ffffffcc;border:1px solid #fff;border-radius:28px;padding:38px;box-shadow:0 20px 65px #322b2210;backdrop-filter:blur(12px)}.kicker{margin:0 0 15px;font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--red)}h1{margin:0 0 16px;font-size:clamp(30px,3.5vw,43px);line-height:1.07;letter-spacing:-.045em}.lead{margin:0 0 28px;color:var(--muted);font-size:15px;line-height:1.75}.code{display:flex;gap:5px;align-items:center;margin-bottom:18px}.code input{width:100%;min-width:0;height:52px;border-radius:10px;border:1px solid #dcd9d3;text-align:center;font:750 21px/1 ui-monospace,Menlo,monospace;text-transform:uppercase;color:var(--ink);background:#f8f7f3;transition:border-color .2s,box-shadow .2s}.code input:focus{outline:none;border-color:#9a726c;background:#fff;box-shadow:0 0 0 3px #c92c3914}.code.bad input{border-color:var(--red)}.dash{color:#b5b0a8;font-weight:700}.go{width:100%;min-height:54px;padding:15px;border:0;border-radius:12px;background:var(--ink);color:#fff;font:750 15px/1.4 Manrope,Inter,system-ui,sans-serif;cursor:pointer;transition:background .2s,transform .2s}.go:hover{background:#383039}.go:active{transform:scale(.98)}.go:disabled{opacity:.65;cursor:wait}.msg{min-height:24px;margin:15px 0 0;font-size:13px;line-height:1.55;font-weight:650;color:var(--red)}.msg.ok{color:#367655}.help{margin:18px 0 0;padding-top:18px;border-top:1px solid #e6e1d9;font-size:12px;line-height:1.65;color:var(--muted)}
@keyframes guard-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes guard-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes guard-plant{0%{transform:translateX(0)}25%{transform:translateX(-9px) rotate(-2deg)}65%{transform:translateX(3px)}100%{transform:translateX(0)}}@keyframes guard-salute{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px) rotate(-2deg)}}
@media(max-width:900px){body{padding:24px}.gate{gap:24px}.card{padding:26px}.scene{height:410px}.door{width:215px;height:350px;left:0}.reko{width:255px;right:-18px}.reko.yes{transform:translateX(18px) rotate(3deg)}}
@media(max-width:700px){body{padding:20px 16px 28px;display:block}.gate{display:flex;flex-direction:column;gap:4px;max-width:450px;margin:auto}.scene{width:100%;height:265px;max-width:340px}.scene-status{left:15px;font-size:9px}.door{width:160px;height:235px;left:30px;bottom:3px;border-width:6px}.door::after{top:34px;width:68px;height:35px}.door-l::after,.door-r::after{height:20px;width:5px}.reko{width:193px;right:10px;bottom:-4px}.reko.yes{transform:translateX(20px) rotate(3deg)}.card{width:100%;padding:26px 22px;border-radius:22px}h1{font-size:32px}.lead{font-size:14px;margin-bottom:22px}.code{gap:4px}.code input{height:45px;font-size:18px;border-radius:8px}.help{margin-top:12px;padding-top:14px}.msg{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Reference-matched 3D poses share one transparent sprite sheet and animated face. */
.reko.reko-3d{width:340px;filter:drop-shadow(0 12px 8px #20172822)}
.reko-3d .body{transform-origin:256px 900px}
.reko-3d .pose{transform:none;transition:opacity .18s ease}
.reko-3d .reko-face{pointer-events:none}
@media(max-width:900px){.reko.reko-3d{width:290px;right:-22px}}
@media(max-width:700px){.reko.reko-3d{width:205px;right:4px;bottom:-4px}}
@media(prefers-reduced-motion:reduce){.reko-3d .pose{transition:none}}

/* Hubin ilme: logo ylhäällä, punainen päänappi, Manrope */
:root{--red:#d02026}
body{display:block;place-items:normal;padding:0}
.gate-top{max-width:1080px;margin:0 auto;padding:28px 32px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gate-top img{height:30px;width:auto}
.gate-top span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gate{margin:0 auto;padding:32px 32px 56px;min-height:calc(100svh - 100px)}
.card h1 em{font-style:normal;color:var(--red)}
.go{background:var(--red)!important}.go:hover{background:#b3171c!important}
.code input:focus{border-color:#171819;box-shadow:0 0 0 3px #d0202614}
@media(max-width:700px){.gate-top{padding:18px 16px 0}.gate-top img{height:24px}.gate-top span{display:none}.gate{padding:8px 16px 28px;min-height:0}}
.kicker{text-transform:uppercase}

/* Reko ilmestyy kun kuva on valmis (ei "pomppaa" kesken latauksen) */
.reko.reko-3d{opacity:0;transition:opacity .5s ease,transform 1s cubic-bezier(.22,.7,.2,1)}
.scene.ready .reko.reko-3d{opacity:1}
@media(prefers-reduced-motion:reduce){.reko.reko-3d{transition:none}}