.sol-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(var(--text-rgb), 0.35);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.solutions-page {
  background: var(--bg-main);
  padding-top: 10px;
}

.solutions-page .services { scroll-margin-top: 24px; }

.solutions-page .service-card {
  background-color: transparent;
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  transition: transform 0.2s, border-color 0.2s;
}
.solutions-page .service-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow);
}

.solutions-page .service-badge {
  background-color: transparent;
  background-image: var(--glass-pill-sheen);
  border: 1px solid var(--glass-pill-border);
  box-shadow: var(--glass-pill-shadow);
}
.solutions-page .service-badge .service-icon {
  background-color: transparent;
  background-image: var(--glass-bubble-sheen);
  border: 1px solid var(--glass-bubble-border);
  box-shadow: var(--glass-bubble-shadow);
}
.solutions-page .service-badge .service-icon svg { color: var(--text-main); stroke: var(--text-main); }
.solutions-page .service-badge .service-name { color: var(--text-main); }
.solutions-page .service-desc { color: rgba(var(--text-rgb),0.6); }
.solutions-page .card-arrow { color: rgba(var(--text-rgb),0.35); }
.solutions-page .service-card-link:hover .card-arrow { color: var(--text-main); }

.sol-hero .hero-buttons {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
}
.sol-hero .btn {
  padding: 10px 22px;
  border: 1px solid var(--glass-pill-border);
  background-color: transparent;
  background-image: var(--glass-pill-sheen);
  box-shadow: var(--glass-pill-shadow);
  font-size: 13px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.sol-hero .btn:hover {
  background: var(--btn-invert-bg);
  border-color: transparent;
  color: var(--btn-invert-text);
}

@media (max-width: 420px) {
  .sol-hero .hero-buttons { gap: 8px; }
  .sol-hero .btn { padding: 9px 14px; font-size: 12px; }
}

@media (max-width: 360px) {
  .sol-hero .hero-buttons { gap: 6px; }
  .sol-hero .btn { padding: 8px 12px; font-size: 11px; }
}