/*
  Backstop Fintech Crypto Lending Website Styles

  This stylesheet defines a dark, neon‑inspired theme for the Backstop
  website. It uses CSS variables to centralize the colour palette and
  typography choices so that tweaks across the entire site are easy. The
  layout is responsive, with media queries tuning certain dimensions for
  smaller screens.

  Headings use the Space Grotesk typeface (or a fallback) while body
  text uses Inter. If the fonts aren’t available the browser will
  gracefully fall back to generic sans‑serif.
*/

/* Colour palette */
:root {
  /* Light theme variables reminiscent of Polymarket's palette */
  --bg-color: #FAFBFC;
  --panel-bg: rgba(255, 255, 255, 0.8);
  --accent-green: #0077FF; /* repurposed as primary blue accent */
  --accent-purple: #A259FF; /* secondary purple accent */
  --text-white: #0E1A2B; /* now dark text */
  --text-gray: #5A6B86;
  --data-blue: #00A3FF;
  --border-color: #E0E6F0;
  --max-content-width: 1200px;
}

/* Global resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
}

header .logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--accent-green);
}

nav a {
  margin-left: 24px;
  font-size: 0.95rem;
  color: var(--text-gray);
  text-decoration: none;
  transition: color 0.25s;
}

nav a:hover,
nav a.active {
  color: var(--accent-green);
}

/* Hero Section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 90vh;
  padding-top: 100px;
  background: radial-gradient(circle at 50% 50%, rgba(0, 119, 255, 0.15), rgba(250, 251, 252, 1) 80%);
}

.hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3rem;
  margin-bottom: 16px;
  line-height: 1.2;
}

.hero p {
  font-size: 1.25rem;
  color: var(--text-gray);
  max-width: 720px;
  margin-bottom: 32px;
}

.hero .buttons {
  display: flex;
  gap: 16px;
}

.btn {
  padding: 12px 28px;
  border-radius: 999px;
  border: 2px solid var(--accent-green);
  background: transparent;
  color: var(--accent-green);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
  text-decoration: none;
  display: inline-block;
}

.btn:hover {
  background: var(--accent-green);
  color: var(--bg-color);
  box-shadow: 0 0 8px var(--accent-green);
}

.btn-purple {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

.btn-purple:hover {
  background: var(--accent-purple);
  color: var(--bg-color);
  box-shadow: 0 0 8px var(--accent-purple);
}

/* Wallet connect button */
.wallet-btn {
  margin-left: 24px;
  padding: 8px 20px;
  border-radius: 999px;
  border: 2px solid var(--accent-green);
  background: transparent;
  color: var(--accent-green);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.wallet-btn:hover {
  background: var(--accent-green);
  color: var(--bg-color);
  box-shadow: 0 0 8px var(--accent-green);
}

/* Metrics section on homepage */
.metrics {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 80px 20px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
  text-align: center;
}

.metric-card {
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
}

.metric-card i {
  font-size: 1.5rem;
  color: var(--accent-green);
  margin-bottom: 8px;
}

.metric-card .metric-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.metric-card .metric-label {
  color: var(--text-gray);
  font-size: 0.85rem;
}

/* Section containers */
section {
  padding: 80px 20px;
  max-width: var(--max-content-width);
  margin: 0 auto;
}

section h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  margin-bottom: 24px;
}

section p {
  color: var(--text-gray);
  font-size: 1rem;
  margin-bottom: 16px;
}

/* Comparison section on homepage */
.comparison {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.comparison .col {
  flex: 1 1 300px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
}

.comparison .col h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.comparison .col ul {
  list-style: none;
}

.comparison .col ul li {
  padding: 6px 0;
  font-size: 0.95rem;
}

.comparison .col ul li::before {
  content: '\f111'; /* Font Awesome circle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 8px;
  color: var(--accent-purple);
  font-size: 0.45rem;
}

/* Who It's For section */
.who-for {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.who-for .col {
  flex: 1 1 300px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  text-align: center;
}

.who-for .col i {
  font-size: 2rem;
  color: var(--accent-purple);
  margin-bottom: 12px;
}

.who-for .col h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.who-for .col p {
  font-size: 0.95rem;
  color: var(--text-gray);
}

/* Benefits section on homepage */
.benefits-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  justify-content: space-between;
}

.benefit-card {
  flex: 1 1 220px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  padding: 24px;
  text-align: center;
}

.benefit-card i {
  font-size: 2rem;
  color: var(--accent-green);
  margin-bottom: 12px;
}

.benefit-card h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.benefit-card p {
  font-size: 0.9rem;
  color: var(--text-gray);
}

/* Get Started section on homepage */
.get-started {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  justify-content: space-between;
}

.step-card {
  flex: 1 1 260px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  padding: 24px;
  text-align: center;
  transition: transform 0.2s;
}

.step-card:hover {
  transform: translateY(-4px);
}

.step-card i {
  font-size: 2rem;
  color: var(--accent-purple);
  margin-bottom: 12px;
}

.step-card h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.step-card p {
  font-size: 0.9rem;
  color: var(--text-gray);
}

/* How It Works cards on homepage */
.how-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  justify-content: space-between;
}

.how-card {
  flex: 1 1 260px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  padding: 24px;
  text-align: center;
  transition: transform 0.2s;
}

.how-card:hover {
  transform: translateY(-4px);
}

.how-card i {
  font-size: 2rem;
  color: var(--accent-green);
  margin-bottom: 12px;
}

.how-card h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.how-card p {
  font-size: 0.9rem;
  color: var(--text-gray);
}

/* How It Works page */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  margin-top: 32px;
}

.step {
  flex: 1 1 220px;
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  text-align: center;
  position: relative;
}

.step i {
  font-size: 2rem;
  color: var(--accent-green);
  margin-bottom: 16px;
}

.step h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.step p {
  font-size: 0.9rem;
  color: var(--text-gray);
}

/* Horizontal connector arrow between steps on How It Works */
.steps .step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -26px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--accent-green);
}

/* Info cards on How It Works page */
.info-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
  justify-content: space-between;
}
.info-card {
  flex: 1 1 260px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  padding: 24px;
  text-align: center;
}
.info-card i {
  font-size: 2rem;
  color: var(--accent-purple);
  margin-bottom: 12px;
}
.info-card h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.info-card p {
  font-size: 0.9rem;
  color: var(--text-gray);
}

/* Borrower Portal page */
.dashboard {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.glass-panel {
  width: 100%;
  max-width: 600px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.glass-panel h3 {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 16px;
  font-size: 1.5rem;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: var(--text-gray);
}

.form-group select,
.form-group input[type="range"],
.form-group input[type="number"] {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  /* Use a lighter background and darker text for readability on white theme */
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-white);
  outline: none;
}

.form-group input[type="range"] {
  height: 4px;
  background: var(--border-color);
  appearance: none;
}

.form-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-green);
  cursor: pointer;
  box-shadow: 0 0 4px var(--accent-green);
}

.loan-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.loan-card {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  text-align: center;
  cursor: pointer;
}

.loan-card h4 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.loan-card span {
  font-size: 0.9rem;
  color: var(--text-gray);
}

.loan-card i {
  font-size: 1.6rem;
  color: var(--accent-purple);
  margin-bottom: 8px;
}

/* Selected loan card highlight */
.loan-card.selected {
  border-color: var(--accent-green);
  background: rgba(0, 119, 255, 0.08);
}

.loan-options {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.loan-options .value-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.loan-options .value-display span {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--text-gray);
}

.accept-btn {
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  border: 2px solid var(--accent-purple);
  background: transparent;
  color: var(--accent-purple);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
}

.accept-btn:hover {
  background: var(--accent-purple);
  color: var(--bg-color);
  box-shadow: 0 0 8px var(--accent-purple);
}

/* Application panel on customer demo */
.application-panel {
  width: 100%;
  max-width: 600px;
  margin-top: 40px;
  padding: 32px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--panel-bg);
  backdrop-filter: blur(8px);
}
.application-panel h3 {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 16px;
  font-size: 1.5rem;
}
.application-desc {
  color: var(--text-gray);
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.application-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-gray);
}
.app-field i {
  color: var(--accent-purple);
}
.app-field strong {
  color: var(--text-white);
  margin-left: 4px;
}

/* Investor DApp page */
.dapp-container {
  margin-top: 80px;
  padding: 0 20px;
}

.topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 24px;
}

.wallet {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  color: var(--text-gray);
  display: flex;
  align-items: center;
  gap: 8px;
}

.token-selector select {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  color: var(--text-white);
  outline: none;
}

.tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

.tab-btn {
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  color: var(--text-gray);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.tab-btn.active {
  background: var(--accent-green);
  color: var(--bg-color);
  border-color: var(--accent-green);
}

.loan-feed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.loan-feed .loan-card {
  position: relative;
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
}

.loan-feed .loan-card h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.loan-feed .loan-card .details {
  font-size: 0.85rem;
  color: var(--text-gray);
  margin-bottom: 12px;
  line-height: 1.4;
}

.loan-feed .loan-card .risk {
  font-size: 0.75rem;
  margin-bottom: 8px;
  color: var(--accent-green);
}

.loan-feed .loan-card button {
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--accent-purple);
  background: transparent;
  color: var(--accent-purple);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
}

.loan-feed .loan-card button:hover {
  background: var(--accent-purple);
  color: var(--bg-color);
  box-shadow: 0 0 6px var(--accent-purple);
}

/* Pagination controls for loan feed */
.pagination-controls {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pagination-controls button {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--text-gray);
  cursor: pointer;
  font-size: 0.9rem;
  min-width: 36px;
}

.pagination-controls button.active {
  background: var(--accent-green);
  color: var(--bg-color);
  border-color: var(--accent-green);
}

.pagination-controls button:hover {
  background: var(--accent-green);
  color: var(--bg-color);
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  z-index: 2000;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  width: 90%;
  max-width: 400px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  backdrop-filter: blur(8px);
  position: relative;
}

.modal-content h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.modal-content .close-btn {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-gray);
}

.modal-content input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-white);
  outline: none;
}

.modal-content .projected,
.modal-content .schedule {
  font-size: 0.85rem;
  color: var(--text-gray);
  margin-bottom: 8px;
}

.modal-content .confirm-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid var(--accent-green);
  background: transparent;
  color: var(--accent-green);
  cursor: pointer;
  transition: background 0.3s;
  width: 100%;
}

.modal-content .confirm-btn:hover {
  background: var(--accent-green);
  color: var(--bg-color);
}

/* Completed loans list and returns graph */
.completed-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.completed-item {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  font-size: 0.85rem;
}

.returns-chart {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* Tokenomics page */
.icon-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
}

.icon-card {
  flex: 1 1 250px;
  padding: 24px;
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-color);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-card i {
  /* icon tags are no longer used on tokenomics page; retained for fallback */
  font-size: 2.2rem;
  margin-bottom: 12px;
  color: var(--accent-green);
}

/* Circular badge used in tokenomics cards */
.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(57, 255, 20, 0.1);
  border: 2px solid var(--accent-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-green);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.icon-card h4 {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 8px;
}

.icon-card p {
  font-size: 0.9rem;
  color: var(--text-gray);
}

.chart-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 32px;
}

.infographic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
}

.infographic span {
  font-size: 1.1rem;
}

.token-address {
  font-family: monospace;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  display: inline-block;
  margin-top: 16px;
}

/* Info bubbles on customer demo page */
.info-bubble {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-gray);
  margin-top: 8px;
  position: relative;
}
.info-bubble::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent var(--panel-bg) transparent;
}

/* FAQ page */
.accordion {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.accordion-item {
  border-bottom: 1px solid var(--border-color);
}

.accordion-header {
  padding: 16px;
  cursor: pointer;
  position: relative;
  font-size: 1.1rem;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--accent-green);
  transition: transform 0.3s;
}

.accordion-item.active .accordion-header::after {
  transform: rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 16px;
}

.accordion-content p {
  padding: 12px 0;
  font-size: 0.95rem;
  color: var(--text-gray);
}

/* Contact page */
.contact-form {
  max-width: 600px;
  margin: 80px auto 40px;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
}

.contact-form h3 {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 16px;
  font-size: 1.6rem;
  text-align: center;
}

.contact-form .form-group input,
.contact-form .form-group textarea {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-white);
  resize: vertical;
  outline: none;
}

.contact-form button {
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  border: 2px solid var(--accent-green);
  background: transparent;
  color: var(--accent-green);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.contact-form button:hover {
  background: var(--accent-green);
  color: var(--bg-color);
  box-shadow: 0 0 8px var(--accent-green);
}

.calendly-wrapper {
  margin-top: 32px;
  width: 100%;
  max-width: 600px;
  height: 500px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header {
    padding: 0 16px;
  }
  .hero h1 {
    font-size: 2.2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .metrics {
    padding-top: 40px;
    gap: 16px;
  }
  .steps {
    flex-direction: column;
  }
  .loan-options {
    flex-direction: column;
  }
  .tabs {
    flex-wrap: wrap;
  }
  .icon-cards {
    flex-direction: column;
  }
}