*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#202637}.shell{display:flex;min-height:100vh}.left{width:52%;position:relative;overflow:hidden;display:flex;flex-direction:column;background:#10131d;color:#fff;padding:57px clamp(35px,6vw,112px);isolation:isolate}.left:before{content:"";position:absolute;right:-200px;top:15%;width:630px;height:630px;border:1px solid #ffffff14;border-radius:50%;z-index:-1}.left:after{content:"";position:absolute;right:-110px;top:25%;width:410px;height:410px;border:1px solid #ffffff14;border-radius:50%;z-index:-1}.logo{width:205px;max-height:80px;object-fit:contain;object-position:left center;filter:brightness(1.05)}.intro{margin:auto 0;position:relative}.overline,.eyebrow{letter-spacing:2.3px;font-size:10px;color:#ee6b70;font-weight:800}.overline i{display:inline-block;width:19px;height:2px;background:#e43d45;vertical-align:middle;margin-right:8px}.intro h1{font-weight:830;letter-spacing:-2.7px;line-height:1.1;font-size:clamp(38px,4.5vw,68px);margin:25px 0}.intro h1 em{font-style:normal;color:#f05459}.intro p{color:#aeb5c3;font-size:15px;line-height:1.9;max-width:450px}.left footer{font-size:15px;font-weight:850;letter-spacing:1px}.left footer b{color:#f05459}.left footer span{font-size:10px;font-weight:500;color:#8995a5;margin-left:20px;letter-spacing:1.6px}.glow{position:absolute;width:500px;height:500px;right:-300px;bottom:-280px;background:#e53e47;filter:blur(150px);opacity:.14;pointer-events:none}.right{background:#f8f9fb;flex:1;min-width:0;display:flex;justify-content:center;align-items:center;position:relative;padding:40px 30px}.formwrap{width:min(400px,100%)}.eyebrow{color:#8b96a7}.eyebrow i{display:inline-block;width:7px;height:7px;background:#1cb889;border-radius:50%;margin-left:9px}.formwrap h2{font-size:34px;letter-spacing:-1.2px;margin:20px 0 10px}.formwrap>p{font-size:13px;color:#8b95a5;line-height:1.7;margin:0 0 36px}label{display:block;font-size:12px;font-weight:730;margin:20px 0 10px}input{height:50px;width:100%;border:1px solid #dfe4ed;border-radius:10px;padding:0 15px;font-size:14px;color:#243144;background:#fff;outline:0;transition:.2s}input:focus{border-color:#e7434c;box-shadow:0 0 0 3px #e7434c18}.password{position:relative}.password input{padding-right:48px}.password button{position:absolute;right:10px;top:8px;border:0;background:none;color:#8290a2;font-size:20px;width:35px;height:35px}.submit{margin-top:24px;background:#e43d45;border:0;border-radius:10px;color:#fff;height:51px;width:100%;font-size:14px;font-weight:800;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:0 20px;box-shadow:0 10px 25px #e43d4536}.submit:hover{background:#cd3039}.submit:disabled{opacity:.5}.submit span{font-size:22px}.hint{font-size:11px;color:#a5afbc;margin-top:24px;display:block;text-align:center}#err{color:#c92e38;font-size:12px;margin-top:10px;min-height:5px}.below{position:absolute;left:30px;right:30px;bottom:24px;display:flex;justify-content:space-between;color:#b1b9c4;font-size:10px}@media(max-width:750px){.shell{display:block}.left{width:100%;min-height:230px;padding:22px 25px}.logo{width:145px}.intro{margin:20px 0 0}.intro h1{font-size:32px;margin:12px 0}.intro p{display:none}.left footer{display:none}.right{min-height:calc(100vh - 230px);padding:35px 27px 65px}.formwrap h2{font-size:29px}.below{bottom:17px}}

/* LOGOTIPUS logo glass capsule */
.left>.logo{width:235px;max-height:none;object-fit:contain;background:linear-gradient(135deg,rgba(244,61,80,.19),rgba(31,42,71,.95));border:1px solid rgba(250,105,129,.38);border-radius:24px;padding:18px 20px;box-sizing:content-box;box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 10px 35px rgba(0,0,0,.27),0 0 26px rgba(237,48,82,.16);transition:box-shadow .4s,transform .4s}.left>.logo:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(235,66,90,.35),0 12px 36px rgba(0,0,0,.3)}

/* Illustration becomes part of the brand panel */
.left{background:radial-gradient(ellipse at 88% 30%,#451427 0,transparent 56%),linear-gradient(145deg,#151925,#0d101a);isolation:isolate}.left:before{right:-45%;top:6%;width:105%;height:80%;border-color:#f9627720;transform:rotate(-24deg);border-radius:46%}.left:after{right:-35%;top:13%;width:80%;height:65%;border-color:#f9627717;transform:rotate(-24deg);border-radius:46%}.left>.logo{position:relative;z-index:3;width:145px;padding:9px 11px;border-radius:14px;background:#ffffff08;border:1px solid #ffffff14;box-shadow:0 8px 24px #0002}.left .brand-art{position:absolute;right:-13%;top:12%;width:92%;height:68%;margin:0;pointer-events:none;z-index:0;opacity:.65;animation:artFloat 10s ease-in-out infinite;mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 53%,transparent 98%)}.brand-art picture{display:block;width:100%;height:100%}.brand-art-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px #f9274d55) drop-shadow(0 0 44px #d4133944)}.brand-art-glow{position:absolute;inset:12%;z-index:-1;background:radial-gradient(ellipse,#ed183955,transparent 72%);filter:blur(35px)}.intro{position:relative;z-index:2;margin:auto 0 58px;padding-top:220px}.intro:before{content:"";position:absolute;inset:-65px -100px -50px;z-index:-1;background:radial-gradient(ellipse at 15% 65%,#10131df5 0%,#10131dc9 45%,transparent 75%);pointer-events:none}.intro h1{font-size:clamp(36px,3.8vw,60px)}.intro p{max-width:380px;color:#bbc1ce}.left footer{position:relative;z-index:2;margin-top:0}.glow{opacity:.22}@keyframes artFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-8px) rotate(-6deg)}}@media(max-width:750px){.left{min-height:290px;padding:25px}.left>.logo{width:120px;padding:8px 10px}.left .brand-art{width:65%;height:320px;right:-10%;top:-10px;opacity:.5;mask-image:linear-gradient(#000 20%,transparent 94%)}.intro{margin:35px 0 0;padding-top:0;max-width:90%}.intro:before{inset:-15px -30px -35px;background:linear-gradient(90deg,#10131de8,transparent)}.intro h1{font-size:32px;letter-spacing:-1.4px;margin:14px 0}.right{min-height:calc(100vh - 290px)}}@media(prefers-reduced-motion:reduce){.left .brand-art{animation:none!important}}

/* Transparent LOGOTIPUS logo for the dark login panel */
.left>.logo,.left>.logo:hover{background:transparent;border:0;box-shadow:none;padding:0;filter:none;transform:none;border-radius:0;width:145px;height:auto;object-position:left center}
@media(max-width:750px){.left>.logo{width:120px}}

/* Muted brand colors blend into the dark login background. */
.left>.logo{opacity:.88}