:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eef2f8;background:#0f1520;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input{font:inherit}button{cursor:pointer}
.layout{min-height:100vh;display:grid;grid-template-columns:minmax(360px,1fr) minmax(420px,1fr)}
.intro{position:relative;overflow:hidden;padding:44px clamp(32px,5vw,96px);display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(650px 580px at 100% 90%,rgba(31,198,189,.2),transparent 70%),radial-gradient(650px 650px at 20% 0,rgba(47,139,224,.22),transparent 67%),#121e2f;border-right:1px solid rgba(255,255,255,.09)}
.intro:after{content:"";position:absolute;inset:auto -15% -35% 15%;height:60%;border:1px solid rgba(31,198,189,.14);border-radius:50%;transform:rotate(-18deg);pointer-events:none}
.brand{display:flex;align-items:center;gap:13px;font-size:20px;font-weight:700;letter-spacing:-.04em}.brand img{width:34px;height:34px}.brand strong{font-weight:500;color:#8ed6d2}
.intro-copy{position:relative;max-width:600px;z-index:1}.eyebrow{color:#46c9c1;letter-spacing:.18em;font-size:11px;font-weight:800;margin:0 0 19px}
.intro h1{font-size:clamp(44px,5vw,72px);line-height:1.04;letter-spacing:-.06em;font-weight:650;margin:0 0 26px}.intro-copy>p:last-child{max-width:490px;color:#a9b9ce;font-size:18px;line-height:1.6;margin:0}
.steps{display:flex;gap:12px;align-items:center;color:#7e9ab4;font-size:12px;font-weight:650;letter-spacing:.04em}.steps i{height:1px;width:28px;background:#416177}
.sign-in{display:grid;place-items:center;padding:40px 24px;background:radial-gradient(600px 500px at 70% 10%,rgba(224,95,168,.055),transparent 75%),#0f1520}
.card{width:min(100%,420px)}.lock-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(31,198,189,.13);color:#43d1c9;margin-bottom:33px}.lock-mark svg{width:25px;height:25px}
.card h2{font-size:36px;line-height:1.15;letter-spacing:-.045em;margin:0 0 8px;font-weight:650}.description{color:#9aaabe;margin:0 0 39px;font-size:15px}
form{display:grid}label{font-size:13px;color:#c5cfdd;font-weight:600;margin:0 0 8px}input{width:100%;height:50px;padding:0 15px;border:1px solid #354154;border-radius:11px;background:#192332;color:#eef2f8;outline:none;margin-bottom:22px}input:hover{border-color:#506177}input:focus{border-color:#2bcbc2;box-shadow:0 0 0 3px rgba(31,198,189,.13)}
.message{min-height:20px;color:#ff9ca8;font-size:13px;margin:-5px 0 13px}.message:empty{visibility:hidden}
button{height:52px;border:0;border-radius:11px;background:linear-gradient(110deg,#de549f,#2179cc 46%,#0ebbb2);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:13px;box-shadow:0 10px 28px rgba(13,133,163,.24)}button:hover{filter:brightness(1.09)}button:disabled{opacity:.65;cursor:wait}button span{font-size:20px;font-weight:400}
.footer{border-top:1px solid rgba(255,255,255,.09);padding-top:23px;color:#728298;font-size:12px;line-height:1.5;margin:38px 0 0}
@media(max-width:840px){.layout{grid-template-columns:1fr}.intro{min-height:240px;padding:26px 30px;gap:28px}.intro h1{font-size:34px;max-width:520px;margin-bottom:12px}.intro-copy>p:last-child{font-size:14px}.steps{display:none}.sign-in{padding:48px 24px 70px}.card{max-width:440px}.lock-mark{margin-bottom:20px}}
@media(max-width:480px){.intro{min-height:210px}.intro h1{font-size:30px}.card h2{font-size:31px}.description{margin-bottom:30px}}