section#headline {
  position: relative;
  color: var(--color-primary-foreground);
  background: var(--gradient-hero);
}

  section#headline .bg-overlay {
    position: absolute;
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    mix-blend-mode: overlay;
    opacity: 0.25;
    inset: 0;
  }

  section#headline .container {
    position: relative;
    width: min(92%, 1200px);
    margin: 0 auto;
    padding-block: calc(var(--space) * 28);
  }

  section#headline .title {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: -0.025rem;
  }

  section#headline .desc {
    color: color-mix(in oklab, var(--color-primary-foreground) 85%, transparent);
    font-size: 1.125rem;
    max-width: 48rem;
    margin-top: calc(var(--space) * 5);
  }

section#sectors {
  width: min(92%, 1200px);
  margin: 0 auto;
  padding-block: calc(var(--space) * 20);
}

  section#sectors .sectors-container {
    display: grid;
  }

    section#sectors .sectors-container .sector {
      display: grid;
      padding: calc(var(--space) * 8);
      background-color: var(--color-card);
      border-top: 1px solid var(--color-border);
      border-left: 1px solid var(--color-border);
      border-right: 1px solid var(--color-border);
      gap: calc(var(--space) * 6);
    }

    section#sectors .sectors-container .sector:hover {
      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
    }

    section#sectors .sectors-container .sector:first-of-type {
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
    }

    section#sectors .sectors-container .sector:last-of-type {
      border-bottom: 1px solid var(--color-border);
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
    }

      section#sectors .sectors-container .sector .number {
        color: var(--color-secondary);
        font-size: 1.5rem;
        font-weight: 600;
      }

      section#sectors .sectors-container .sector .head {
        display: flex;
        align-items: center;
        gap: calc(var(--space) * 3);
      }

        section#sectors .sectors-container .sector .head .icon {
          display: grid;
          width: calc(var(--space) * 12);
          height: calc(var(--space) * 12);
          flex-shrink: 0;
          place-items: center;
          color: var(--color-primary-foreground);
          background-color: var(--color-primary);
          border-radius: calc(0.5rem - 2px);
        }

          section#sectors .sectors-container .sector .head .icon svg {
            width: calc(var(--space) * 5);
            height: calc(var(--space) * 5);
          }

        section#sectors .sectors-container .sector .head .title {
          font-size: 1.25rem;
          font-weight: 600;
        }

      section#sectors .sectors-container .sector .description {
        color: var(--color-muted-foreground);
        line-height: 1.625rem;
      }