:root { --navy:#03254c; --blue:#0867e8; --ink:#14233b; --muted:#68758a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:"Plus Jakarta Sans",sans-serif; background:#f7faff; }
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(360px,45%) 1fr; }
.brand-panel { min-height:100vh; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:42px clamp(34px,7vw,110px) 54px; color:#fff; background:linear-gradient(145deg,rgba(2,26,56,.96),rgba(0,78,184,.87)),url("assets/hero-bg.jpg") center/cover; isolation:isolate; }
.brand-panel::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(2,26,56,.3),transparent 55%,rgba(2,26,56,.58)); }
.brand-logo img { width:96px; height:96px; object-fit:contain; filter:none; border-radius:50%; background:rgba(255,255,255,.15); padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .3s ease; }
.brand-logo:hover img { transform:scale(1.05); }
.card-logo-wrap { display:flex; align-items:center; margin-bottom:20px; }
.card-logo { width:80px; height:80px; object-fit:contain; border-radius:50%; background:#fff; padding:4px; box-shadow:0 6px 18px rgba(3,37,76,.12); border:1px solid rgba(8,103,232,.15); }
.brand-copy { margin:auto 0; max-width:570px; padding:70px 0; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 16px; color:#b8dcff; font:700 .72rem "Outfit",sans-serif; letter-spacing:.18em; }
.eyebrow span { width:28px; height:2px; background:#57b8ff; }
.heading-icon { display:none; }
.mobile-logo img { filter:none; width:88px; height:88px; object-fit:contain; }

h1,h2 { margin:0; font-family:Outfit,sans-serif; line-height:1.05; }
h1 { font-size:clamp(2.8rem,5.2vw,5.1rem); letter-spacing:-.045em; }
h1 em { color:#7ed3ff; font-style:normal; }
.brand-description { max-width:420px; margin:25px 0 0; color:#e0efff; line-height:1.8; font-size:1rem; }
.trust-row { display:flex; align-items:center; gap:14px; z-index:1; color:#e1f0ff; font-size:.81rem; line-height:1.55; }
.trust-row p { margin:0; }.trust-row strong { color:#fff; font-size:.9rem; }
.trust-icon { display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(255,255,255,.38); border-radius:13px; color:#8ed8ff; background:rgba(255,255,255,.08); }
.water-rings { position:absolute; border:1px solid rgba(174,226,255,.18); border-radius:50%; z-index:-1; }.ring-one { width:420px;height:420px;right:-250px;top:22%; }.ring-two { width:640px;height:640px;left:-470px;bottom:-240px; }
.wave { position:absolute; bottom:-1px; left:0; width:100%; height:78px; background:#f7faff; clip-path:path("M0 45 Q 90 10 180 45 T 360 45 T 540 45 T 720 45 V 100 H 0 Z"); }
.form-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:44px 28px 25px; }
.login-card { width:min(100%,440px); }.back-link { display:inline-flex; align-items:center; gap:8px; color:#62738b; font-size:.83rem; font-weight:600; }.back-link:hover,.form-options a,.help-text a { color:var(--blue); }
.form-heading { margin:31px 0 30px; }.heading-icon { display:grid; place-items:center; width:45px;height:45px; margin-bottom:21px; border-radius:14px; color:#fff; background:linear-gradient(135deg,#0874f8,#0050bd); box-shadow:0 9px 18px rgba(0,102,255,.2); }
.eyebrow.dark { color:#1671df; margin-bottom:10px; }.eyebrow.dark::before { content:""; width:23px; height:2px; background:#1671df; }.eyebrow.dark span { display:none; }
h2 { font-size:2.35rem; letter-spacing:-.04em; }.form-heading > p:last-child { margin:12px 0 0; color:var(--muted); font-size:.91rem; line-height:1.7; }
form label { display:block; margin:17px 0 8px; font-size:.82rem; font-weight:700; }.field-wrap { position:relative; }.field-wrap > i { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#8090a5; font-size:.94rem; }
input:not([type=checkbox]) { width:100%; height:52px; border:1px solid #d9e1ec; border-radius:11px; outline:0; padding:0 47px; background:#fff; color:var(--ink); font:500 .89rem inherit; transition:.2s; } input:focus { border-color:#2180f5; box-shadow:0 0 0 4px rgba(33,128,245,.1); } input::placeholder { color:#9daaba; }
.password-toggle { position:absolute; right:12px; top:50%; padding:5px; transform:translateY(-50%); border:0; color:#718096; background:transparent; cursor:pointer; }.form-options { display:flex; justify-content:space-between; align-items:center; margin:16px 0 22px; font-size:.76rem; font-weight:600; }.form-options a,.help-text a { text-decoration:none; }.check-label { display:flex!important; align-items:center; gap:7px; margin:0!important; color:#6b778a; font-weight:500!important; cursor:pointer; }.check-label input { accent-color:var(--blue); }
.form-message { min-height:0; margin:0; color:#d92d20; font-size:.78rem; }.form-message.visible { margin:0 0 12px; }.sign-in { width:100%; height:53px; border:0; border-radius:11px; color:#fff; background:linear-gradient(105deg,#0067ea,#004eb9); box-shadow:0 12px 24px rgba(0,93,214,.2); cursor:pointer; font:700 .88rem inherit; transition:.2s; }.sign-in:hover { transform:translateY(-2px); box-shadow:0 15px 27px rgba(0,93,214,.28); }.sign-in i { margin-left:9px; }.help-text { margin:24px 0 0; color:#718096; text-align:center; font-size:.76rem; }.security-note { margin:42px 0 0; color:#8b99aa; font-size:.72rem; }.security-note i { margin-right:5px; color:#3385e8; }.mobile-logo { display:none; }
@media (max-width:800px) { .login-page { grid-template-columns:1fr; }.brand-panel { display:none; }.form-panel { min-height:100vh; padding:34px 24px 20px; }.mobile-logo { display:block; align-self:flex-start; }.mobile-logo img { filter:none; width:132px; }.login-card { margin:auto 0; }.security-note { margin:15px 0 0; } }
@media (max-width:420px) { h2 { font-size:2rem; }.form-options { gap:10px; align-items:flex-start; }.form-panel { padding-left:19px; padding-right:19px; } }