@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#143447;--muted:#647984;--cyan:#24a9c9;--deep:#087f9f;--yellow:#f5ae0b;--line:#dceaf0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.6 "DM Sans",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.skip-link{position:absolute;top:-80px;left:15px;z-index:20;padding:8px 15px;background:#fff}.skip-link:focus{top:10px}
.auth-layout{display:grid;grid-template-columns:minmax(420px,45%) minmax(0,55%);min-height:100vh}
.brand{position:relative;display:block;width:200px;height:60px;overflow:hidden;flex:none}
.brand img{position:absolute;width:350px;max-width:none;height:auto;left:calc(50% - 6px);top:calc(50% + 8px);transform:translate(-50%,-50%)}
.story-panel{display:flex;flex-direction:column;position:relative;overflow:hidden;background:radial-gradient(circle at 78% 58%,#d0f1f4 0%,transparent 45%),linear-gradient(145deg,#ecf9fb,#d7f1f5);border-right:1px solid #cee7ee}
.story-panel:before{content:"";position:absolute;width:550px;height:550px;right:-220px;top:30%;border:1px solid #95dbe7;border-radius:50%}
.story-panel:after{content:"";position:absolute;width:350px;height:350px;right:-110px;top:43%;border:1px solid #95dbe7;border-radius:50%}
.story-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:96px;padding:13px clamp(26px,5vw,80px);background:#fff}
.story-tag{max-width:160px;color:#8198a2;font-size:10px;font-weight:800;letter-spacing:.13em;line-height:1.4;text-align:right}
.story-body{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;flex:1;min-height:500px;padding:70px clamp(26px,5vw,80px)}
.eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 24px;color:var(--deep);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.dot{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px #f5ae0b24}
.story-body h2{max-width:550px;margin:0 0 22px;font-family:Manrope,system-ui,sans-serif;font-size:clamp(38px,3.6vw,59px);line-height:1.17;letter-spacing:-.055em}
.story-body h2 em{color:var(--cyan);font-style:normal}
.story-body>p:not(.eyebrow){max-width:430px;margin:0;color:#54707b;font-size:16px;line-height:1.85}
.story-mark{display:grid;place-items:center;position:relative;width:79px;height:79px;margin-top:44px;border-radius:24px;background:var(--cyan);color:#fff;box-shadow:0 18px 35px #1786a63b;font-family:Manrope,system-ui,sans-serif;font-size:59px;font-weight:800;line-height:1;transform:rotate(-9deg)}
.story-mark span{position:absolute;right:6px;bottom:1px;color:var(--yellow);font-size:48px}
.story-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;gap:20px;padding:24px clamp(26px,5vw,80px);color:#6b8e9b;font-size:10px;font-weight:800;letter-spacing:.13em}
.story-bottom span span{color:var(--yellow)}
.form-panel{display:flex;flex-direction:column;min-width:0;padding:0 clamp(32px,6vw,110px)}
.mobile-header{display:none}
.form-wrap{width:min(100%,465px);margin:auto;padding:65px 0}
.back-link{display:inline-flex;align-items:center;gap:10px;margin-bottom:38px;color:#5e7580;font-size:13px;font-weight:700}
.back-link:hover{color:var(--deep)}.back-link span{font-size:19px;font-weight:400}
.form-kicker{margin:0 0 10px;color:var(--deep);font-size:11px;font-weight:800;letter-spacing:.16em}
.form-wrap h1{margin:0 0 8px;font-family:Manrope,system-ui,sans-serif;font-size:clamp(34px,3.2vw,49px);letter-spacing:-.055em;line-height:1.2}
.form-wrap h1 span{color:var(--yellow)}
.form-lead{margin:0 0 32px;color:var(--muted);font-size:15px}
.field{margin-bottom:18px}
.field label{display:block;margin:0 0 8px;font-size:13px;font-weight:800}
.field input{display:block;width:100%;min-height:52px;padding:12px 15px;border:1px solid #d4e3e9;border-radius:9px;background:#fff;color:var(--ink);font:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#9aabb3}
.field input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px #24a9c922}
.field input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.submit-button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:54px;margin-top:25px;padding:13px 20px;border:1px solid var(--cyan);border-radius:9px;background:var(--cyan);color:#fff;cursor:pointer;font:800 14px "DM Sans",system-ui,sans-serif;transition:background .2s,transform .2s}
.submit-button:hover{background:var(--deep);transform:translateY(-1px)}
.submit-button span{font-size:20px;font-weight:400}
.switch-link{margin:25px 0 0;color:var(--muted);font-size:13px;text-align:center}
.switch-link a{color:var(--deep);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.switch-link a:hover{color:var(--ink)}
.form-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:67px;border-top:1px solid #e8eff1;color:#899ba4;font-size:11px}
.form-footer div{display:flex;gap:20px}.form-footer a:hover{color:var(--deep)}
.form-register{padding:45px 0}
.form-register .back-link{margin-bottom:24px}
.form-register .form-lead{margin-bottom:22px}
.form-register .field{margin-bottom:13px}
.form-register .submit-button{margin-top:18px}
@media(max-width:1100px){.auth-layout{grid-template-columns:minmax(350px,44%) minmax(0,56%)}.story-top,.story-body,.story-bottom{padding-left:35px;padding-right:35px}.story-tag{display:none}.form-panel{padding-left:42px;padding-right:42px}}
@media(max-width:760px){.auth-layout{display:block;min-height:100vh}.story-panel{display:none}.form-panel{min-height:100vh;padding:0 24px}.mobile-header{display:flex;align-items:center;min-height:78px;border-bottom:1px solid #edf1f2}.mobile-header .brand{width:175px;height:60px}.mobile-header .brand img{width:300px;top:calc(50% + 7px)}.form-wrap{padding:40px 0 55px}.form-wrap .back-link{margin-bottom:28px}.form-footer{min-height:75px}.form-register{padding-top:25px}}
@media(max-width:390px){.form-panel{padding:0 17px}.mobile-header .brand{width:145px;height:56px}.mobile-header .brand img{width:240px;top:calc(50% + 7px)}.form-wrap h1{font-size:36px}.form-footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}