*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
:root {
  --green-dark:   #0d4a2e;
  --green-mid:    #1a7a4a;
  --green-bright: #25c96f;
  --green-light:  #e6f9ef;
  --blue-main:    #1a6ec7;
  --blue-light:   #e8f2ff;
  --red-main:     #c0392b;
  --red-light:    #fff0f0;
  --text-dark:    #0a1f14;
  --text-muted:   #4a6a57;
  --card-bg:      #ffffff;
  --radius:       20px;
  --shadow:       0 8px 40px rgba(13, 74, 46, 0.10);
}
 
.loan-section {
  background: linear-gradient(135deg, #f0faf4 0%, #e6f9ef 60%, #d4f4e2 100%);
  padding: 60px 20px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.loan-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  max-width: 1100px;
  width: 100%;
}
 
.loan-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 30px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(37, 201, 111, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeUp 0.6s ease both;
}
 
.loan-card:nth-child(1) { animation-delay: 0.10s; }
.loan-card:nth-child(2) { animation-delay: 0.22s; }
.loan-card:nth-child(3) { animation-delay: 0.34s; }
 
.loan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(13, 74, 46, 0.16);
}
 
.loan-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
}
 
.blue-accent  { background: linear-gradient(90deg, #1a6ec7, #5ab4ff); }
.green-accent { background: linear-gradient(90deg, var(--green-mid), var(--green-bright)); }
.red-accent   { background: linear-gradient(90deg, #c0392b, #ff6b6b); }
 
.loan-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}
 
.blue-icon  { background: var(--blue-light); }
.green-icon { background: var(--green-light); }
.red-icon   { background: var(--red-light); }
 
.loan-card h3 {
  font-family: Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}
 
.loan-card p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
}
 
.loan-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
 
.loan-tag {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
}
 
.blue-tag  { background: var(--blue-light);  color: var(--blue-main); }
.green-tag { background: var(--green-light); color: var(--green-mid); }
.red-tag   { background: var(--red-light);   color: var(--red-main); }
 
.loan-btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
 
.loan-btn {
  flex: 1;
  min-width: 120px;
  padding: 13px 20px;
  border-radius: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  display: inline-block;
  transition: filter 0.2s ease, transform 0.2s ease;
}
 
.blue-btn  { background: linear-gradient(135deg, #1a6ec7, #2d8def); }
.green-btn { background: linear-gradient(135deg, var(--green-mid), var(--green-bright)); }
.red-btn   { background: linear-gradient(135deg, #c0392b, #e03131); }
 
.loan-btn:hover {
  filter: brightness(1.12);
  transform: scale(1.02);
}
 
.copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid #d1e8db;
  background: transparent;
  color: var(--text-muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
 
.copy-btn:hover {
  background: var(--green-light);
  border-color: var(--green-bright);
  color: var(--green-dark);
}
 
.copy-btn.copied {
  background: var(--green-light);
  border-color: var(--green-bright);
  color: var(--green-mid);
}
 
.copy-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
 
.copy-btn:hover svg {
  transform: scale(1.15);
}
 
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--green-dark);
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(13, 74, 46, 0.35);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
 
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
 
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
@media (max-width: 600px) {
  .loan-btn-row { flex-direction: column; }
  .loan-btn, .copy-btn { width: 100%; justify-content: center; }
  .loan-card { padding: 28px 22px 24px; }
}