/* Relay Brand Design System
   Light theme matching original site | Primary blue: #002549 | Font: Inter
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --relay-primary: #002549;
  --relay-primary-hover: #001a36;
  --relay-focus: #3099ff;
  --relay-accent: #3099ff;
  --relay-bg: #ffffff;
  --relay-bg-elevated: #f7f9fc;
  --relay-bg-card: #f2f6fb;
  --relay-border: #e0e8f0;
  --relay-text: #002549;
  --relay-text-subtle: #4f4f4f;
  --relay-text-muted: #707070;
  --relay-white: #ffffff;
  --relay-radius: 16px;
  --relay-radius-sm: 10px;
  --relay-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--relay-bg) !important;
  color: var(--relay-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.mbr-section-title,
.display-2, .display-4, .display-5, .display-7 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--relay-text) !important;
}

.display-2 {
  font-size: 3.5rem !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

.display-5 {
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

.display-7 {
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: var(--relay-text-subtle) !important;
}

/* Navbar */
.menu, .menu01, .navbar {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--relay-border) !important;
}

.navbar-brand .navbar-caption,
.navbar-caption-wrap a {
  color: var(--relay-text) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

.navbar-nav .nav-link {
  color: var(--relay-text-subtle) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  transition: color var(--relay-transition) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--relay-primary) !important;
}

.navbar-buttons .btn,
.navbar-buttons .btn-black {
  background: var(--relay-primary) !important;
  color: var(--relay-white) !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: var(--relay-radius-sm) !important;
  transition: background var(--relay-transition) !important;
}

.navbar-buttons .btn:hover {
  background: var(--relay-primary-hover) !important;
}

/* Hero section */
.header1 {
  background: var(--relay-bg) !important;
  padding: 6rem 0 5rem !important;
}

.header1 .mbr-overlay {
  background: var(--relay-bg) !important;
  opacity: 1 !important;
}

.header1 .label-text,
.header1 .mbr-text.label-text {
  color: var(--relay-accent) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 1rem !important;
}

.header1 h1 {
  font-size: 4rem !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 1.5rem !important;
}

.header1 .mbr-text:not(.label-text) {
  color: var(--relay-text-subtle) !important;
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
  max-width: 600px !important;
}

.header1 .btn-danger,
.header1 .mbr-section-btn .btn {
  background: var(--relay-primary) !important;
  color: var(--relay-white) !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 0.85rem 2rem !important;
  border-radius: var(--relay-radius-sm) !important;
  font-size: 1rem !important;
  transition: all var(--relay-transition) !important;
}

.header1 .btn-danger:hover,
.header1 .mbr-section-btn .btn:hover {
  background: var(--relay-primary-hover) !important;
  transform: translateY(-1px) !important;
}

/* Features sections */
.features3, .features02, .features03, .features05,
.article1, .contacts01, .map01 {
  background: var(--relay-bg) !important;
  padding: 5rem 0 !important;
}

.features3 + .features3,
.features05 + .features05 {
  border-top: 1px solid var(--relay-border) !important;
}

.features3 .text-container h2,
.features03 h3,
.features05 h3 {
  color: var(--relay-text) !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

.features3 .mbr-section-subtitle,
.features03 .mbr-section-subtitle {
  color: var(--relay-text-subtle) !important;
  font-size: 1.1rem !important;
}

/* Cards */
.card,
.card-wrapper,
.item-wrap,
.item-wrapper {
  background: var(--relay-bg-card) !important;
  border: 1px solid var(--relay-border) !important;
  border-radius: var(--relay-radius) !important;
  padding: 1.75rem !important;
  transition: border-color var(--relay-transition), transform var(--relay-transition) !important;
}

.card:hover,
.card-wrapper:hover,
.item-wrap:hover,
.item-wrapper:hover {
  border-color: var(--relay-accent) !important;
  transform: translateY(-2px) !important;
}

.card-title,
.item-title {
  color: var(--relay-text) !important;
  font-weight: 600 !important;
}

.card-text,
.item-text {
  color: var(--relay-text-subtle) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

/* Icon boxes */
.icon-box .mbr-iconfont {
  color: var(--relay-primary) !important;
}

/* Links */
a.text-primary,
a[class*="text-primary"] {
  color: var(--relay-primary) !important;
  text-decoration: none !important;
  transition: color var(--relay-transition) !important;
}

a.text-primary:hover {
  color: var(--relay-accent) !important;
}

/* Article content */
.article1 h1 {
  font-size: 3rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 1rem !important;
}

.article1 .section-head p,
.article1 .mbr-text.mbr-fonts-style.display-5 {
  color: var(--relay-accent) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
}

.article1 p,
.article1 .mbr-text {
  color: var(--relay-text-subtle) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

.article1 h2,
.article1 h3 {
  color: var(--relay-text) !important;
  font-weight: 600 !important;
}

.article1 ul li {
  color: var(--relay-text-subtle) !important;
}

/* Buttons */
.btn-black,
.btn-danger {
  background: var(--relay-primary) !important;
  color: var(--relay-white) !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: var(--relay-radius-sm) !important;
  padding: 0.75rem 1.75rem !important;
  transition: all var(--relay-transition) !important;
}

.btn-black:hover,
.btn-danger:hover {
  background: var(--relay-primary-hover) !important;
  color: var(--relay-white) !important;
  transform: translateY(-1px) !important;
}

/* Contacts section */
.contacts01 .card-box .iconfont-wrapper .mbr-iconfont {
  color: var(--relay-primary) !important;
}

.contacts01 h4 {
  color: var(--relay-text) !important;
  font-weight: 600 !important;
}

/* Map / CTA section */
.map01 {
  background: var(--relay-bg-elevated) !important;
  border-top: 1px solid var(--relay-border) !important;
  border-radius: 0 !important;
}

.map01 h3 {
  color: var(--relay-text) !important;
  font-weight: 700 !important;
}

.map01 .mbr-text {
  color: var(--relay-text-subtle) !important;
}

/* Footer */
.footer2 {
  background: var(--relay-bg) !important;
  border-top: 1px solid var(--relay-border) !important;
  padding: 2.5rem 0 !important;
}

.footer2 .mbr-text,
.footer2 .mbr-text a {
  color: var(--relay-text-muted) !important;
  font-size: 0.875rem !important;
}

.footer2 .mbr-text a:hover {
  color: var(--relay-primary) !important;
}

/* Hamburger menu */
.hamburger span {
  background: var(--relay-text) !important;
}

/* Images */
.item-img img,
.card-img {
  border-radius: var(--relay-radius-sm) !important;
}

/* Section spacing */
section {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* Responsive */
@media (max-width: 768px) {
  .display-2 {
    font-size: 2.25rem !important;
  }
  .header1 h1 {
    font-size: 2.5rem !important;
  }
  .article1 h1 {
    font-size: 2rem !important;
  }
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--relay-bg-elevated);
}
::-webkit-scrollbar-thumb {
  background: var(--relay-border);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--relay-primary);
}

/* Selection */
::selection {
  background: var(--relay-primary);
  color: var(--relay-white);
}

/* Built for Multichain Apps — bento grid (features02 apexm5) */
.cid-vmYe5u8rJb .items-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  gap: 20px !important;
}
.cid-vmYe5u8rJb .items-wrapper .item {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.cid-vmYe5u8rJb .items-wrapper .item .item-wrapper {
  position: relative !important;
  height: 100% !important;
  min-height: 340px !important;
  overflow: hidden !important;
  background: var(--relay-bg-card) !important;
  border: 1px solid var(--relay-border) !important;
  border-radius: var(--relay-radius) !important;
  padding: 0 !important;
  transition: border-color var(--relay-transition), transform var(--relay-transition) !important;
}
.cid-vmYe5u8rJb .items-wrapper .item .item-wrapper:hover {
  border-color: var(--relay-accent) !important;
  transform: translateY(-2px) !important;
}
.cid-vmYe5u8rJb .items-wrapper .item .item-wrapper .item-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}
.cid-vmYe5u8rJb .items-wrapper .item .item-wrapper .item-img img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.cid-vmYe5u8rJb .items-wrapper .item .item-wrapper .card-box {
  position: relative !important;
  z-index: 2 !important;
  padding: 2rem !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  background: linear-gradient(to top, rgba(0, 37, 73, 0.92) 0%, rgba(0, 37, 73, 0.55) 45%, rgba(0, 37, 73, 0.15) 100%) !important;
}
.cid-vmYe5u8rJb .items-wrapper .item .item-wrapper .card-box .item-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  width: 100% !important;
}
.cid-vmYe5u8rJb .items-wrapper .item .item-wrapper .card-box .title-box .item-title {
  width: 100% !important;
}
.cid-vmYe5u8rJb .items-wrapper .item .item-wrapper .card-box .item-text {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}
.cid-vmYe5u8rJb .items-wrapper .item .item-wrapper .card-box .text-wrap .item-text {
  width: 100% !important;
}
@media (max-width: 992px) {
  .cid-vmYe5u8rJb .items-wrapper .item .item-wrapper {
    min-height: 280px !important;
  }
  .cid-vmYe5u8rJb .items-wrapper .item .item-wrapper .card-box {
    padding: 1.5rem !important;
  }
}

/* ===== Professional Layout & Spacing ===== */

/* Container max-widths for readability */
.container, .container-fluid {
  max-width: 1200px !important;
}
.cid-vmYe5u8rJb .container-fluid {
  max-width: 1280px !important;
}

/* Consistent section vertical rhythm */
section {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  position: relative;
  z-index: 1;
}
.header1 {
  padding-top: 7rem !important;
  padding-bottom: 6rem !important;
}

/* Section titles — consistent spacing */
.mbr-section-title {
  margin-bottom: 1.25rem !important;
}
.mbr-section-subtitle {
  margin-bottom: 0 !important;
  max-width: 640px !important;
}
.features3 .text-container,
.features03 .text-container,
.cid-sRAwqoqBlX .text-container {
  margin-bottom: 2.5rem !important;
  text-align: center !important;
}

/* Feature cards grid — even alignment */
.features3 .cards-container,
.cid-sRAwqoqBlX .cards-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 1.5rem !important;
}
.features3 .card,
.cid-sRAwqoqBlX .card {
  margin: 0 !important;
  height: 100% !important;
}
.features3 .card-wrapper,
.cid-sRAwqoqBlX .card-wrapper {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 2rem !important;
}
.features3 .icon-box,
.cid-sRAwqoqBlX .icon-box {
  margin-bottom: 1.25rem !important;
}
.features3 .card-title,
.cid-sRAwqoqBlX .card-title {
  margin-bottom: 0.75rem !important;
}

/* "Why Build on Relay" — 4-column stat cards */
.features03.cid-vmYfQkH3xL .row.mt-4 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  margin-top: 2.5rem !important;
}
.features03.cid-vmYfQkH3xL .card {
  margin: 0 !important;
  padding: 0 !important;
}
.features03.cid-vmYfQkH3xL .card-wrapper {
  height: 100% !important;
  padding: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* "Learn Relay" & "From the Blog" — 2-column card grid */
.features05.cid-vmY82sNqXx .items-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
  margin-top: 2.5rem !important;
}
.features05.cid-vmY82sNqXx .item {
  padding: 0 !important;
}
.features05.cid-vmY82sNqXx .item-wrap {
  height: 100% !important;
  padding: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.features05.cid-vmY82sNqXx .item-title {
  margin-bottom: 0.75rem !important;
}

/* Contacts section — 3-column alignment */
.contacts01 .items-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  margin: 0 !important;
}
.contacts01 .item {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}
.contacts01 .item-wrapper {
  height: 100% !important;
  min-height: 240px !important;
  padding: 3rem 2.5rem !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.contacts01 .iconfont-wrapper {
  margin-bottom: 1.75rem !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--relay-bg-card) !important;
  border: 1px solid var(--relay-border) !important;
  border-radius: 14px !important;
}
.contacts01 .iconfont-wrapper .mbr-iconfont {
  font-size: 28px !important;
}
.contacts01 h4 {
  margin-bottom: 0.75rem !important;
  font-size: 1.25rem !important;
}
.contacts01 .card-text {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* CTA section — centered, breathable */
.map01 .container {
  max-width: 760px !important;
  text-align: center !important;
}
.map01 .mbr-section-btn {
  margin-top: 2rem !important;
}

/* Footer — clean spacing */
.footer2 {
  padding: 3rem 0 !important;
}
.footer2 .mbr-text {
  line-height: 1.8 !important;
}

/* Navbar — fixed positioning spacing */
.navbar-fixed-top {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030 !important;
}

/* Smooth scroll & focus visibility */
html {
  scroll-behavior: smooth;
}
:focus-visible {
  outline: 3px solid var(--relay-accent) !important;
  outline-offset: 2px !important;
}

/* Responsive grid collapses */
@media (max-width: 992px) {
  .features3 .cards-container,
  .cid-sRAwqoqBlX .cards-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .features05.cid-vmY82sNqXx .items-wrapper {
    grid-template-columns: 1fr !important;
  }
  .contacts01 .items-wrapper {
    grid-template-columns: 1fr !important;
  }
  .features03.cid-vmYfQkH3xL .row.mt-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 576px) {
  .features3 .cards-container,
  .cid-sRAwqoqBlX .cards-container {
    grid-template-columns: 1fr !important;
  }
  .features03.cid-vmYfQkH3xL .row.mt-4 {
    grid-template-columns: 1fr !important;
  }
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .header1 {
    padding-top: 5rem !important;
    padding-bottom: 4rem !important;
  }
  .header1 h1 {
    font-size: 2.25rem !important;
  }
  .display-2 {
    font-size: 2rem !important;
  }
}