/* Homepage custom styling - Aritim Dark inspired */

body {
  background: #0b0c0f !important;
  color: rgba(235, 238, 245, 0.92) !important;
}

/* Main content area */
main {
  background: transparent !important;
}

/* Service/bookmark/widget cards */
.service-card,
.bookmark-card,
.information-widget-resource,
.information-widget-search {
  background: rgba(11, 12, 15, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Hover: visible but not flashy */
.service-card:hover,
.bookmark-card:hover {
  background: rgba(18, 20, 25, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: none !important;
}

/* Group headings */
.service-group-name,
.bookmark-group-name {
  color: rgba(238, 241, 248, 0.9) !important;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Card descriptions */
.service-card .description {
  color: rgba(210, 215, 225, 0.62) !important;
}

/* Service names */
.service-card .name,
.bookmark-card .name {
  color: rgba(245, 247, 252, 0.92) !important;
}

/* Header/nav text */
header,
header * {
  color: rgba(238, 241, 248, 0.88) !important;
}

/* Flatten top widgets/search containers */
div[class*="information-widget"],
div[class*="search"],
form[class*="search"],
section[class*="search"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Search input itself: keep visible, lose chunky wrapper */
input[type="text"],
input[type="search"] {
  background: rgba(11, 12, 15, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

/* Kill dark blocks around resource widgets */
div[class*="resources"],
div[class*="resource"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Make small widget tiles less blocky */
div[class*="resource"] > div,
div[class*="information"] > div {
  background: rgba(11, 12, 15, 0.55) !important;
  box-shadow: none !important;
}

/* Tone down service card shading */
.service-card,
.bookmark-card {
  background: rgba(11, 12, 15, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
}

/* Softer hover */
.service-card:hover,
.bookmark-card:hover {
  background: rgba(18, 20, 25, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Tone down widget mini tiles too */
div[class*="resource"] > div,
div[class*="information"] > div {
  background: rgba(11, 12, 15, 0.42) !important;
}

/* Soft frosted card style inspired by the reference screenshot */

.service-card,
.bookmark-card {
  background: rgba(95, 105, 120, 0.34) !important;
  border: 1px solid rgba(220, 230, 245, 0.10) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Slightly brighter hover, still subtle */
.service-card:hover,
.bookmark-card:hover {
  background: rgba(115, 125, 140, 0.42) !important;
  border-color: rgba(235, 240, 250, 0.18) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Make service text cleaner against translucent cards */
.service-card .name,
.bookmark-card .name {
  color: rgba(245, 247, 252, 0.94) !important;
  font-weight: 500 !important;
}

.service-card .description {
  color: rgba(225, 230, 240, 0.70) !important;
}

/* Softer section headings like the reference */
.service-group-name,
.bookmark-group-name {
  color: rgba(235, 240, 250, 0.86) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

/* Search bar: thin frosted strip instead of dark slab */
form,
form[class*="search"],
div[class*="search"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

input[type="text"],
input[type="search"] {
  background: rgba(95, 105, 120, 0.28) !important;
  border: 1px solid rgba(230, 235, 245, 0.24) !important;
  color: rgba(245, 247, 252, 0.94) !important;
  box-shadow: none !important;
}

/* Resource widgets: match cards but smaller */
div[class*="resource"] > div,
div[class*="information"] > div {
  background: rgba(95, 105, 120, 0.28) !important;
  border: 1px solid rgba(220, 230, 245, 0.08) !important;
  box-shadow: none !important;
}

/* Optional: make page content breathe more like the reference */
main {
  max-width: 1480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Slight opacity bump for readability */
.service-card,
.bookmark-card {
  background: rgba(95, 105, 120, 0.44) !important;
}

.service-card:hover,
.bookmark-card:hover {
  background: rgba(115, 125, 140, 0.52) !important;
}

input[type="text"],
input[type="search"] {
  background: rgba(95, 105, 120, 0.36) !important;
}

div[class*="resource"] > div,
div[class*="information"] > div {
  background: rgba(95, 105, 120, 0.36) !important;
}

/* EOTA greeting title */
div[class*="information-widget"],
div[class*="information"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* The greeting widget is the only top info widget, so make its text title-sized */
div[class*="information-widget"] *,
div[class*="information"] * {
  font-size: 2.4rem !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: rgba(245, 247, 252, 0.96) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65) !important;
}

/* Keep the title area clean and roomy */
div[class*="information-widget"] {
  padding: 0 !important;
  margin-bottom: 1.4rem !important;
}

/* EOTA title divider */
div[class*="information"],
div[class*="widget"] {
  position: relative;
}

/* Stylized divider under the greeting/title area */
main > div:first-child::after,
section:first-of-type::after,
div[class*="information"]::after {
  content: "";
  display: block;
  width: min(520px, 72vw);
  height: 1px;
  margin: 0.65rem auto 1.45rem auto;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 247, 252, 0.18),
    rgba(245, 247, 252, 0.72),
    rgba(245, 247, 252, 0.18),
    transparent
  );

  box-shadow: 0 0 14px rgba(180, 200, 255, 0.28);
}

/* Small center accent on the divider */
main > div:first-child::before,
section:first-of-type::before,
div[class*="information"]::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0.15rem auto -0.95rem auto;

  border-radius: 999px;
  background: rgba(245, 247, 252, 0.78);
  box-shadow: 0 0 12px rgba(180, 200, 255, 0.55);
}

/* Stylized divider under EOTA greeting title */
.text-4xl::after {
  content: "";
  display: block;

  width: min(560px, 72vw);
  height: 1px;
  margin: 0.7rem auto 1.5rem auto;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(220, 230, 245, 0.16) 18%,
    rgba(245, 247, 252, 0.78) 50%,
    rgba(220, 230, 245, 0.16) 82%,
    transparent 100%
  );

  box-shadow:
    0 0 10px rgba(180, 200, 255, 0.34),
    0 0 22px rgba(120, 145, 210, 0.18);
}

/* Tiny center glint */
.text-4xl::before {
  content: "";
  display: block;

  width: 8px;
  height: 8px;
  margin: 0 auto -0.95rem auto;

  border-radius: 999px;
  background: rgba(245, 247, 252, 0.82);
  box-shadow: 0 0 14px rgba(180, 200, 255, 0.58);
}