/* Landing / sign-in page: African Import & Export Solutions (green, white, gold) */
:root {
  --lp-green: #03A64A;
  --lp-green-dark: #045B00;
  --lp-green-deep: #06321C;
  --lp-gold: #D4A017;
  --lp-gold-light: #F2C94C;
  --lp-ink: #10221D;
  --lp-muted: #5F6F68;
  --lp-line: #DDE7E1;
}

body { background: #fff; color: var(--lp-ink); font-family: "Inter", Arial, sans-serif; }

.lp { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 0.9fr; }

/* ---------- brand side ---------- */
.lp-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 36px clamp(24px, 5vw, 64px);
  color: #fff;
  background:
    radial-gradient(circle at 85% 12%, rgba(212, 160, 23, 0.28), transparent 38%),
    linear-gradient(150deg, var(--lp-green-deep) 0%, var(--lp-green-dark) 55%, var(--lp-green) 130%);
}
.lp-brand::after {           /* gold ring echoing the logo's globe arrows */
  content: ""; position: absolute; right: -140px; bottom: -160px; width: 440px; height: 440px;
  border: 60px solid rgba(212, 160, 23, 0.16); border-radius: 50%; pointer-events: none;
}

.lp-logo {
  align-self: flex-start; display: inline-flex; align-items: center;
  background: #fff; border-radius: 14px; padding: 8px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.lp-logo img { height: 70px; width: auto; display: block; }

.lp-hero { max-width: 560px; position: relative; z-index: 1; }
.lp-eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lp-green-deep); background: var(--lp-gold-light); border-radius: 999px; padding: 5px 12px; margin-bottom: 16px;
}
.lp-hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.1; margin: 0 0 12px; }
.lp-tagline { font-size: 1.05rem; color: var(--lp-gold-light); font-weight: 500; margin: 0; }

.lp-features {
  list-style: none; margin: 0; padding: 0; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 620px;
}
.lp-features li {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px; padding: 14px;
}
.lp-features i {
  flex: 0 0 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--lp-gold); color: var(--lp-green-deep); font-size: 1.1rem;
}
.lp-features strong { display: block; font-size: 0.95rem; }
.lp-features span { display: block; font-size: 0.8rem; color: rgba(255, 255, 255, 0.78); margin-top: 2px; }

.lp-stats {
  display: flex; gap: clamp(18px, 4vw, 48px); flex-wrap: wrap; position: relative; z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 20px;
}
.lp-stats strong { display: block; font-size: 1.6rem; font-weight: 800; color: var(--lp-gold-light); }
.lp-stats span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); }

/* ---------- sign-in side ---------- */
.lp-form { display: grid; place-items: center; padding: 32px 20px; background: #fff; }
.lp-card { width: 100%; max-width: 400px; }
.lp-card-logo { display: none; margin-bottom: 20px; }
.lp-card-logo img { height: 70px; width: auto; }
.lp-card h2 { font-size: 1.8rem; font-weight: 800; margin: 0 0 4px; color: var(--lp-green-deep); }
.lp-muted { color: var(--lp-muted); margin-bottom: 24px; }
.lp-card .form-label { font-weight: 600; font-size: 0.88rem; }
.lp-card .form-control { padding: 12px 14px; border-radius: 10px; border-color: var(--lp-line); }
.lp-card .form-control:focus { border-color: var(--lp-green); box-shadow: 0 0 0 0.2rem rgba(3, 166, 74, 0.2); }
.lp-link { color: var(--lp-green); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.lp-link:hover { color: var(--lp-green-dark); text-decoration: underline; }

.password-control { position: relative; }
.password-control .form-control { padding-right: 70px; }
.show-password {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--lp-green); font-weight: 600; font-size: 0.85rem; padding: 4px 8px;
}

.lp-btn {
  background: var(--lp-green); color: #fff; font-weight: 700; padding: 12px; border-radius: 10px;
  border: 0; border-bottom: 3px solid var(--lp-gold);
}
.lp-btn:hover, .lp-btn:focus { background: var(--lp-green-dark); color: #fff; }

.lp-foot { margin-top: 28px; font-size: 0.78rem; color: var(--lp-muted); text-align: center; }
.lp-foot a { color: var(--lp-green); text-decoration: none; }

/* ---------- small screens ---------- */
@media (max-width: 960px) {
  .lp { grid-template-columns: 1fr; }
  .lp-brand { order: 2; gap: 24px; }
  .lp-logo { display: none; }
  .lp-card-logo { display: block; }
}
@media (max-width: 560px) {
  .lp-features { grid-template-columns: 1fr; }
  .lp-brand { padding: 28px 16px; }
}