body {
  --ui-font-family: system-ui, sans-serif;
  --ui-font-family-headings: "Bricolage Grotesque", sans-serif;
  --ui-header-height: 100px;
}

.font-bricolage {
  font-family: "Bricolage Grotesque", sans-serif;
}

.ui-dropdown {
  & > [popover] {
    position-area: bottom center;
  }
  & > [popover].--anchor-right {
    position-area: bottom span-left;
  }
  .--trigger.--nobg {
    background-image: none;
  }
}
.whitespace-nowrap {
  white-space: nowrap;
}
html, body {
  height: 100%;
}
.ui-header {
  height: var(--ui-header-height);
}
.ui-vcontainer {
  height: calc(100vh - var(--ui-header-height));
  display: flex;
  flex-direction: column;
  &.--center {
    justify-content: center;
    align-items: center;
  }
}

/* Homepage hero section */
.hero-section {
  background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
}

/* Feature card icons */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  color: currentColor;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.feature-card:hover .feature-icon {
  opacity: 1;
  transform: scale(1.05);
}

.feature-card {
  transition: all 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
}

/* Twitter-style tab navigation */
.ui-tab-nav {
  display: flex;
  gap: 0;

  & > a {
    padding: 16px 24px;
    font-weight: 500;
    color: #536471;
    text-decoration: none;
    position: relative;
    transition: all 0.15s ease;

    &:hover {
      background: rgba(0, 0, 0, 0.03);
    }

    &.--active {
      color: currentColor;
      font-weight: 700;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 56px;
        height: 4px;
        background: currentColor;
        border-radius: 2px;
      }
    }
  }
}