:root {
  /* Updated colour palette for a bright, modern feel.
     Pastel blues and fresh greens keep things inviting and professional.
     Cards and panels live on a white canvas separated by soft borders. */
  /* Colour palette refined for an airy, modern look.  
     A light blue backdrop with fresh green accents makes the site feel calm and inviting.  */
  /*
    The colour palette is tuned for maximum readability and approachability.  
    A clean white background paired with soft greys gives plenty of breathing room,  
    while energetic greens lead the eye to calls‑to‑action without overpowering the content.  
  */
  /* Overhaul palette for a clean, minimalist feel.
     Pure white backgrounds and cool blues create a bright, inviting canvas.
     Blue accents guide the eye while staying calm and professional. */
  --bg: #ffffff;          /* overall page background: pure white */
  --panel: #f6f9fc;       /* navigation and hero backgrounds: off‑white with a hint of blue */
  --card: #ffffff;        /* cards: crisp white */
  --text: #1e293b;        /* deep navy text for contrast */
  --muted: #475569;       /* cool grey for secondary text */
  --accent: #0ea5e9;      /* sky blue for primary actions and links */
  --accent2: #38bdf8;     /* lighter sky blue for gradients and hover effects */
  --primary: #f0f4f8;     /* very pale blue for subtle backgrounds */
  --border: #e2e8f0;      /* light cool border */
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.nav {
  /* Primary navigation bar */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 32px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.3px;
}
.badge {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--primary);
}

/* Navigation link list styling */
.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 24px;
}

.nav-links li {
  position: relative;
}

/* Dropdown menus for navigation items */
.nav-links .dropdown {
  display: none;
  position: absolute;
  top: 36px;
  left: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.nav-links li:hover .dropdown {
  display: block;
}

.nav-links .dropdown a {
  display: block;
  padding: 8px 16px;
  color: var(--text);
  white-space: nowrap;
}

.nav-links .dropdown a:hover {
  background: var(--primary);
  color: var(--accent);
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-links a:hover {
  background: var(--primary);
  color: var(--accent);
}
.btn {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #ffffff;
  border: none;
  /* Increase horizontal padding for a more inviting button */
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  transition: all .2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.07);
}
.btn:hover {
  /* Make the hover state feel more elevated */
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px 0 20px;
  background: var(--primary);
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.hero h1 {
  font-size: 48px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text);
}
.hero p {
  color: var(--muted);
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.5;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  /* Slightly larger padding for a spacious feel */
  padding: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.grid3 { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.grid2 { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kpi {
  text-align: center;
  padding: 16px;
  border-radius: 16px;
  background: var(--primary);
  border: 1px solid var(--border);
  color: var(--text);
}
.kpi .n {
  font-size: 22px;
  font-weight: 700;
}
.footer { margin-top:48px; padding:24px 0; color:var(--muted); border-top:1px solid var(--border); }
.searchbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
input[type="search"],
input[type="text"],
input[type="email"] {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 12px;
  outline: none;
}
.tag {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: var(--primary);
  font-size: 13px;
}
.list { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.item h3 { margin:0 0 6px; }
.item p { color:var(--muted); margin:0; font-size:14px; min-height: 56px; }
.item .tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.item .cta { margin-top:12px; display:flex; gap:8px; }
.notice { font-size:12px; color:#9CA3AF; margin-top:8px; }

/* Special styling for sponsored spotlight card */
.sponsored {
  background: linear-gradient(135deg, rgba(40,180,99,0.25), rgba(88,214,141,0.25));
  border: 2px dashed var(--accent);
}
/* Improve spacing and readability for directory cards */
.item {
  padding: 24px;
  border-radius: 20px;
  transition: box-shadow .15s ease, transform .15s ease;
  cursor: pointer;
}
.item:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.item h3 {
  font-size: 20px;
  margin-top: 0;
}
.item p {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.item .cta a {
  display: block;
  width: 100%;
  text-align: center;
}
.list {
  gap: 24px;
}

/* Referral callouts on directory page */
.referral-cards .card {
  padding: 24px;
}
.referral-card .btn {
  width: 100%;
  margin-top: 16px;
}

/* Feature grid on the home page */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.features .card {
  text-align: left;
  padding: 24px;
  border-radius: 20px;
  transition: box-shadow .15s ease, transform .15s ease;
  cursor: pointer;
}
.features .card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Apply a gentle lift effect to any card on hover */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.features .icon {
  font-size: 36px;
  margin-bottom: 12px;
  color: var(--accent);
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .grid3, .list { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2,1fr); }
}