:root {
   --navy: #0B1F3A;
   --navy-deep: #071528;
   --gold: #C9974D;
   --gold-soft: #E4C48C;
   --paper: #F7F5F1;
   --slate: #5A6472;
   --mint: #2E7D5B;
 }

 * {
   box-sizing: border-box;
 }

 html,
 body {
   height: 100%;
 }

 body {
   font-family: 'Inter', sans-serif;
   color: var(--navy);
   background: var(--paper);
 }

 .brand-serif {
   font-family: 'Fraunces', serif;
 }

 .split-wrap {
   min-height: 100vh;
 }

 /* ---------- LEFT PANEL ---------- */
 .panel-left {
   background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 55%, #12315c 100%);
   position: relative;
   overflow: hidden;
   color: var(--paper);
   padding: 4rem 3.5rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 100vh;
 }

 .panel-left::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
     radial-gradient(circle at 15% 20%, rgba(201, 151, 77, 0.10) 0%, transparent 40%),
     radial-gradient(circle at 85% 90%, rgba(201, 151, 77, 0.08) 0%, transparent 45%);
   pointer-events: none;
 }

 .brand-mark {
   display: flex;
   align-items: center;
   gap: .6rem;
   letter-spacing: .04em;
   font-weight: 600;
   z-index: 2;
   position: relative;
 }

 .brand-mark .mark {
   width: 34px;
   height: 34px;
   border: 1.5px solid var(--gold);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Fraunces', serif;
   font-size: 1.05rem;
   color: var(--gold-soft);
 }

 .panel-copy {
   z-index: 2;
   position: relative;
   max-width: 460px;
 }

 .panel-eyebrow {
   color: var(--gold-soft);
   font-size: .78rem;
   letter-spacing: .18em;
   text-transform: uppercase;
   font-weight: 600;
   margin-bottom: 1.1rem;
 }

 .panel-headline {
   font-family: 'Fraunces', serif;
   font-weight: 500;
   font-size: clamp(2rem, 3vw, 2.7rem);
   line-height: 1.15;
   margin-bottom: 1.1rem;
 }

 .panel-sub {
   color: rgba(247, 245, 241, 0.72);
   font-size: 1rem;
   line-height: 1.6;
   margin-bottom: 2.4rem;
 }

 /* Signature element: animated growth-line chart representing portfolio/loan growth */
 .growth-chart {
   width: 100%;
   height: 190px;
   z-index: 2;
   position: relative;
 }

 .growth-line {
   stroke-dasharray: 900;
   stroke-dashoffset: 900;
   animation: draw 2.6s ease forwards .3s;
 }

 .growth-dot {
   opacity: 0;
   animation: fadeIn .6s ease forwards 2.6s;
 }

 @keyframes draw {
   to {
     stroke-dashoffset: 0;
   }
 }

 @keyframes fadeIn {
   to {
     opacity: 1;
   }
 }

 .stat-row {
   display: flex;
   gap: 2.2rem;
   z-index: 2;
   position: relative;
   padding-top: 1.6rem;
   border-top: 1px solid rgba(247, 245, 241, 0.14);
 }

 .stat-row .num {
   font-family: 'Fraunces', serif;
   font-size: 1.5rem;
   color: var(--gold-soft);
   line-height: 1;
 }

 .stat-row .lbl {
   font-size: .74rem;
   color: rgba(247, 245, 241, 0.6);
   letter-spacing: .03em;
   margin-top: .3rem;
 }

 .panel-footer {
   z-index: 2;
   position: relative;
   font-size: .78rem;
   color: rgba(247, 245, 241, 0.45);
 }

 /* ---------- RIGHT PANEL ---------- */
 .panel-right {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 3rem 2rem;
   background: var(--paper);
 }

 .form-shell {
   width: 100%;
   max-width: 400px;
 }

 .form-shell h2 {
   font-family: 'Fraunces', serif;
   font-weight: 500;
   font-size: 1.9rem;
   margin-bottom: .35rem;
 }

 .form-shell .lead-sm {
   color: var(--slate);
   font-size: .92rem;
   margin-bottom: 2.2rem;
 }

 .form-label {
   font-size: .8rem;
   font-weight: 600;
   letter-spacing: .02em;
   color: var(--navy);
   margin-bottom: .4rem;
 }

 .form-control {
   border: 1.5px solid #E1DDD3;
   border-radius: 8px;
   padding: .68rem .9rem;
   font-size: .94rem;
   background: #fff;
 }

 .form-control:focus {
   border-color: var(--navy);
   box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.08);
 }

 .form-control.is-invalid {
   border-color: #B3453A;
 }

 .invalid-feedback {
   font-size: .78rem;
 }

 .pass-wrap {
   position: relative;
 }

 .toggle-pass {
   position: absolute;
   right: .75rem;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   color: var(--slate);
   font-size: .78rem;
   font-weight: 600;
   cursor: pointer;
   letter-spacing: .02em;
 }

 .toggle-pass:hover {
   color: var(--navy);
 }

 .form-check-label {
   font-size: .86rem;
   color: var(--slate);
 }

 .link-gold {
   color: var(--navy);
   font-size: .86rem;
   font-weight: 600;
   text-decoration: none;
   border-bottom: 1.5px solid var(--gold);
   padding-bottom: 1px;
 }

 .link-gold:hover {
   color: var(--navy);
 }

 .btn-navy {
   background: var(--navy);
   color: var(--paper);
   border: none;
   border-radius: 8px;
   padding: .78rem 1rem;
   font-weight: 600;
   font-size: .95rem;
   letter-spacing: .02em;
   transition: background .18s ease, transform .12s ease;
 }

 .btn-navy:hover {
   background: var(--navy-deep);
   color: var(--paper);
 }

 .btn-navy:active {
   transform: scale(0.99);
 }

 .divider-txt {
   display: flex;
   align-items: center;
   gap: .8rem;
   color: var(--slate);
   font-size: .78rem;
   margin: 1.6rem 0;
 }

 .divider-txt::before,
 .divider-txt::after {
   content: "";
   flex: 1;
   height: 1px;
   background: #E1DDD3;
 }

 .btn-outline-slate {
   border: 1.5px solid #E1DDD3;
   color: var(--navy);
   border-radius: 8px;
   font-size: .88rem;
   font-weight: 600;
   padding: .62rem 1rem;
   background: #fff;
   transition: border-color .15s ease, background .15s ease;
 }

 .btn-outline-slate:hover {
   border-color: var(--navy);
   background: #fff;
   color: var(--navy);
 }

 .signup-txt {
   font-size: .88rem;
   color: var(--slate);
   text-align: center;
   margin-top: 2rem;
 }

 .alert-success-min {
   display: none;
   background: rgba(46, 125, 91, 0.1);
   border: 1px solid rgba(46, 125, 91, 0.3);
   color: var(--mint);
   font-size: .86rem;
   border-radius: 8px;
   padding: .7rem .9rem;
   margin-bottom: 1.2rem;
 }

 @media (max-width: 991.98px) {
   .panel-left {
     display: none;
   }
 }

@media (prefers-reduced-motion: reduce) {
  .growth-line {
    animation: none;
    stroke-dashoffset: 0;
  }

  .growth-dot {
    animation: none;
    opacity: 1;
  }
}