/* ===== Harshith's Hub — dark studio polish ===== */

/* Page background — deep charcoal with subtle vignette */
body {
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(56, 130, 246, 0.06), transparent 60%),
    radial-gradient(900px 400px at 10% 110%, rgba(148, 163, 184, 0.05), transparent 55%),
    #0b0f14 !important;
}

/* Header — big editorial title, hairline divider */
.header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
  padding-bottom: 1rem !important;
}
h1.title {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.title span {
  background: linear-gradient(90deg, #38bdf8, #818cf8) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Cards — glassy dark surface, lift on hover */
[data-react='service'] .card,
.services .card {
  background: rgba(17, 24, 33, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.10) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
[data-react='service'] .card:hover,
.services .card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.55);
}

/* Section headers — uppercase eyebrow style */
.group-text {
  font-size: 0.78rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(148, 163, 184, 0.85) !important;
  font-weight: 600 !important;
}

/* Status dots — softer glow */
.status-dot {
  box-shadow: 0 0 6px currentColor !important;
}

/* Resource widget numbers — tabular, brighter */
.resources .grid > div {
  color: #e2e8f0 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Bookmarks row — pill chips */
.bookmarks a {
  background: rgba(148, 163, 184, 0.08) !important;
  border-radius: 999px !important;
  padding: 0.35rem 0.9rem !important;
  transition: background 0.15s ease !important;
}
.bookmarks a:hover {
  background: rgba(56, 189, 248, 0.16) !important;
}