html {
    background: #16213e;   /* match your hero or page bg */
}

body {
  background-color: #f8f9fa;
}
.hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  color: #ffffff;
  padding: 5rem 1rem 4rem;
}
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hero p.tagline {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: #adb5bd;
  max-width: 640px;
  margin: 1rem auto 0;
}
.social-card {
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border-radius: 1rem;
}
.social-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  color: inherit;
}
.social-card .card {
  border: none;
  border-radius: 1rem;
}
.social-card .icon-wrap {
  font-size: 2.5rem;
  line-height: 1;
}
/* Brand accent colors */
.icon-facebook  { color: #1877f2; }
.icon-instagram { color: #e1306c; }
.icon-linkedin  { color: #0a66c2; }
.icon-youtube   { color: #ff0000; }
.icon-pinterest   { color: green; }

.icon-dev   { color: #e25425; }
.icon-cf   { color: #272c69; }
.icon-photo   { color: green; }