:root { color: #18243a; background: #fafaf8; }
body { -webkit-font-smoothing: antialiased; }
.access-layout { grid-template-columns: minmax(0, 1.12fr) minmax(400px, 1fr); padding: 16px; gap: 16px; }
.access-story { isolation: isolate; background: #111e30; border-radius: 22px; padding: clamp(32px, 4vw, 64px); min-height: calc(100dvh - 32px); }
.access-story::before { content: none; }
.access-story::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9,19,33,.24) 0%, transparent 32%, rgba(6,17,30,.42) 59%, rgba(6,17,30,.93) 100%); pointer-events: none; }
.access-scene { position: absolute; inset: 0; z-index: -2; background: url('/auth/login-windfarm.webp') center 43% / cover no-repeat; animation: scene-arrive 16s cubic-bezier(.2,.6,.2,1) both; }
.brand-logo { width: 106px; max-width: 106px; height: auto; flex: 0 0 auto; animation: reveal .8s both; }
.story-copy { margin: auto 0 28px; padding-top: 160px; max-width: 540px; animation: reveal .9s .12s both; }
.eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .22em; color: #d9e5ef; }
.story-copy h1 { font-size: clamp(38px, 4.1vw, 66px); line-height: 1.08; letter-spacing: -.045em; font-weight: 500; margin: 21px 0 20px; }
.story-copy h1 em { color: #c3d8e8; }
.story-copy p { font-size: 15px; line-height: 1.65; max-width: 350px; color: #d1dbe5; margin-bottom: 0; }
.story-foot { padding-top: 21px; border-top: 1px solid #ffffff26; color: #b4c2d0; font-size: 10px; letter-spacing: .01em; gap: 12px; animation: reveal .9s .22s both; }
.access-panel { padding: 48px clamp(24px, 4vw, 70px); }
.panel-inner { width: min(100%, 370px); animation: reveal .85s .16s both; }
.panel-kicker { color: #667887; font-size: 10px; letter-spacing: .21em; font-weight: 500; display: inline-flex; align-items: center; gap: 12px; }
.panel-kicker::before { content: ''; display: block; width: 25px; height: 1px; background: #92a8b9; }
h2 { font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -.045em; line-height: 1.15; font-weight: 500; margin: 23px 0 13px; }
.muted { font-size: 14px; color: #72808c; margin-bottom: 32px; }
label { font-size: 12px; font-weight: 600; color: #394858; margin: 22px 0 9px; }
input { height: 53px; background: #fff; border: 1px solid #dce1e4; border-radius: 8px; font-size: 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
input:hover { border-color: #a8b7c2; }
input:focus { border-color: #607e96; box-shadow: 0 0 0 4px #607e960d; background: #fff; }
input::placeholder { color: #a1aab2; }
.primary-button, .primary-link { background: #1b3046; border-radius: 8px; min-height: 53px; font-size: 13px; font-weight: 500; margin-top: 28px; box-shadow: 0 5px 12px #172a4110; transition: background .2s, box-shadow .2s, transform .2s; }
.primary-button:hover, .primary-link:hover { background: #294962; box-shadow: 0 8px 20px #172a4120; transform: translateY(-2px); }
.primary-button span, .primary-link span { transition: transform .2s; }
.primary-button:hover span, .primary-link:hover span { transform: translate(2px, -2px); }
.primary-button:active { transform: translateY(0); }
.text-button, .secondary-link { font-weight: 500; font-size: 12px; color: #526b80; }
.text-button:hover, .secondary-link:hover { color: #172b42; text-decoration: underline; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid #607e96; outline-offset: 4px; }
.form-help { margin: 31px 0 0; color: #83909b; font-size: 11px; max-width: 320px; }
.privacy-note { margin-top: 32px; padding-top: 22px; border-color: #e3e7e8; color: #8d98a1; font-size: 10px; line-height: 1.6; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scene-arrive { from { transform: scale(1.075); } to { transform: scale(1); } }
@media (min-width: 801px) and (max-height: 730px) { .access-story { padding: 32px 40px; } .story-copy { padding-top: 95px; } .story-copy h1 { font-size: 45px; } .access-panel { padding-top: 24px; padding-bottom: 24px; } }
@media (max-width: 800px) { .access-layout { display: block; padding: 10px; } .access-story { min-height: 370px; padding: 27px; border-radius: 16px; } .access-scene { background-position: center 38%; } .brand-logo { width: 88px; max-width: 88px; } .story-copy { padding-top: 85px; margin: auto 0 0; max-width: 370px; } .story-copy h1 { font-size: clamp(33px, 7.2vw, 44px); margin: 14px 0 13px; } .story-copy p { font-size: 12px; max-width: 300px; line-height: 1.5; } .eyebrow { font-size: 8px; } .story-foot { display: none; } .access-panel { padding: 38px 23px 24px; } .panel-inner { width: min(100%, 430px); } h2 { margin-top: 17px; font-size: 32px; } .muted { margin-bottom: 24px; } .privacy-note { margin-top: 26px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }