:root {
      --green:      #009B3A;
      --green-lt:   #00D65B;
      --gold:       #C9A84C;
      --gold-lt:    #E8C96A;
      --emerald:    #10b981;
      --emerald-dk: #059669;
      --emerald-xdk:#064e3b;
      --cream:      #fafaf7;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { height: 100%; }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: var(--cream);
      display: flex;
      align-items: stretch;
      min-height: 100vh;
    }

    /* ════════════════════════════════
       LEFT — BRAND CANVAS
    ════════════════════════════════ */
    .brand-side {
      width: 52%;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #051f12;
    }

    .brand-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,155,58,.22) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 80%, rgba(201,168,76,.1) 0%, transparent 55%),
        radial-gradient(ellipse 100% 100% at 50% 50%, #062e18 0%, #051208 100%);
    }

    .mesh {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
    }

    .orb-1 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(0,214,91,.18), transparent 70%);
      top: -180px; left: -120px;
      animation: drift1 12s ease-in-out infinite;
    }

    .orb-2 {
      width: 360px; height: 360px;
      background: radial-gradient(circle, rgba(201,168,76,.14), transparent 70%);
      bottom: -100px; right: -80px;
      animation: drift2 15s ease-in-out infinite;
    }

    .orb-3 {
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(16,185,129,.2), transparent 70%);
      top: 45%; left: 55%;
      animation: drift3 9s ease-in-out infinite;
    }

    @keyframes drift1 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(40px,30px) scale(1.08); }
    }
    @keyframes drift2 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(-30px,-25px) scale(1.06); }
    }
    @keyframes drift3 {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(-20px,15px) scale(1.1); }
      66%      { transform: translate(15px,-10px) scale(.95); }
    }

    .diagonal-stripe {
      position: absolute;
      top: 0; right: -1px; bottom: 0;
      width: 80px;
      background: linear-gradient(to bottom left, transparent 49.5%, var(--cream) 50%);
      z-index: 10;
    }

    .brand-inner {
      position: relative; z-index: 5;
      display: flex; flex-direction: column;
      height: 100%;
      padding: 3rem 4rem 3rem 3.5rem;
    }

    .logo {
      display: flex; align-items: center; gap: .875rem;
    }

    .logo-mark {
      width: 48px; height: 48px;
      background: linear-gradient(135deg, var(--gold), var(--gold-lt));
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      box-shadow:
        0 0 0 1px rgba(201,168,76,.3),
        0 8px 32px rgba(201,168,76,.3);
      flex-shrink: 0;
    }

    .logo-words { line-height: 1.25; }
    .logo-name { color: #fff; font-weight: 800; font-size: .92rem; letter-spacing: .01em; }
    .logo-tag  { color: rgba(255,255,255,.38); font-size: .68rem; letter-spacing: .04em; }

    .brand-hero { margin: auto 0; padding: 2.5rem 0; }

    .brand-pill {
      display: inline-flex; align-items: center; gap: .5rem;
      border: 1px solid rgba(201,168,76,.3);
      background: rgba(201,168,76,.07);
      color: var(--gold-lt);
      font-size: .68rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; padding: .35rem 1rem;
      border-radius: 9999px; margin-bottom: 1.75rem;
    }

    .brand-pill-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--gold);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .5; transform: scale(1.4); }
    }

    .brand-heading {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.8rem, 4vw, 4.5rem);
      font-weight: 600;
      color: #fff;
      line-height: 1.08;
      letter-spacing: -.02em;
      margin-bottom: 1.5rem;
    }

    .brand-heading em {
      font-style: italic;
      background: linear-gradient(135deg, var(--gold-lt), var(--gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .brand-desc {
      color: rgba(255,255,255,.45);
      font-size: .88rem;
      line-height: 1.8;
      max-width: 340px;
      margin-bottom: 2.5rem;
    }

    .stats {
      display: flex; gap: 0;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,.03);
      backdrop-filter: blur(10px);
    }

    .stat {
      flex: 1;
      padding: 1.1rem 1.25rem;
      border-right: 1px solid rgba(255,255,255,.08);
    }

    .stat:last-child { border-right: none; }

    .stat-val {
      font-size: 1.6rem; font-weight: 900;
      color: #fff; letter-spacing: -.04em; line-height: 1;
    }

    .stat-val sup { font-size: .9rem; color: var(--gold); vertical-align: super; }

    .stat-lbl {
      font-size: .65rem; color: rgba(255,255,255,.3);
      font-weight: 600; letter-spacing: .04em;
      text-transform: uppercase; margin-top: .35rem;
    }

    .brand-footer {
      display: flex; align-items: center; gap: .625rem;
    }

    .live-badge {
      display: flex; align-items: center; gap: .4rem;
      background: rgba(16,185,129,.12);
      border: 1px solid rgba(16,185,129,.2);
      color: var(--emerald);
      font-size: .65rem; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase; padding: .3rem .65rem;
      border-radius: 9999px;
    }

    .live-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--emerald);
      animation: livePulse 1.5s ease-in-out infinite;
    }

    @keyframes livePulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
      50%      { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
    }

    .brand-footer-text {
      color: rgba(255,255,255,.2); font-size: .7rem;
    }

    /* ════════════════════════════════
       RIGHT — LOGIN FORM
    ════════════════════════════════ */
    .form-side {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 3rem 2.5rem;
      background: var(--cream);
      position: relative;
    }

    .form-side::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--green), var(--emerald) 60%, var(--gold));
    }

    .form-side::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(0,0,0,.025) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
    }

    .form-card {
      width: 100%;
      max-width: 400px;
      position: relative; z-index: 1;
      animation: riseIn .7s cubic-bezier(.22,1,.36,1) both;
    }

    @keyframes riseIn {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .form-eyebrow {
      display: flex; align-items: center; gap: .625rem;
      font-size: .72rem; font-weight: 700; color: var(--emerald-xdk);
      letter-spacing: .08em; text-transform: uppercase;
      margin-bottom: .875rem;
    }

    .form-eyebrow-line {
      width: 28px; height: 2px;
      background: linear-gradient(90deg, var(--green), var(--emerald));
      border-radius: 9999px;
    }

    .form-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.6rem; font-weight: 600;
      color: #0d1f15; line-height: 1.1;
      letter-spacing: -.02em;
      margin-bottom: .625rem;
    }

    .form-sub {
      font-size: .83rem; color: #6b7280; line-height: 1.6;
      margin-bottom: 2.25rem;
    }

    .error-banner {
      display: none;
      align-items: center; gap: .625rem;
      background: #fff5f5; border: 1px solid #fecaca;
      border-left: 4px solid #ef4444;
      border-radius: 10px; padding: .75rem 1rem;
      font-size: .8rem; color: #c53030; font-weight: 600;
      margin-bottom: 1.5rem;
      animation: shake .4s cubic-bezier(.36,.07,.19,.97);
    }

    .error-banner.show { display: flex; }

    @keyframes shake {
      10%, 90% { transform: translateX(-2px); }
      20%, 80% { transform: translateX(3px); }
      30%, 70% { transform: translateX(-3px); }
      40%, 60% { transform: translateX(3px); }
      50%       { transform: translateX(-2px); }
    }

    .field { margin-bottom: 1.1rem; }

    .field-label {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: .45rem;
    }

    .field-label span:first-child {
      font-size: .73rem; font-weight: 700; color: #374151; letter-spacing: .02em;
    }

    .field-hint {
      font-size: .7rem; color: var(--emerald-xdk); font-weight: 600;
      cursor: pointer; text-decoration: none; transition: color .2s;
    }

    .field-hint:hover { color: var(--green); }

    .input-shell {
      position: relative;
      display: flex; align-items: center;
    }

    .input-prefix {
      position: absolute; left: 1rem;
      display: flex; align-items: center; justify-content: center;
      width: 18px; pointer-events: none;
      color: #9ca3af; font-size: .9rem;
      transition: color .25s;
    }

    .field-input {
      width: 100%;
      padding: .85rem 1rem .85rem 2.85rem;
      background: #fff;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      font-size: .875rem; font-family: inherit;
      color: #111827;
      outline: none;
      transition: border-color .25s, box-shadow .25s, background .25s;
      -webkit-appearance: none;
    }

    .field-input::placeholder { color: #c4c9d4; }

    .field-input:focus {
      border-color: var(--emerald);
      background: #fff;
      box-shadow:
        0 0 0 4px rgba(16,185,129,.1),
        0 2px 8px rgba(16,185,129,.08);
    }

    .input-shell:focus-within .input-prefix { color: var(--emerald-xdk); }

    .field-input.has-error {
      border-color: #f87171;
      box-shadow: 0 0 0 4px rgba(248,113,113,.1);
    }

    .eye-toggle {
      position: absolute; right: .875rem;
      background: none; border: none; cursor: pointer;
      color: #c4c9d4; font-size: .9rem; padding: .25rem;
      transition: color .2s; line-height: 1;
    }

    .eye-toggle:hover { color: var(--emerald-xdk); }

    .form-row {
      display: flex; align-items: center; justify-content: space-between;
      margin: 1.35rem 0 1.75rem;
    }

    .check-label {
      display: flex; align-items: center; gap: .5rem;
      font-size: .78rem; color: #4b5563; cursor: pointer;
      user-select: none;
    }

    .check-label input { display: none; }

    .check-box {
      width: 18px; height: 18px; border-radius: 6px;
      border: 1.5px solid #d1d5db;
      background: #fff;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s; flex-shrink: 0;
    }

    .check-label input:checked ~ .check-box {
      background: var(--emerald); border-color: var(--emerald);
    }

    .check-box::after {
      content: '';
      width: 5px; height: 9px;
      border: 2px solid #fff;
      border-top: none; border-left: none;
      transform: rotate(45deg) scale(0);
      transition: transform .15s;
      margin-top: -2px;
    }

    .check-label input:checked ~ .check-box::after { transform: rotate(45deg) scale(1); }

    .btn-submit {
      width: 100%;
      padding: .95rem 1.5rem;
      background: linear-gradient(135deg, #064e3b 0%, var(--green) 60%, var(--emerald) 100%);
      color: #fff;
      border: none; border-radius: 12px;
      font-size: .92rem; font-weight: 800; font-family: inherit;
      cursor: pointer; letter-spacing: .01em;
      display: flex; align-items: center; justify-content: center; gap: .625rem;
      position: relative; overflow: hidden;
      box-shadow:
        0 4px 6px rgba(6,78,59,.15),
        0 10px 28px rgba(0,155,58,.3),
        inset 0 1px 0 rgba(255,255,255,.15);
      transition: all .3s cubic-bezier(.4,0,.2,1);
    }

    .btn-submit::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
      pointer-events: none;
    }

    .btn-submit:hover {
      transform: translateY(-2px);
      box-shadow:
        0 6px 10px rgba(6,78,59,.2),
        0 18px 40px rgba(0,155,58,.38),
        inset 0 1px 0 rgba(255,255,255,.18);
    }

    .btn-submit:active { transform: translateY(0); }

    .btn-submit.loading {
      pointer-events: none;
      background: linear-gradient(135deg, #064e3b, #047857);
    }

    .btn-arrow { transition: transform .3s; }
    .btn-submit:hover .btn-arrow { transform: translateX(3px); }

    .spinner {
      display: none;
      width: 18px; height: 18px;
      border: 2.5px solid rgba(255,255,255,.3);
      border-top-color: #fff; border-radius: 50%;
      animation: spin .65s linear infinite;
    }

    .btn-submit.loading .spinner { display: block; }
    .btn-submit.loading .btn-arrow { display: none; }
    .btn-submit.loading .btn-label { opacity: .75; }

    @keyframes spin { to { transform: rotate(360deg); } }

    .form-divider {
      display: flex; align-items: center; gap: .75rem;
      margin: 1.75rem 0; font-size: .7rem; color: #d1d5db; font-weight: 600;
    }

    .form-divider::before, .form-divider::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    }

    .trust-row {
      display: flex; align-items: center; justify-content: center; gap: 1.25rem;
      flex-wrap: wrap;
    }

    .trust-item {
      display: flex; align-items: center; gap: .35rem;
      font-size: .7rem; color: #9ca3af;
    }

    .trust-icon { font-size: .85rem; }

    .form-bottom {
      text-align: center; margin-top: 2rem;
      font-size: .75rem; color: #9ca3af;
    }

    .form-bottom a {
      color: var(--emerald-xdk); font-weight: 700;
      text-decoration: none; transition: color .2s;
    }

    .form-bottom a:hover { color: var(--green); }

    /* ── RESPONSIVE ── */
    @media (max-width: 860px) {
      body { flex-direction: column; }
      .brand-side { width: 100%; min-height: 260px; flex: none; }
      .brand-inner { padding: 2rem 2rem 3rem; }
      .diagonal-stripe { display: none; }
      .brand-hero { padding: 1rem 0 .5rem; }
      .brand-heading { font-size: 2.4rem; }
      .brand-footer { display: none; }
      .form-side { padding: 2.5rem 1.5rem; }
      .orb-1, .orb-2, .orb-3 { display: none; }
    }

    @media (max-width: 480px) {
      .brand-side { min-height: 220px; }
      .brand-heading { font-size: 2rem; }
      .stats { display: none; }
      .form-title { font-size: 2rem; }
    }