@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@500;600&display=swap');

:root{
  --navy:#061a38;
  --navy-2:#0b2348;
  --gold:#c99b43;
  --gold-soft:#e7c987;
  --ink:#071a38;
  --muted:#6f7b8d;
  --border:#d9dee7;
  --white:#fff;
  --offwhite:#fbfcfe;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;font-family:"DM Sans",Arial,sans-serif;color:var(--ink)}
body{background:var(--offwhite)}
button,input{font:inherit}

.login-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(360px,46%) 1fr;
  overflow:hidden;
}

/* LEFT */
.brand-panel{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(3,18,43,.96) 0%,rgba(4,22,47,.82) 48%,rgba(2,16,35,.98) 100%),
    url("../assets/statue-bg.jpg") center bottom/cover no-repeat;
}
.brand-panel:after{
  content:"";
  position:absolute;
  right:-70px;top:-5%;
  width:125px;height:110%;
  background:var(--offwhite);
  clip-path:polygon(45% 0,100% 0,100% 100%,0 100%);
  z-index:3;
}
.brand-pattern{
  position:absolute;inset:0;opacity:.18;
  background-image:radial-gradient(var(--gold) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(to right,black,transparent 72%);
}
.brand-content{
  position:relative;z-index:4;height:100%;
  min-height:100vh;
  padding:58px 92px 42px 10%;
  display:flex;flex-direction:column;
}
.logo{
  width:max-content;
  font-family:"Playfair Display",serif;
  font-size:54px;line-height:.9;letter-spacing:-2px;
}
.logo span{color:#fff}
.logo i{font-style:normal;color:var(--gold);font-weight:400}
.logo strong{color:var(--gold);font-weight:500}
.logo small{
  display:block;
  margin:14px auto 0;
  width:max-content;
  font-family:"DM Sans",sans-serif;
  font-size:12px;letter-spacing:7px;font-weight:500;
  color:#fff;
}
.logo:after{
  content:"";
  display:block;width:175px;height:1px;
  margin:-7px auto 0;
  background:var(--gold);
  opacity:.75;
}

.brand-copy{
  margin:auto 0 48px;
  max-width:410px;
  text-align:center;
}
.quote-mark{
  color:var(--gold);font-family:Georgia,serif;
  font-size:52px;height:36px;line-height:1;
}
.brand-copy p{
  font-family:"Playfair Display",serif;
  font-size:19px;line-height:1.55;
  color:#f5f6f9;
}
.brand-copy p+p{
  font-family:"DM Sans",sans-serif;
  font-size:16px;margin-top:3px;
}
.gold-line{display:block;width:55px;height:2px;background:var(--gold);margin:18px auto 0}

.benefits{
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:520px;border-top:1px solid rgba(255,255,255,.16);
  padding-top:20px;
}
.benefit{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-height:60px;
  border-right:1px solid rgba(255,255,255,.14);
  color:#f6f7fa;text-align:center;font-size:12px;line-height:1.45;
}
.benefit:last-child{border-right:0}
.benefit-icon{font-size:25px;color:#fff;line-height:1;font-weight:300}

/* RIGHT */
.form-panel{
  position:relative;min-height:100vh;
  background:#fff;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:70px 8% 100px;
}
.architecture{
  position:absolute;width:250px;height:420px;opacity:.065;
  border:3px solid var(--navy);border-bottom:0;
  border-radius:120px 120px 0 0;
}
.architecture:before,.architecture:after{
  content:"";position:absolute;bottom:0;width:32px;height:330px;
  border:3px solid var(--navy);border-bottom:0;
}
.architecture:before{left:30px}.architecture:after{right:30px}
.architecture-left{left:-100px;top:80px}
.architecture-right{right:-100px;bottom:20px;transform:scale(.9)}
.dot-pattern{
  position:absolute;right:35px;bottom:65px;width:150px;height:150px;
  opacity:.45;
  background-image:radial-gradient(var(--gold-soft) 1.2px,transparent 1.2px);
  background-size:13px 13px;
  mask-image:radial-gradient(circle,black 10%,transparent 70%);
}
.login-card{position:relative;z-index:5;width:min(100%,560px)}
.login-heading{text-align:center;margin-bottom:48px}
.login-heading h1{
  font-family:"Playfair Display",serif;
  font-size:42px;line-height:1.15;font-weight:600;
}
.heading-line{display:block;width:58px;height:2px;background:var(--gold);margin:18px auto 13px}
.login-heading p{font-size:15px;color:var(--muted)}

.field{margin-bottom:22px}
.field label{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap
}
.input-wrap{position:relative}
.input-wrap input{
  width:100%;height:68px;border:1px solid var(--border);
  border-radius:7px;background:rgba(255,255,255,.95);
  padding:0 55px 0 70px;color:var(--ink);font-size:15px;
  outline:none;transition:.2s ease;
}
.input-wrap input::placeholder{color:#8792a2}
.input-wrap input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,155,67,.10);
}
.input-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:4px;
  background:var(--navy);display:grid;place-items:center;z-index:2;
}
.input-icon svg,.eye-btn svg{
  width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.eye-btn{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  border:0;background:none;cursor:pointer;padding:7px;
}
.eye-btn svg{stroke:var(--navy);width:20px;height:20px}

.error{display:block;color:#a94442;font-size:12px;margin:7px 3px 0;min-height:0}
.form-options{
  display:flex;align-items:center;justify-content:space-between;
  margin:4px 1px 25px;font-size:14px;
}
.remember{display:flex;align-items:center;gap:10px;cursor:pointer}
.remember input{position:absolute;opacity:0;pointer-events:none}
.checkmark{
  width:20px;height:20px;border-radius:4px;background:var(--navy);
  position:relative;display:grid;place-items:center;
}
.checkmark:after{
  content:"";width:9px;height:5px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);
}
.remember input:not(:checked)+.checkmark{background:#fff;border:1px solid var(--border)}
.remember input:not(:checked)+.checkmark:after{display:none}
.forgot{color:#bb8430;text-decoration:none}
.forgot:hover{text-decoration:underline}

.login-btn{
  width:100%;height:64px;border:0;border-radius:7px;
  background:var(--navy);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:15px;
  font-size:16px;font-weight:600;position:relative;overflow:hidden;
  transition:.2s ease;
}
.login-btn:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-100%);transition:.45s ease;
}
.login-btn:hover{background:#0a2750;transform:translateY(-1px)}
.login-btn:hover:after{transform:translateX(100%)}
.login-btn svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.form-message{text-align:center;font-size:13px;color:#6a7688;margin-top:15px;min-height:18px}

.page-footer{
  position:absolute;left:7%;right:7%;bottom:28px;
  border-top:1px solid #e8ebf0;padding-top:18px;
  display:flex;justify-content:space-between;align-items:center;
  color:#778296;font-size:12px;z-index:5;
}
.secure-note{display:flex;align-items:center;gap:9px}
.shield{
  width:21px;height:21px;border:1px solid #9aa5b4;border-radius:50%;
  display:grid;place-items:center;font-size:11px;
}

/* RESPONSIVE */
@media (max-width:1100px){
  .login-page{grid-template-columns:42% 58%}
  .brand-content{padding-left:7%;padding-right:55px}
  .logo{font-size:45px}
  .brand-copy p{font-size:17px}
  .benefit{font-size:10px}
  .form-panel{padding-left:7%;padding-right:7%}
}
@media (max-width:800px){
  .login-page{display:block;overflow:auto}
  .brand-panel{
    min-height:300px;height:300px;
    background-position:center 57%;
  }
  .brand-panel:after{display:none}
  .brand-content{
    min-height:300px;padding:28px 28px 22px;
    display:block;
  }
  .logo{font-size:36px}
  .logo small{font-size:9px;letter-spacing:5px;margin-top:9px}
  .logo:after{width:120px}
  .brand-copy{
    margin:35px auto 0;max-width:500px;
  }
  .quote-mark{font-size:35px;height:25px}
  .brand-copy p{font-size:15px;line-height:1.4}
  .brand-copy p+p{font-size:13px}
  .gold-line{margin-top:10px}
  .benefits{display:none}
  .form-panel{
    min-height:calc(100vh - 300px);
    padding:55px 28px 95px;
  }
  .login-heading{margin-bottom:35px}
  .login-heading h1{font-size:34px}
  .page-footer{
    left:28px;right:28px;bottom:22px;
    flex-direction:column;gap:8px;text-align:center;
  }
  .architecture{opacity:.035}
}
@media (max-width:480px){
  .brand-panel{height:255px;min-height:255px}
  .brand-content{min-height:255px;padding:24px 20px}
  .brand-copy{margin-top:27px}
  .brand-copy p{font-size:14px}
  .brand-copy p+p{font-size:12px}
  .form-panel{
    min-height:calc(100vh - 255px);
    padding:45px 20px 110px;
  }
  .login-heading h1{font-size:30px}
  .login-heading p{font-size:13px}
  .input-wrap input{height:60px;padding-left:63px}
  .input-icon{width:34px;height:34px;left:12px}
  .input-icon svg{width:18px;height:18px}
  .login-btn{height:58px}
  .form-options{font-size:12px}
  .checkmark{width:18px;height:18px}
  .forgot{font-size:12px}
  .page-footer{font-size:10px}
}